@cooperco/component-library-mcp-server 0.1.0

package/dist/tools/get-component.js

@@ -0,0 +1,109 @@
+import fs from 'fs/promises';
+import path from 'path';
+export const handleGetComponent = async (registry, name, projectRoot) => {
+    const metadata = await registry.getComponent(name);
+    if (!metadata) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Component "${name}" not found. Use list-components to see all available components.`,
+                },
+            ],
+            isError: true,
+        };
+    }
+    let output = `# ${metadata.name}\n\n`;
+    output += `**Category:** ${metadata.category}\n`;
+    output += `**GraphQL typename:** ${metadata.typename}\n`;
+    output += `**Extends Component:** ${metadata.extendsComponent ? 'Yes' : 'No'}\n`;
+    output += `**Uses color palette:** ${metadata.hasColorPalette ? 'Yes' : 'No'}\n`;
+    output += `**Directory:** ${metadata.directory}/\n`;
+    if (metadata.variants.length > 0) {
+        output += `**Variants:** ${metadata.variants.join(', ')}\n`;
+    }
+    // Props table
+    output += '\n## Props\n\n';
+    if (metadata.props.length > 0) {
+        output += '| Prop | Type | Required | Default | Description |\n';
+        output += '|------|------|----------|---------|-------------|\n';
+        for (const prop of metadata.props) {
+            const typeStr = prop.type.length > 60 ? prop.type.substring(0, 57) + '...' : prop.type;
+            output += `| ${prop.name} | \`${typeStr}\` | ${prop.required ? 'Yes' : 'No'} | ${prop.defaultValue ?? '-'} | ${prop.description ?? '-'} |\n`;
+        }
+    }
+    else {
+        output += 'No props defined.\n';
+    }
+    // Emits
+    output += '\n## Events\n\n';
+    if (metadata.emits.length > 0) {
+        for (const emit of metadata.emits) {
+            output += `- \`${emit.name}\`${emit.payload ? ` (payload: ${emit.payload})` : ''}\n`;
+        }
+    }
+    else {
+        output += 'No custom events.\n';
+    }
+    // Slots
+    output += '\n## Slots\n\n';
+    if (metadata.slots.length > 0) {
+        for (const slot of metadata.slots) {
+            output += `- \`${slot.name}\`\n`;
+        }
+    }
+    else {
+        output += 'No named slots.\n';
+    }
+    // Passthrough
+    if (metadata.passthroughInterface) {
+        output += `\n## Passthrough Interface: ${metadata.passthroughInterface}\n\n`;
+    }
+    const pt = await registry.getPassthroughForComponent(metadata.name);
+    if (pt) {
+        if (pt.variants) {
+            for (const [variant, keys] of Object.entries(pt.variants)) {
+                output += `\n### Passthrough: ${variant} variant\n\n`;
+                if (keys.length > 0) {
+                    output += '| Key | Default Classes |\n';
+                    output += '|-----|-----------------|\n';
+                    for (const key of keys) {
+                        output += `| ${key.key} | \`${key.defaultClasses}\` |\n`;
+                    }
+                }
+            }
+        }
+        else if (pt.keys.length > 0) {
+            output += '\n### Passthrough Overrides\n\n';
+            output += '| Key | Default Classes |\n';
+            output += '|-----|-----------------|\n';
+            for (const key of pt.keys) {
+                output += `| ${key.key} | \`${key.defaultClasses}\` |\n`;
+            }
+        }
+    }
+    // Source files
+    output += '\n## Source Files\n\n';
+    output += `- **Vue SFC:** ${metadata.vueFile}\n`;
+    if (metadata.typeFile) {
+        output += `- **Types:** ${metadata.typeFile}\n`;
+    }
+    // Include raw Vue source for full context
+    try {
+        const vueSource = await fs.readFile(path.join(projectRoot, metadata.vueFile), 'utf-8');
+        output += `\n## Vue Source\n\n\`\`\`vue\n${vueSource}\`\`\`\n`;
+    }
+    catch {
+        // File read failed, skip raw source
+    }
+    if (metadata.typeFile) {
+        try {
+            const typeSource = await fs.readFile(path.join(projectRoot, metadata.typeFile), 'utf-8');
+            output += `\n## Type Definitions\n\n\`\`\`typescript\n${typeSource}\`\`\`\n`;
+        }
+        catch {
+            // File read failed, skip raw source
+        }
+    }
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/tools/get-passthrough-config.d.ts

@@ -0,0 +1,14 @@
+import { ComponentRegistry } from '../registry/component-registry.js';
+export declare const handleGetPassthroughConfig: (registry: ComponentRegistry, name: string) => Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    isError: boolean;
+} | {
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    isError?: undefined;
+}>;

