Add AI Elements MCP server

Author: haydenbleasel

.changeset/all-parrots-throw.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Add AI Elements MCP server

apps/docs/content/docs/mcp.mdx

@@ -0,0 +1,118 @@
+---
+title: MCP Server
+description: AI Elements supports the Model Context Protocol (MCP) for model-driven development.
+---
+
+The **Model Context Protocol (MCP)** is an open standard that allows AI assistants like Claude, Cursor, and other AI-powered tools to securely connect with external data sources and systems. Think of it as a "universal remote" that lets your AI tools access real-world data and functionality.
+
+AI Elements supports MCP to supercharge your AI development workflow.
+
+## Installation Guide
+
+### Step 1: Choose Your AI Tool
+
+First, make sure you're using an AI development tool that supports MCP:
+
+- [Claude Desktop](https://claude.ai/download) (Free - recommended for beginners)
+- [Cursor](https://www.cursor.com/) (AI-powered code editor)
+- [Windsurf by Codeium](https://windsurf.com/) (AI development platform)
+- Other MCP-compatible tools
+
+### Step 2: Locate Your Configuration File
+
+Depending on your AI tool, you'll need to edit one of these files:
+
+- **Claude Desktop**: `.cursor/mcp.json`
+- **Cursor**: `.cursor/mcp.json`
+- **Windsurf**: `.codeium/windsurf/mcp_config.json`
+- **Other tools**: Check your tool's MCP documentation
+
+### Step 3: Add AI Elements Configuration
+
+Copy and paste this configuration into your MCP config file:
+
+```json
+{
+  "mcpServers": {
+    "ai-elements": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "mcp-remote",
+        "https://registry.ai-sdk.dev/api/mcp"
+      ]
+    }
+  }
+}
+```
+
+### Step 4: Restart Your AI Tool
+
+Close and reopen your AI application for the changes to take effect.
+
+### Step 5: Verify the Connection
+
+Test the integration by asking your AI assistant:
+
+> "What AI Elements components are available for building an AI app?"
+
+If successful, your AI should be able to list and explain AI Elements components!
+
+## Multiple MCP Servers
+
+You can use AI Elements alongside other MCP servers:
+
+```json
+{
+  "mcpServers": {
+    "ai-elements": {
+      "command": "npx",
+      "args": ["-y", "mcp-remote", "https://registry.ai-sdk.dev/api/mcp"]
+    },
+    "github": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-github"]
+    },
+    "filesystem": {
+      "command": "npx", 
+      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/project"]
+    }
+  }
+}
+```
+
+## Usage Examples
+
+### Getting Component Information
+
+Ask your AI assistant:
+
+> Show me how to use the AI Elements PromptInput component with different variants
+
+Expected response will include current documentation and code examples.
+
+### Building Layouts
+
+> Help me create an AI app layout using AI Elements components
+
+Your AI can suggest appropriate layout components and provide implementation code.
+
+### Styling Guidance  
+
+> What are the recommended spacing tokens in AI Elements?
+
+Get up-to-date information about design tokens and styling conventions.
+
+## Security and Privacy
+
+### Data Handling
+
+- The AI Elements MCP server only provides public component documentation
+- No personal data or code is transmitted to our servers
+- All communication happens through your chosen AI tool's security layer
+
+### Authentication
+
+- No authentication required for public component information
+- Future premium features may require API keys
+- Always use official AI Elements MCP endpoints

apps/registry/app/api/[transport]/route.ts

@@ -0,0 +1,106 @@
+import { promises as fs, readdirSync } from "node:fs";
+import { join } from "node:path";
+import { track } from "@vercel/analytics/server";
+import { createMcpHandler } from "mcp-handler";
+import type { RegistryItem } from "shadcn/schema";
+import { z } from "zod";
+
+const packageDir = join(process.cwd(), "..", "..", "packages", "elements");
+const srcDir = join(packageDir, "src");
+const packageFiles = readdirSync(srcDir, { withFileTypes: true });
+const tsxFiles = packageFiles.filter(
+  (file) => file.isFile() && file.name.endsWith(".tsx")
+);
+
+const componentNames = tsxFiles.map((file) => file.name.replace(".tsx", ""));
+
+const handler = createMcpHandler(
+  (server) => {
+    server.tool(
+      "get_ai_elements_components",
+      "Provides a list of all AI Elements components.",
+      {},
+      async () => {
+        if (process.env.NODE_ENV === "production") {
+          try {
+            await track("MCP: Get components");
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        return {
+          content: [{ type: "text", text: JSON.stringify(componentNames) }],
+        };
+      }
+    );
+
+    server.tool(
+      "get_ai_elements_component",
+      "Provides information about an AI Elements component.",
+      { component: z.enum(componentNames as [string, ...string[]]) },
+      async ({ component }) => {
+        const tsxFile = tsxFiles.find(
+          (file) => file.name === `${component}.tsx`
+        );
+
+        if (!tsxFile) {
+          return {
+            content: [
+              { type: "text", text: `Component ${component} not found` },
+            ],
+          };
+        }
+
+        if (process.env.NODE_ENV === "production") {
+          try {
+            await track("MCP: Get component", {
+              component,
+            });
+          } catch (error) {
+            console.error(error);
+          }
+        }
+
+        // Read the component file
+        const filePath = join(srcDir, tsxFile.name);
+        const content = await fs.readFile(filePath, "utf-8");
+        const parsedContent = content.replace(/@repo\/shadcn-ui\//g, "@/");
+
+        // Create a registry item for this component
+        const componentInfo: RegistryItem = {
+          name: component,
+          type: "registry:component",
+          title: component
+            .split("-")
+            .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" "),
+          description: `AI-powered ${component.replace("-", " ")} component.`,
+          files: [
+            {
+              path: `registry/default/ai-elements/${tsxFile.name}`,
+              type: "registry:component",
+              content: parsedContent,
+              target: `components/ai-elements/${tsxFile.name}`,
+            },
+          ],
+        };
+
+        return {
+          content: [
+            { type: "text", text: JSON.stringify(componentInfo, null, 2) },
+          ],
+        };
+      }
+    );
+  },
+  {},
+  {
+    disableSse: true,
+    basePath: "/api",
+    maxDuration: 60,
+    verboseLogs: true,
+  }
+);
+
+export { handler as GET, handler as POST };

apps/registry/package.json

@@ -8,11 +8,13 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.5.0",
+    "mcp-handler": "^1.0.3",
     "next": "16.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "shadcn": "^3.5.0",
-    "ts-morph": "^27.0.2"
+    "ts-morph": "^27.0.2",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@types/node": "^24",