Merge pull request liam-hq#1416 from liam-hq/mcp-server

✨(dev): Add MCP server for UI component discovery

Author: MH4GF

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .vercel
 .env*.local
 prism.wasm
+.cursor/mcp.json

frontend/internal-packages/mcp-server/README.md

@@ -0,0 +1,57 @@
+# @liam-hq/mcp-server
+
+Model Context Protocol (MCP) server for Liam development tools integration for AI agents.
+
+## Overview
+
+This package provides MCP server functionality that helps Cursor IDE interact with Liam's UI components, offering the following tools:
+
+- `list_components`: Lists all UI components in the Liam UI package
+- `get_component_files`: Gets the contents of a specific UI component's files
+
+## Setup
+
+### Installation
+
+The package is part of the Liam monorepo. Install all dependencies with:
+
+```bash
+pnpm install
+```
+
+## Cursor IDE Integration
+
+To use this MCP server with Cursor IDE, you need to configure a `.cursor/mcp.json` file in the root of your project.
+
+### Setting up mcp.json
+
+1. Create a `.cursor` directory in the project root if it doesn't exist
+2. Create an `mcp.json` file inside this directory with the following structure:
+
+```json
+{
+  "mcpServers": {
+    "liam-development-mcp-server": {
+      "command": "/path/to/your/node",
+      "args": [
+        "--experimental-strip-types",
+        "/path/to/your/liam/frontend/internal-packages/mcp-server/src/index.ts"
+      ]
+    }
+  }
+}
+```
+
+Replace `/path/to/your/node` with the path to your Node.js executable and adjust the path to the index.ts file according to your local environment.
+
+### Finding Your Node Path
+
+You can find your Node.js path by running:
+
+```bash
+which node
+```
+
+### Why This File Isn't Committed to Git
+
+The `mcp.json` file is not committed to Git because it contains absolute local file paths that are specific to each developer's environment. This prevents sharing a standard configuration that would work across all developer machines.

frontend/internal-packages/mcp-server/biome.jsonc

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../packages/configs/biome.jsonc"]
+}

frontend/internal-packages/mcp-server/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@liam-hq/mcp-server",
+  "license": "Apache-2.0",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "1.10.1",
+    "zod": "3.24.3"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.9.4",
+    "@liam-hq/configs": "workspace:*",
+    "@types/node": "22.14.1",
+    "concurrently": "9.1.2",
+    "tsx": "4.19.3",
+    "typescript": "5.8.3"
+  },
+  "scripts": {
+    "dev": "tsx watch src/index.ts",
+    "fmt": "concurrently \"pnpm:fmt:*\"",
+    "fmt:biome": "biome check --write --unsafe .",
+    "lint": "concurrently \"pnpm:lint:*\"",
+    "lint:biome": "biome check .",
+    "lint:tsc": "tsc --noEmit"
+  }
+}

frontend/internal-packages/mcp-server/src/index.ts

@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+import * as fs from 'node:fs/promises'
+import * as path from 'node:path'
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
+import { z } from 'zod'
+
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const uiComponentsPath = path.resolve(
+  __dirname,
+  '../../../packages/ui/src/components',
+)
+
+const server = new McpServer({
+  name: 'liam-development-mcp-server',
+  version: '0.1.0',
+})
+
+type McpToolSuccessResult = {
+  content: { type: 'text'; text: string }[]
+  isError?: false
+}
+
+type McpToolErrorResult = {
+  content: { type: 'text'; text: string }[]
+  isError: true
+  error: string
+}
+
+type McpToolResult = McpToolSuccessResult | McpToolErrorResult
+
+server.tool(
+  'list_components',
+  'Lists all component directories in the UI package',
+  async (): Promise<McpToolResult> => {
+    try {
+      const entries = await fs.readdir(uiComponentsPath, {
+        withFileTypes: true,
+      })
+      const componentDirs = entries
+        .filter((entry) => entry.isDirectory())
+        .map((dir) => dir.name)
+
+      return { content: [{ type: 'text', text: componentDirs.join('\n') }] }
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error)
+      return {
+        content: [],
+        isError: true,
+        error: `Failed to list components: ${errorMessage}`,
+      }
+    }
+  },
+)
+
+server.tool(
+  'get_component_files',
+  'Gets the content of all .tsx files within a specified UI component directory',
+  { componentName: z.string() },
+  async ({ componentName }): Promise<McpToolResult> => {
+    const componentDir = path.join(uiComponentsPath, componentName)
+
+    // Security check: ensure the resolved path is within the components directory
+    const resolvedPath = path.resolve(componentDir)
+    if (!resolvedPath.startsWith(uiComponentsPath)) {
+      return {
+        content: [],
+        isError: true,
+        error: 'Security error: Path traversal attempt detected.',
+      }
+    }
+
+    try {
+      // Check if component directory exists
+      const stats = await fs.stat(componentDir)
+      if (!stats.isDirectory()) {
+        return {
+          content: [],
+          isError: true,
+          error: `Component "${componentName}" is not a directory.`,
+        }
+      }
+
+      // Get all .tsx files in the component directory
+      const files = await fs.readdir(componentDir)
+      const tsxFiles = files.filter((file) => file.endsWith('.tsx'))
+
+      if (tsxFiles.length === 0) {
+        return {
+          content: [],
+          isError: true,
+          error: `No .tsx files found in component "${componentName}".`,
+        }
+      }
+
+      // Read content of each .tsx file
+      const fileContents = await Promise.all(
+        tsxFiles.map(async (file) => {
+          const content = await fs.readFile(
+            path.join(componentDir, file),
+            'utf8',
+          )
+          return `=== ${file} ===\n${content}`
+        }),
+      )
+
+      return { content: [{ type: 'text', text: fileContents.join('\n\n') }] }
+    } catch (error) {
+      // Check if it's the specific 'ENOENT' error
+      if (
+        error instanceof Error &&
+        'code' in error &&
+        error.code === 'ENOENT'
+      ) {
+        return {
+          content: [],
+          isError: true,
+          error: `Component "${componentName}" not found.`,
+        }
+      }
+      // Handle other errors
+      const errorMessage =
+        error instanceof Error ? error.message : String(error)
+      return {
+        content: [],
+        isError: true,
+        error: `Failed to get component files: ${errorMessage}`,
+      }
+    }
+  },
+)
+
+// Connect server to stdio transport
+async function main() {
+  try {
+    console.info('Starting liam-development-mcp-server...')
+    await server.connect(new StdioServerTransport())
+    console.info('Server connected')
+  } catch (error) {
+    console.error('Server error:', error)
+    process.exit(1)
+  }
+}
+
+main()

frontend/internal-packages/mcp-server/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@liam-hq/configs/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  },
+  "include": ["src/**/*"]
+}