cre8-mcp 0.1.0

package/dist/handlers.js

@@ -0,0 +1,128 @@
+/**
+ * Cre8 MCP Tool Handlers
+ *
+ * Functions that implement the Cre8 Design System MCP tools.
+ */
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+// Load catalog
+let catalog;
+function loadCatalog() {
+    if (catalog)
+        return catalog;
+    try {
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = dirname(__filename);
+        const catalogPath = join(__dirname, '..', 'data', 'components.json');
+        catalog = JSON.parse(readFileSync(catalogPath, 'utf-8'));
+    }
+    catch {
+        const catalogPath = join(process.cwd(), 'apps', 'cre8-mcp', 'data', 'components.json');
+        catalog = JSON.parse(readFileSync(catalogPath, 'utf-8'));
+    }
+    return catalog;
+}
+/**
+ * list_components - Lists all available Cre8 components
+ */
+export function handleListComponents(input) {
+    const cat = loadCatalog();
+    let components = cat.components;
+    if (input.category) {
+        components = components.filter((c) => c.category.toLowerCase() === input.category.toLowerCase());
+    }
+    // Group by category
+    const grouped = {};
+    for (const comp of components) {
+        if (!grouped[comp.category]) {
+            grouped[comp.category] = [];
+        }
+        grouped[comp.category].push({
+            name: comp.name,
+            description: comp.description,
+        });
+    }
+    const result = {
+        library: cat.library,
+        version: cat.version,
+        categories: Object.entries(grouped).map(([category, comps]) => ({
+            category,
+            components: comps,
+        })),
+        totalComponents: components.length,
+    };
+    return JSON.stringify(result, null, 2);
+}
+/**
+ * get_component - Gets detailed info for a specific component
+ */
+export function handleGetComponent(input) {
+    const cat = loadCatalog();
+    // Find component (case-insensitive, with or without Cre8 prefix)
+    const searchName = input.name.toLowerCase().replace(/^cre8/, '');
+    const component = cat.components.find((c) => c.name.toLowerCase() === input.name.toLowerCase() ||
+        c.name.toLowerCase().replace(/^cre8/, '') === searchName);
+    if (!component) {
+        return JSON.stringify({
+            error: `Component "${input.name}" not found`,
+            suggestion: 'Use list_components to see available components',
+        });
+    }
+    const result = {
+        name: component.name,
+        category: component.category,
+        description: component.description,
+        import: `import { ${component.name} } from '@tmorrow/cre8-react';`,
+        props: component.props,
+        examples: component.examples || [],
+    };
+    return JSON.stringify(result, null, 2);
+}
+/**
+ * get_patterns - Gets layout patterns and templates
+ */
+export function handleGetPatterns(input) {
+    const cat = loadCatalog();
+    if (input.name) {
+        const pattern = cat.patterns.find((p) => p.name.toLowerCase() === input.name.toLowerCase());
+        if (!pattern) {
+            return JSON.stringify({
+                error: `Pattern "${input.name}" not found`,
+                available: cat.patterns.map((p) => p.name),
+            });
+        }
+        return JSON.stringify(pattern, null, 2);
+    }
+    return JSON.stringify({
+        patterns: cat.patterns.map((p) => ({
+            name: p.name,
+            description: p.description,
+        })),
+    }, null, 2);
+}
+/**
+ * search_components - Search components by name or description
+ */
+export function handleSearchComponents(input) {
+    const cat = loadCatalog();
+    const query = input.query.toLowerCase();
+    const matches = cat.components.filter((c) => c.name.toLowerCase().includes(query) ||
+        c.description.toLowerCase().includes(query) ||
+        c.category.toLowerCase().includes(query));
+    if (matches.length === 0) {
+        return JSON.stringify({
+            message: `No components found matching "${input.query}"`,
+            suggestion: 'Try a broader search term or use list_components',
+        });
+    }
+    return JSON.stringify({
+        query: input.query,
+        results: matches.map((c) => ({
+            name: c.name,
+            category: c.category,
+            description: c.description,
+        })),
+        count: matches.length,
+    }, null, 2);
+}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+/**
+ * Cre8 Design System MCP Server
+ *
+ * Provides component intelligence for @tmorrow/cre8-react to AI agents.
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+/**
+ * Cre8 Design System MCP Server
+ *
+ * Provides component intelligence for @tmorrow/cre8-react to AI agents.
+ */
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+import { tools, ListComponentsSchema, GetComponentSchema, GetPatternsSchema, SearchComponentsSchema } from './tools.js';
+import { handleListComponents, handleGetComponent, handleGetPatterns, handleSearchComponents, } from './handlers.js';
+// Create server instance
+const server = new Server({
+    name: 'cre8-mcp',
+    version: '0.1.0',
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+// List available tools
+server.setRequestHandler(ListToolsRequestSchema, async () => ({
+    tools,
+}));
+// Handle tool calls
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    try {
+        let result;
+        switch (name) {
+            case 'list_components': {
+                const input = ListComponentsSchema.parse(args);
+                result = handleListComponents(input);
+                break;
+            }
+            case 'get_component': {
+                const input = GetComponentSchema.parse(args);
+                result = handleGetComponent(input);
+                break;
+            }
+            case 'get_patterns': {
+                const input = GetPatternsSchema.parse(args);
+                result = handleGetPatterns(input);
+                break;
+            }
+            case 'search_components': {
+                const input = SearchComponentsSchema.parse(args);
+                result = handleSearchComponents(input);
+                break;
+            }
+            default:
+                throw new Error(`Unknown tool: ${name}`);
+        }
+        return {
+            content: [{ type: 'text', text: result }],
+        };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return {
+            content: [{ type: 'text', text: `Error: ${message}` }],
+            isError: true,
+        };
+    }
+});
+// Start the server
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error('Cre8 MCP Server running on stdio');
+}
+main().catch((error) => {
+    console.error('Fatal error:', error);
+    process.exit(1);
+});

