@movable/ui-mcp 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,667 @@
+#!/usr/bin/env node
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { z } from 'zod';
+import { readFileSync, existsSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+// ============================================================================
+// Mode Detection: Bundled (npx) vs Local Development
+// ============================================================================
+const UI_REPO_PATH = process.env.UI_REPO_PATH || join(__dirname, '..', '..');
+const DATA_DIR = join(__dirname, '..', 'data');
+const isNpxMode = existsSync(join(DATA_DIR, 'components.json'));
+const isLocalMode = existsSync(join(UI_REPO_PATH, 'src', 'components', 'index.ts'));
+// ============================================================================
+// Data Loading
+// ============================================================================
+function loadJsonData(filename) {
+    const filePath = join(DATA_DIR, filename);
+    if (existsSync(filePath)) {
+        return JSON.parse(readFileSync(filePath, 'utf-8'));
+    }
+    return null;
+}
+// Cached data (loaded on first use)
+let cachedComponents = null;
+let cachedTokens = null;
+let cachedTheme = null;
+let cachedStories = null;
+let cachedCategories = null;
+let cachedEslintRules = null;
+// ============================================================================
+// Component Functions
+// ============================================================================
+function getComponentsFromSource() {
+    const indexPath = join(UI_REPO_PATH, 'src', 'components', 'index.ts');
+    if (!existsSync(indexPath)) {
+        throw new Error(`Components index not found at ${indexPath}`);
+    }
+    const content = readFileSync(indexPath, 'utf-8');
+    const components = [];
+    const exportRegex = /export\s+(?:\{([^}]+)\}|\*)\s+from\s+['"]\.\/([^'"]+)['"]/g;
+    let match;
+    while ((match = exportRegex.exec(content)) !== null) {
+        const exports = match[1];
+        const path = match[2];
+        if (exports) {
+            const exportNames = exports
+                .split(',')
+                .map((e) => e.trim())
+                .filter((e) => !e.startsWith('type '))
+                .map((e) => e.replace(/\s+as\s+\w+/, '').trim())
+                .filter((e) => e.length > 0);
+            for (const exportName of exportNames) {
+                components.push({
+                    name: exportName,
+                    exportName,
+                    path: `src/components/${path}`,
+                });
+            }
+        }
+        else {
+            components.push({
+                name: path,
+                exportName: `* (barrel export)`,
+                path: `src/components/${path}`,
+            });
+        }
+    }
+    return components;
+}
+function getComponents() {
+    if (cachedComponents)
+        return cachedComponents;
+    if (isNpxMode) {
+        cachedComponents = loadJsonData('components.json') || [];
+    }
+    else if (isLocalMode) {
+        cachedComponents = getComponentsFromSource();
+    }
+    else {
+        throw new Error('MCP server requires either bundled data or access to UI repo source files. ' +
+            'Set UI_REPO_PATH environment variable if running in development mode.');
+    }
+    return cachedComponents;
+}
+function getCategories() {
+    if (cachedCategories)
+        return cachedCategories;
+    if (isNpxMode) {
+        cachedCategories =
+            loadJsonData('categories.json') || {};
+    }
+    else {
+        // Fallback categories for local mode
+        cachedCategories = {
+            inputs: [
+                'InkTextField',
+                'InkSelect',
+                'InkCheckboxGroup',
+                'InkRadioGroup',
+                'InkSwitch',
+                'InkRadioTiles',
+            ],
+            toggles: [
+                'InkToggleText',
+                'InkToggleTextGroup',
+                'InkToggleIcon',
+                'InkToggleIconGroup',
+            ],
+            feedback: ['InkSnackbar', 'InkHighlightAlert', 'InkEmptyState'],
+            layout: ['InkPaper', 'InkCard', 'InkDrawer', 'InkPersistentFilterDrawer'],
+            dialogs: ['InkDialog'],
+            headers: [
+                'InkPageHeader',
+                'InkWorkflowHeader',
+                'HeaderMetadata',
+                'HeaderSubtitle',
+                'LinkBreadcrumbs',
+                'PageHeaderActionButtons',
+            ],
+            'data-display': [
+                'InkDataGrid',
+                'InkDataGridEmpty',
+                'InkAttributeList',
+                'InkImage',
+                'InkChart',
+            ],
+            chips: ['InkChip', 'InkChipGroup'],
+        };
+    }
+    return cachedCategories;
+}
+// ============================================================================
+// Token Functions
+// ============================================================================
+const TOKEN_CATEGORIES = [
+    'blue',
+    'green',
+    'lightBlue',
+    'lightGreen',
+    'neutral',
+    'orange',
+    'purple',
+    'yellow',
+    'red',
+    'cyan',
+    'deepPurple',
+];
+function getTokens() {
+    if (cachedTokens)
+        return cachedTokens;
+    if (isNpxMode) {
+        cachedTokens = loadJsonData('tokens.json') || [];
+    }
+    else {
+        // In local mode, return empty - users should run extract-data first
+        console.error('Warning: Token data not available in local mode. Run npm run extract-data first.');
+        cachedTokens = [];
+    }
+    return cachedTokens;
+}
+// ============================================================================
+// Theme Functions
+// ============================================================================
+function getTheme() {
+    if (cachedTheme)
+        return cachedTheme;
+    if (isNpxMode) {
+        cachedTheme = loadJsonData('theme.json');
+    }
+    else if (isLocalMode) {
+        // Read from source in local mode
+        const themePath = join(UI_REPO_PATH, 'src', 'theme.ts');
+        let componentOverrides = [];
+        if (existsSync(themePath)) {
+            const themeSource = readFileSync(themePath, 'utf-8');
+            const componentMatches = themeSource.match(/Mui\w+:/g);
+            if (componentMatches) {
+                componentOverrides = [...new Set(componentMatches)].map((c) => c.replace(':', ''));
+            }
+        }
+        cachedTheme = {
+            semanticColors: {},
+            textColors: {},
+            typography: { fontFamily: ['Inter', 'sans-serif'] },
+            componentOverrides,
+        };
+    }
+    return cachedTheme;
+}
+// ============================================================================
+// Story Functions
+// ============================================================================
+function getStories() {
+    if (cachedStories)
+        return cachedStories;
+    if (isNpxMode) {
+        cachedStories = loadJsonData('stories.json') || [];
+    }
+    else {
+        // In local mode, return empty - parsing stories requires glob
+        cachedStories = [];
+    }
+    return cachedStories;
+}
+// ============================================================================
+// ESLint Rules Functions
+// ============================================================================
+function getEslintRules() {
+    if (cachedEslintRules)
+        return cachedEslintRules;
+    if (isNpxMode) {
+        cachedEslintRules =
+            loadJsonData('eslint-rules.json') || [];
+    }
+    else {
+        cachedEslintRules = [];
+    }
+    return cachedEslintRules;
+}
+// ============================================================================
+// MCP Server Setup
+// ============================================================================
+const server = new McpServer({
+    name: 'movable-ui',
+    version: '1.0.0',
+});
+// Register the list_components tool
+server.tool('list_components', 'List all available components from @movable/ui', {}, async () => {
+    try {
+        const components = getComponents();
+        const componentList = components
+            .map((c) => `- ${c.name} (from ${c.path})${c.category ? ` [${c.category}]` : ''}`)
+            .join('\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `# @movable/ui Components\n\nFound ${components.length} exported components:\n\n${componentList}`,
+                },
+            ],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error listing components: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the get_component tool
+server.tool('get_component', 'Get detailed information about a specific component', {
+    name: z.string().describe('The name of the component to look up'),
+}, async ({ name }) => {
+    try {
+        const components = getComponents();
+        const component = components.find((c) => c.name.toLowerCase() === name.toLowerCase());
+        if (!component) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `Component "${name}" not found. Use list_components to see available components.`,
+                    },
+                ],
+                isError: true,
+            };
+        }
+        let componentDetails = `# ${component.name}\n\n`;
+        componentDetails += `**Export name:** ${component.exportName}\n`;
+        componentDetails += `**Path:** ${component.path}\n`;
+        if (component.category) {
+            componentDetails += `**Category:** ${component.category}\n`;
+        }
+        componentDetails += '\n';
+        if (component.description) {
+            componentDetails += `## Description\n\n${component.description}\n\n`;
+        }
+        if (component.props) {
+            componentDetails += `## Props\n\n\`\`\`typescript\n${component.props}\n\`\`\`\n`;
+        }
+        // In local mode, try to read additional details from source
+        if (isLocalMode && !component.props) {
+            const possiblePaths = [
+                join(UI_REPO_PATH, component.path, 'index.ts'),
+                join(UI_REPO_PATH, component.path, 'index.tsx'),
+                join(UI_REPO_PATH, component.path + '.tsx'),
+                join(UI_REPO_PATH, component.path + '.ts'),
+            ];
+            for (const sourcePath of possiblePaths) {
+                if (existsSync(sourcePath)) {
+                    const source = readFileSync(sourcePath, 'utf-8');
+                    const jsdocMatch = source.match(/\/\*\*[\s\S]*?\*\/\s*(?=export)/);
+                    if (jsdocMatch && !component.description) {
+                        componentDetails += `## Description\n\n${jsdocMatch[0]}\n\n`;
+                    }
+                    const propsMatch = source.match(/(?:interface|type)\s+(\w+Props)\s*(?:=\s*)?{[\s\S]*?}/);
+                    if (propsMatch) {
+                        componentDetails += `## Props\n\n\`\`\`typescript\n${propsMatch[0]}\n\`\`\`\n`;
+                    }
+                    break;
+                }
+            }
+        }
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: componentDetails,
+                },
+            ],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error getting component: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the get_theme tool
+server.tool('get_theme', 'Get theme configuration including palette, typography, and component overrides', {}, async () => {
+    try {
+        const theme = getTheme();
+        if (!theme) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Theme data not available. In local mode, run npm run extract-data first.',
+                    },
+                ],
+                isError: true,
+            };
+        }
+        let themeInfo = '# @movable/ui Theme\n\n';
+        // Semantic colors
+        if (Object.keys(theme.semanticColors).length > 0) {
+            themeInfo += '## Semantic Colors\n\n';
+            for (const [colorName, values] of Object.entries(theme.semanticColors)) {
+                themeInfo += `### ${colorName}\n`;
+                themeInfo += '| Variant | Value |\n|---------|-------|\n';
+                for (const [variant, value] of Object.entries(values)) {
+                    themeInfo += `| ${variant} | \`${value}\` |\n`;
+                }
+                themeInfo += '\n';
+            }
+        }
+        // Text colors
+        if (Object.keys(theme.textColors).length > 0) {
+            themeInfo += '## Text Colors\n\n';
+            themeInfo += '| Type | Value |\n|------|-------|\n';
+            for (const [type, value] of Object.entries(theme.textColors)) {
+                themeInfo += `| ${type} | \`${value}\` |\n`;
+            }
+            themeInfo += '\n';
+        }
+        // Typography
+        themeInfo += '## Typography\n\n';
+        themeInfo += `- Font family: \`${theme.typography.fontFamily.join(', ')}\`\n\n`;
+        // Component overrides
+        if (theme.componentOverrides.length > 0) {
+            themeInfo += '## Component Overrides\n\n';
+            themeInfo += theme.componentOverrides.map((c) => `- ${c}`).join('\n');
+        }
+        return {
+            content: [{ type: 'text', text: themeInfo }],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error getting theme: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the get_design_tokens tool
+server.tool('get_design_tokens', 'Get design tokens by category (colors, spacing). Categories: blue, green, lightBlue, lightGreen, neutral, orange, purple, yellow, red, cyan, deepPurple', {
+    category: z
+        .string()
+        .optional()
+        .describe('Token category to retrieve (e.g., "blue", "neutral"). If omitted, lists all categories.'),
+}, async ({ category }) => {
+    try {
+        const tokens = getTokens();
+        if (tokens.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Token data not available. Run npm run extract-data to generate token data.',
+                    },
+                ],
+                isError: true,
+            };
+        }
+        // If no category specified, list available categories
+        if (!category) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `# Available Design Token Categories\n\n${TOKEN_CATEGORIES.map((c) => `- ${c}`).join('\n')}\n\nUse \`get_design_tokens\` with a category parameter to get specific tokens.`,
+                    },
+                ],
+            };
+        }
+        const normalizedCategory = category.toLowerCase();
+        const matchingCategory = tokens.find((t) => t.name.toLowerCase() === normalizedCategory);
+        if (!matchingCategory) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `Category "${category}" not found. Available categories: ${TOKEN_CATEGORIES.join(', ')}`,
+                    },
+                ],
+                isError: true,
+            };
+        }
+        let result = `# ${matchingCategory.name} Design Tokens\n\n`;
+        result += '| Token | Value |\n|-------|-------|\n';
+        for (const token of matchingCategory.tokens) {
+            result += `| ${token.name} | \`${token.value}\` |\n`;
+        }
+        return {
+            content: [{ type: 'text', text: result }],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error getting design tokens: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the get_component_example tool
+server.tool('get_component_example', 'Get code examples from Storybook stories for a component', {
+    name: z.string().describe('The name of the component to get examples for'),
+    story: z
+        .string()
+        .optional()
+        .describe('Specific story name (e.g., "Default", "Error"). If omitted, lists available stories.'),
+}, async ({ name, story }) => {
+    try {
+        const stories = getStories();
+        if (stories.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Story data not available. Run npm run extract-data to generate story metadata.',
+                    },
+                ],
+                isError: true,
+            };
+        }
+        // Find stories matching the component name
+        const matchingStories = stories.filter((s) => s.component.toLowerCase().includes(name.toLowerCase()) ||
+            s.title.toLowerCase().includes(name.toLowerCase()));
+        if (matchingStories.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `No Storybook stories found for "${name}". Try using the exact component name.`,
+                    },
+                ],
+                isError: true,
+            };
+        }
+        let result = `# Storybook Examples for ${name}\n\n`;
+        for (const storyFile of matchingStories) {
+            result += `## ${storyFile.title}\n`;
+            result += `**File:** \`${storyFile.file}\`\n`;
+            if (storyFile.figmaUrl) {
+                result += `**Figma:** [Design](${storyFile.figmaUrl})\n`;
+            }
+            result += '\n';
+            if (!story) {
+                result += `**Available stories:** ${storyFile.stories.join(', ')}\n\n`;
+                result += `Use \`get_component_example\` with a story parameter to get specific code.\n\n`;
+            }
+            else {
+                const matchingStory = storyFile.stories.find((s) => s.toLowerCase() === story.toLowerCase());
+                if (matchingStory) {
+                    result += `### ${matchingStory}\n\n`;
+                    result += `Story found in \`${storyFile.file}\`. `;
+                    result += `View the source file for the full implementation.\n\n`;
+                }
+                else {
+                    result += `Story "${story}" not found. Available: ${storyFile.stories.join(', ')}\n\n`;
+                }
+            }
+        }
+        return {
+            content: [{ type: 'text', text: result }],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error getting examples: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the search_components tool
+server.tool('search_components', 'Search components by keyword or category. Categories: inputs, toggles, feedback, layout, dialogs, headers, data-display, chips', {
+    query: z
+        .string()
+        .optional()
+        .describe('Search keyword to match against component names'),
+    category: z
+        .string()
+        .optional()
+        .describe('Filter by category (e.g., "inputs", "feedback")'),
+}, async ({ query, category }) => {
+    try {
+        const components = getComponents();
+        const categories = getCategories();
+        let filtered = components;
+        // Filter by category if provided
+        if (category) {
+            const normalizedCategory = category.toLowerCase();
+            const categoryComponents = categories[normalizedCategory];
+            if (!categoryComponents) {
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: `Category "${category}" not found. Available categories: ${Object.keys(categories).join(', ')}`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+            filtered = components.filter((c) => categoryComponents.some((cc) => cc.toLowerCase() === c.name.toLowerCase()));
+        }
+        // Filter by query if provided
+        if (query) {
+            const normalizedQuery = query.toLowerCase();
+            filtered = filtered.filter((c) => c.name.toLowerCase().includes(normalizedQuery) ||
+                c.path.toLowerCase().includes(normalizedQuery));
+        }
+        if (filtered.length === 0) {
+            let message = 'No components found';
+            if (query)
+                message += ` matching "${query}"`;
+            if (category)
+                message += ` in category "${category}"`;
+            return {
+                content: [{ type: 'text', text: message }],
+            };
+        }
+        let result = '# Search Results\n\n';
+        if (query)
+            result += `**Query:** ${query}\n`;
+        if (category)
+            result += `**Category:** ${category}\n`;
+        result += `**Found:** ${filtered.length} components\n\n`;
+        result += filtered.map((c) => `- ${c.name} (${c.path})`).join('\n');
+        if (!category && !query) {
+            result += '\n\n## Available Categories\n\n';
+            for (const [cat, comps] of Object.entries(categories)) {
+                result += `- **${cat}**: ${comps.join(', ')}\n`;
+            }
+        }
+        return {
+            content: [{ type: 'text', text: result }],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error searching components: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// Register the get_eslint_rules tool
+server.tool('get_eslint_rules', 'Get available ESLint rules from @movable/ui/eslint-plugin', {}, async () => {
+    try {
+        const rules = getEslintRules();
+        let result = '# @movable/ui ESLint Rules\n\n';
+        result += '## Installation\n\n';
+        result +=
+            '```js\n// eslint.config.js\nimport movableUiPlugin from "@movable/eslint-plugin-ui";\n\nexport default [\n  movableUiPlugin.configs.recommended,\n];\n```\n\n';
+        result += '## Available Rules\n\n';
+        if (rules.length === 0) {
+            result += 'No custom rules found or rule data not available.\n';
+        }
+        else {
+            for (const rule of rules) {
+                result += `### ${rule.name}\n\n`;
+                if (rule.description) {
+                    result += `**Description:** ${rule.description}\n\n`;
+                }
+                if (rule.message) {
+                    result += `**Message:** ${rule.message}\n\n`;
+                }
+            }
+        }
+        return {
+            content: [{ type: 'text', text: result }],
+        };
+    }
+    catch (error) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error getting ESLint rules: ${error instanceof Error ? error.message : String(error)}`,
+                },
+            ],
+            isError: true,
+        };
+    }
+});
+// ============================================================================
+// Start Server
+// ============================================================================
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    const mode = isNpxMode
+        ? 'npx (bundled data)'
+        : isLocalMode
+            ? 'local development'
+            : 'unknown';
+    console.error(`Movable UI MCP server running on stdio [${mode}]`);
+}
+main().catch((error) => {
+    console.error('Failed to start server:', error);
+    process.exit(1);
+});