package/dist/tools/get-passthrough-config.js

@@ -0,0 +1,77 @@
+export const handleGetPassthroughConfig = async (registry, name) => {
+    const metadata = await registry.getComponent(name);
+    if (!metadata) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Component "${name}" not found. Use list-components to see all available components.`,
+                },
+            ],
+            isError: true,
+        };
+    }
+    const pt = await registry.getPassthroughForComponent(metadata.name);
+    let output = `# ${metadata.name} Passthrough Configuration\n\n`;
+    if (metadata.passthroughInterface) {
+        output += `**Interface:** ${metadata.passthroughInterface}\n\n`;
+    }
+    if (!pt) {
+        output += 'No passthrough configuration found for this component.\n';
+    }
+    else if (pt.variants) {
+        for (const [variant, keys] of Object.entries(pt.variants)) {
+            output += `## ${variant} Variant\n\n`;
+            if (keys.length > 0) {
+                output += '| Key | Default Classes |\n';
+                output += '|-----|-----------------|\n';
+                for (const key of keys) {
+                    output += `| ${key.key} | \`${key.defaultClasses}\` |\n`;
+                }
+            }
+            else {
+                output += 'No overrides.\n';
+            }
+            output += '\n';
+        }
+    }
+    else if (pt.keys.length > 0) {
+        output += '## Overrides\n\n';
+        output += '| Key | Default Classes |\n';
+        output += '|-----|-----------------|\n';
+        for (const key of pt.keys) {
+            output += `| ${key.key} | \`${key.defaultClasses}\` |\n`;
+        }
+        output += '\n';
+    }
+    output += '## Usage\n\n';
+    output += '```typescript\n';
+    output +=
+        "import { combinePassthroughs } from '@/config/defaultPassthrough'\n";
+    output += `import { ${metadata.name}Pt } from '@/config/defaultPassthrough'\n\n`;
+    output += 'const pt = computed(() =>\n';
+    if (metadata.variants.length > 0) {
+        const propName = metadata.variantPropName ?? 'variant';
+        output += `  combinePassthroughs(${metadata.name}Pt[props.${propName}], props.pt ?? {})\n`;
+    }
+    else {
+        output += `  combinePassthroughs(${metadata.name}Pt, props.pt ?? {})\n`;
+    }
+    output += ')\n';
+    output += '```\n\n';
+    const defaultPt = await registry.getDefaultPassthrough();
+    output += '## Base DEFAULT_PASSTHROUGH\n\n';
+    output += 'All passthroughs extend from:\n';
+    if (defaultPt.length > 0) {
+        output += '| Key | Default |\n';
+        output += '|-----|---------|\n';
+        for (const entry of defaultPt) {
+            const displayValue = entry.defaultClasses || "''";
+            output += `| ${entry.key} | \`${displayValue}\` |\n`;
+        }
+    }
+    else {
+        output += 'Could not parse DEFAULT_PASSTHROUGH from source.\n';
+    }
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/tools/list-components.d.ts

@@ -0,0 +1,7 @@
+import { ComponentRegistry } from '../registry/component-registry.js';
+export declare const handleListComponents: (registry: ComponentRegistry) => Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;

package/dist/tools/list-components.js

@@ -0,0 +1,21 @@
+export const handleListComponents = async (registry) => {
+    const components = await registry.listComponents();
+    const modules = components.filter((c) => c.category === 'module');
+    const comps = components.filter((c) => c.category === 'component');
+    let output = `# Cooper Component Library (${components.length} components)\n\n`;
+    output += '## Modules\n\n';
+    output += '| Name | Variants | Description |\n';
+    output += '|------|----------|-------------|\n';
+    for (const m of modules) {
+        const variants = m.variants.length > 0 ? m.variants.join(', ') : '-';
+        output += `| ${m.name} | ${variants} | ${m.description} |\n`;
+    }
+    output += '\n## Components\n\n';
+    output += '| Name | Variants | Description |\n';
+    output += '|------|----------|-------------|\n';
+    for (const c of comps) {
+        const variants = c.variants.length > 0 ? c.variants.join(', ') : '-';
+        output += `| ${c.name} | ${variants} | ${c.description} |\n`;
+    }
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/tools/scaffold-component.d.ts

@@ -0,0 +1,29 @@
+import { ComponentRegistry } from '../registry/component-registry.js';
+interface ScaffoldArgs {
+    name: string;
+    category: 'component' | 'module';
+    props?: Array<{
+        name: string;
+        type: string;
+        required?: boolean;
+        default?: string;
+    }>;
+    hasColorPalette?: boolean;
+    hasPassthrough?: boolean;
+    variants?: string[];
+    variantPropName?: string;
+}
+export declare const handleScaffoldComponent: (registry: ComponentRegistry, args: ScaffoldArgs, projectRoot: string) => Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    isError: boolean;
+} | {
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    isError?: undefined;
+}>;
+export {};

package/dist/tools/scaffold-component.js

@@ -0,0 +1,128 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { generateTypeFile, generateVueFile, generateStoryFile, generateComponentExport, generateTypeExport, } from '../scaffolding/templates.js';
+export const handleScaffoldComponent = async (registry, args, projectRoot) => {
+    const { name, category, props, hasColorPalette, hasPassthrough, variants, variantPropName, } = args;
+    // Validate name is PascalCase
+    if (!/^[A-Z][a-zA-Z0-9]+$/.test(name)) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error: Component name "${name}" must be PascalCase (e.g., "BannerModule").`,
+                },
+            ],
+            isError: true,
+        };
+    }
+    // Validate prop names are valid TypeScript identifiers
+    const TS_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+    if (props) {
+        for (const prop of props) {
+            if (!TS_IDENTIFIER.test(prop.name)) {
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: `Error: Prop name "${prop.name}" is not a valid TypeScript identifier.`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }
+    }
+    // Validate variant values are safe string literals
+    if (variants) {
+        for (const variant of variants) {
+            if (!/^[a-zA-Z][a-zA-Z0-9 _-]*$/.test(variant)) {
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: `Error: Variant "${variant}" contains invalid characters. Use only letters, numbers, spaces, hyphens, and underscores.`,
+                        },
+                    ],
+                    isError: true,
+                };
+            }
+        }
+    }
+    // Validate variantPropName is a valid TypeScript identifier
+    if (variantPropName && !TS_IDENTIFIER.test(variantPropName)) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error: Variant prop name "${variantPropName}" is not a valid TypeScript identifier.`,
+                },
+            ],
+            isError: true,
+        };
+    }
+    // Check if component already exists
+    const exists = await registry.componentExists(name);
+    if (exists) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Error: Component "${name}" already exists.`,
+                },
+            ],
+            isError: true,
+        };
+    }
+    const options = {
+        name,
+        category,
+        props,
+        hasColorPalette: hasColorPalette ?? true,
+        hasPassthrough: hasPassthrough ?? true,
+        variants,
+        variantPropName,
+    };
+    const componentDir = path.join(projectRoot, 'src/components', name);
+    const storyDir = path.join(projectRoot, '.storybook', category === 'module' ? 'modules' : 'components');
+    // Generate file contents
+    const typeContent = generateTypeFile(options);
+    const vueContent = generateVueFile(options);
+    const storyContent = generateStoryFile(options);
+    const componentExport = generateComponentExport(name);
+    const typeExport = generateTypeExport(name);
+    // Create directories
+    await fs.mkdir(componentDir, { recursive: true });
+    await fs.mkdir(storyDir, { recursive: true });
+    // Write files
+    const filePaths = {
+        type: path.join(componentDir, `${name}.ts`),
+        vue: path.join(componentDir, `${name}.vue`),
+        story: path.join(storyDir, `${name}.stories.ts`),
+    };
+    await fs.writeFile(filePaths.type, typeContent, 'utf-8');
+    await fs.writeFile(filePaths.vue, vueContent, 'utf-8');
+    await fs.writeFile(filePaths.story, storyContent, 'utf-8');
+    // Update barrel exports
+    const componentsPath = path.join(projectRoot, 'src/components/components.ts');
+    const typesPath = path.join(projectRoot, 'src/components/types.ts');
+    const componentsSource = await fs.readFile(componentsPath, 'utf-8');
+    const typesSource = await fs.readFile(typesPath, 'utf-8');
+    await fs.writeFile(componentsPath, componentsSource.trimEnd() + '\n' + componentExport + '\n', 'utf-8');
+    await fs.writeFile(typesPath, typesSource.trimEnd() + '\n' + typeExport + '\n', 'utf-8');
+    // Build output summary
+    let output = `# Scaffolded: ${name}\n\n`;
+    output += '## Created Files\n\n';
+    output += `- \`src/components/${name}/${name}.ts\` — TypeScript interfaces\n`;
+    output += `- \`src/components/${name}/${name}.vue\` — Vue component\n`;
+    output += `- \`.storybook/${category === 'module' ? 'modules' : 'components'}/${name}.stories.ts\` — Storybook story\n\n`;
+    output += '## Updated Files\n\n';
+    output += '- `src/components/components.ts` — Added component export\n';
+    output += '- `src/components/types.ts` — Added type export\n\n';
+    output += '## Generated Type File\n\n';
+    output += '```typescript\n' + typeContent + '```\n\n';
+    output += '## Generated Vue File\n\n';
+    output += '```vue\n' + vueContent + '```\n\n';
+    output += '## Generated Story File\n\n';
+    output += '```typescript\n' + storyContent + '```\n';
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/tools/search-components.d.ts