package/dist/proxy.d.ts

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+/**
+ * Cre8 MCP Proxy - Local stdio server that proxies to remote REST API
+ *
+ * Usage: npx cre8-mcp-proxy
+ *
+ * Add to Claude Desktop config:
+ * {
+ *   "mcpServers": {
+ *     "cre8-mcp": {
+ *       "command": "npx",
+ *       "args": ["-y", "cre8-mcp-proxy"]
+ *     }
+ *   }
+ * }
+ */
+export {};

package/dist/proxy.js

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+/**
+ * Cre8 MCP Proxy - Local stdio server that proxies to remote REST API
+ *
+ * Usage: npx cre8-mcp-proxy
+ *
+ * Add to Claude Desktop config:
+ * {
+ *   "mcpServers": {
+ *     "cre8-mcp": {
+ *       "command": "npx",
+ *       "args": ["-y", "cre8-mcp-proxy"]
+ *     }
+ *   }
+ * }
+ */
+import { Server } from '@modelcontextprotocol/sdk/server/index.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { CallToolRequestSchema, ListToolsRequestSchema, } from '@modelcontextprotocol/sdk/types.js';
+const API_URL = process.env.CRE8_API_URL || 'https://a2ui-bridgecre8-mcp-production.up.railway.app';
+const tools = [
+    {
+        name: 'list_components',
+        description: 'Lists all available Cre8 React components grouped by category',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                category: {
+                    type: 'string',
+                    description: 'Filter by category: Actions, Forms, Layout, Typography, Navigation, Disclosure, Feedback, Data, Media, Marketing',
+                },
+            },
+        },
+    },
+    {
+        name: 'get_component',
+        description: 'Gets detailed information about a specific Cre8 component',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Component name (e.g., "Cre8Button" or "Button")',
+                },
+            },
+            required: ['name'],
+        },
+    },
+    {
+        name: 'get_patterns',
+        description: 'Gets pre-built UI patterns and templates using Cre8 components',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Pattern name to get details (optional)',
+                },
+            },
+        },
+    },
+    {
+        name: 'search_components',
+        description: 'Search Cre8 components by name, description, or category',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                query: {
+                    type: 'string',
+                    description: 'Search query (e.g., "button", "form", "navigation")',
+                },
+            },
+            required: ['query'],
+        },
+    },
+];
+async function fetchAPI(endpoint) {
+    const response = await fetch(`${API_URL}${endpoint}`);
+    if (!response.ok) {
+        throw new Error(`API error: ${response.statusText}`);
+    }
+    return JSON.stringify(await response.json(), null, 2);
+}
+const server = new Server({ name: 'cre8-mcp', version: '0.1.0' }, { capabilities: { tools: {} } });
+server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools }));
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    try {
+        let result;
+        switch (name) {
+            case 'list_components': {
+                const category = args.category;
+                const endpoint = category ? `/components?category=${encodeURIComponent(category)}` : '/components';
+                result = await fetchAPI(endpoint);
+                break;
+            }
+            case 'get_component': {
+                const componentName = args.name;
+                result = await fetchAPI(`/components/${encodeURIComponent(componentName)}`);
+                break;
+            }
+            case 'get_patterns': {
+                const patternName = args.name;
+                const endpoint = patternName ? `/patterns/${encodeURIComponent(patternName)}` : '/patterns';
+                result = await fetchAPI(endpoint);
+                break;
+            }
+            case 'search_components': {
+                const query = args.query;
+                result = await fetchAPI(`/search?q=${encodeURIComponent(query)}`);
+                break;
+            }
+            default:
+                throw new Error(`Unknown tool: ${name}`);
+        }
+        return { content: [{ type: 'text', text: result }] };
+    }
+    catch (error) {
+        const message = error instanceof Error ? error.message : 'Unknown error';
+        return { content: [{ type: 'text', text: `Error: ${message}` }], isError: true };
+    }
+});
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error(`Cre8 MCP Proxy connected to ${API_URL}`);
+}
+main().catch((error) => {
+    console.error('Fatal error:', error);
+    process.exit(1);
+});