@@ -0,0 +1,7 @@
+import { ComponentRegistry } from '../registry/component-registry.js';
+export declare const handleSearchComponents: (registry: ComponentRegistry, query: string, category?: 'component' | 'module' | 'all') => Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;

package/dist/tools/search-components.js

@@ -0,0 +1,21 @@
+export const handleSearchComponents = async (registry, query, category) => {
+    const results = await registry.searchComponents(query, category);
+    if (results.length === 0) {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `No components found matching "${query}"${category && category !== 'all' ? ` in category "${category}"` : ''}. Use list-components to see all available components.`,
+                },
+            ],
+        };
+    }
+    let output = `# Search Results for "${query}" (${results.length} match${results.length === 1 ? '' : 'es'})\n\n`;
+    output += '| Name | Category | Variants | Description |\n';
+    output += '|------|----------|----------|-------------|\n';
+    for (const c of results) {
+        const variants = c.variants.length > 0 ? c.variants.join(', ') : '-';
+        output += `| ${c.name} | ${c.category} | ${variants} | ${c.description} |\n`;
+    }
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+export interface PropInfo {
+    name: string;
+    type: string;
+    required: boolean;
+    description?: string;
+    defaultValue?: string;
+}
+export interface EmitInfo {
+    name: string;
+    payload?: string;
+}
+export interface SlotInfo {
+    name: string;
+}
+export interface PassthroughKeyInfo {
+    key: string;
+    defaultClasses: string;
+}
+export interface ComponentMetadata {
+    name: string;
+    category: 'component' | 'module';
+    typename: string;
+    directory: string;
+    vueFile: string;
+    typeFile: string | null;
+    interfaceName: string;
+    props: PropInfo[];
+    emits: EmitInfo[];
+    slots: SlotInfo[];
+    variants: string[];
+    variantPropName: string | null;
+    passthroughInterface: string | null;
+    passthroughKeys: PassthroughKeyInfo[];
+    extendsComponent: boolean;
+    hasColorPalette: boolean;
+    description: string;
+}
+export interface ComponentDiscovery {
+    exportName: string;
+    relativePath: string;
+    absoluteVuePath: string;
+    absoluteTypePath: string | null;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@cooperco/component-library-mcp-server",
+  "version": "0.1.0",
+  "description": "MCP server for the Cooper Component Library. Provides component documentation, prop inspection, color palette info, and scaffolding tools for AI assistants.",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "component-library-mcp-server": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "vue",
+    "component-library",
+    "cooper",
+    "ai-tools"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Cryobank/Cordblood-Component-Library.git",
+    "directory": "mcp"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.27.0",
+    "typescript": "~5.3.3",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "tsx": "^4.7.0"
+  },
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "tsc",
+    "watch": "tsc --watch"
+  }
+}