package/dist/server.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Cre8 MCP REST API Server
+ *
+ * Exposes component patterns and search as HTTP endpoints.
+ */
+export {};

package/dist/server.js

@@ -0,0 +1,82 @@
+/**
+ * Cre8 MCP REST API Server
+ *
+ * Exposes component patterns and search as HTTP endpoints.
+ */
+import { serve } from '@hono/node-server';
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { handleGetPatterns, handleSearchComponents, handleListComponents, handleGetComponent, } from './handlers.js';
+const app = new Hono();
+// CORS - allow all
+app.use('*', cors({
+    origin: '*',
+    allowMethods: ['GET', 'OPTIONS'],
+}));
+// Health check
+app.get('/health', (c) => c.json({ status: 'ok', service: 'cre8-mcp' }));
+// Info endpoint
+app.get('/', (c) => c.json({
+    name: 'cre8-mcp',
+    version: '0.1.0',
+    description: 'Cre8 Design System MCP Server - Component intelligence for AI agents',
+    endpoints: {
+        health: 'GET /health',
+        components: 'GET /components',
+        component: 'GET /components/:name',
+        patterns: 'GET /patterns',
+        pattern: 'GET /patterns/:name',
+        search: 'GET /search?q=query',
+    },
+    usage: 'npx @anthropic-ai/cre8-mcp (coming soon) or run locally with: npx -y cre8-mcp-proxy',
+}));
+// GET /components
+app.get('/components', (c) => {
+    const category = c.req.query('category');
+    const result = handleListComponents({ category });
+    return c.json(JSON.parse(result));
+});
+// GET /components/:name
+app.get('/components/:name', (c) => {
+    const result = handleGetComponent({ name: c.req.param('name') });
+    return c.json(JSON.parse(result));
+});
+// GET /patterns
+app.get('/patterns', (c) => {
+    const input = {};
+    const result = handleGetPatterns(input);
+    return c.json(JSON.parse(result));
+});
+// GET /patterns/:name
+app.get('/patterns/:name', (c) => {
+    const input = { name: c.req.param('name') };
+    const result = handleGetPatterns(input);
+    return c.json(JSON.parse(result));
+});
+// GET /search?q=query
+app.get('/search', (c) => {
+    const q = c.req.query('q');
+    if (!q) {
+        return c.json({ error: 'Missing required query parameter: q' }, 400);
+    }
+    const input = { query: q };
+    const result = handleSearchComponents(input);
+    return c.json(JSON.parse(result));
+});
+// Start server
+const port = parseInt(process.env.PORT || '3001', 10);
+console.log(`Cre8 MCP API starting on port ${port}`);
+const server = serve({
+    fetch: app.fetch,
+    port,
+}, (info) => {
+    console.log(`Server running on http://localhost:${info.port}`);
+});
+process.on('SIGTERM', () => {
+    console.log('SIGTERM received, shutting down...');
+    server.close();
+});
+process.on('SIGINT', () => {
+    console.log('SIGINT received, shutting down...');
+    server.close();
+});

package/dist/tools.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Cre8 MCP Tool Definitions
+ */
+import { z } from 'zod';
+export declare const tools: ({
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            category: {
+                type: string;
+                description: string;
+            };
+            name?: undefined;
+            query?: undefined;
+        };
+        required?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            name: {
+                type: string;
+                description: string;
+            };
+            category?: undefined;
+            query?: undefined;
+        };
+        required: string[];
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            name: {
+                type: string;
+                description: string;
+            };
+            category?: undefined;
+            query?: undefined;
+        };
+        required?: undefined;
+    };
+} | {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            query: {
+                type: string;
+                description: string;
+            };
+            category?: undefined;
+            name?: undefined;
+        };
+        required: string[];
+    };
+})[];
+export declare const ListComponentsSchema: z.ZodObject<{
+    category: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    category?: string | undefined;
+}, {
+    category?: string | undefined;
+}>;
+export declare const GetComponentSchema: z.ZodObject<{
+    name: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    name: string;
+}, {
+    name: string;
+}>;
+export declare const GetPatternsSchema: z.ZodObject<{
+    name: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    name?: string | undefined;
+}, {
+    name?: string | undefined;
+}>;
+export declare const SearchComponentsSchema: z.ZodObject<{
+    query: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    query: string;
+}, {
+    query: string;
+}>;

package/dist/tools.js

@@ -0,0 +1,79 @@
+/**
+ * Cre8 MCP Tool Definitions
+ */
+import { z } from 'zod';
+export const tools = [
+    {
+        name: 'list_components',
+        description: 'Lists all available Cre8 React components from @tmorrow/cre8-react. ' +
+            'Returns components grouped by category (Actions, Forms, Layout, Navigation, etc.). ' +
+            'Optionally filter by category.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                category: {
+                    type: 'string',
+                    description: 'Filter by category: Actions, Forms, Layout, Typography, Navigation, Disclosure, Feedback, Data, Media, Marketing',
+                },
+            },
+        },
+    },
+    {
+        name: 'get_component',
+        description: 'Gets detailed information about a specific Cre8 component including props, ' +
+            'import statement, and usage examples. Works with or without the "Cre8" prefix.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Component name (e.g., "Cre8Button" or "Button")',
+                },
+            },
+            required: ['name'],
+        },
+    },
+    {
+        name: 'get_patterns',
+        description: 'Gets pre-built UI patterns and templates using Cre8 components. ' +
+            'Includes common patterns like Login Form, Data Table, Page Layout, etc. ' +
+            'Optionally get a specific pattern by name.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Pattern name to get details (optional)',
+                },
+            },
+        },
+    },
+    {
+        name: 'search_components',
+        description: 'Search Cre8 components by name, description, or category. ' +
+            'Useful for finding components that match a specific need.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                query: {
+                    type: 'string',
+                    description: 'Search query (e.g., "button", "form", "navigation")',
+                },
+            },
+            required: ['query'],
+        },
+    },
+];
+// Zod schemas for input validation
+export const ListComponentsSchema = z.object({
+    category: z.string().optional(),
+});
+export const GetComponentSchema = z.object({
+    name: z.string(),
+});
+export const GetPatternsSchema = z.object({
+    name: z.string().optional(),
+});
+export const SearchComponentsSchema = z.object({
+    query: z.string(),
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "cre8-mcp",
+  "version": "0.1.0",
+  "description": "Cre8 Design System MCP Server - Component intelligence for AI agents",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "cre8-mcp": "./dist/index.js",
+    "cre8-mcp-proxy": "./dist/proxy.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx watch src/index.ts",
+    "start": "node dist/index.js",
+    "start:api": "node dist/server.js",
+    "dev:api": "tsx watch src/server.ts"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.19.9",
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "hono": "^4.11.4",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.6.3"
+  },
+  "files": [
+    "dist",
+    "data"
+  ]
+}