@cooperco/component-library-mcp-server 0.1.0

package/dist/registry/component-registry.js

@@ -0,0 +1,256 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { parseTypeScriptFile, findMainInterface, findPassthroughInterface, extractVariantsFromProp, } from '../parsers/typescript-parser.js';
+import { parseVueSfc } from '../parsers/vue-sfc-parser.js';
+import { parsePassthroughFile, parseDefaultPassthrough, findPassthroughForComponent, } from '../parsers/passthrough-parser.js';
+import { getComponentDescription } from './component-descriptions.js';
+// Fallback set for components that don't follow the *Module naming convention
+// but should still be categorized as modules
+const MODULE_COMPONENTS_OVERRIDE = new Set([
+    'ContentModule', // Doesn't end with "Module" in a unique way but is a module
+]);
+const FALLBACK_VARIANT_PROP_NAMES = ['variant', 'type', 'buttonType'];
+/**
+ * Detects the variant prop by cross-referencing passthrough variant keys
+ * with props that have string literal union types.
+ * Falls back to checking known variant prop names.
+ */
+const detectVariantProp = (props, pt) => {
+    // Collect all props with string literal union values
+    const propsWithLiterals = props
+        .map((p) => ({ prop: p, values: extractVariantsFromProp(p) }))
+        .filter((entry) => entry.values.length > 0);
+    // If passthrough has variant keys, try to match them against prop values
+    if (pt?.variants) {
+        const ptVariantKeys = Object.keys(pt.variants);
+        const ptKeySet = new Set(ptVariantKeys.map((k) => k.toLowerCase()));
+        for (const { prop, values } of propsWithLiterals) {
+            const propValueSet = new Set(values.map((v) => v.toLowerCase()));
+            const overlap = [...ptKeySet].filter((k) => propValueSet.has(k));
+            // Every passthrough variant key must match a prop value
+            if (overlap.length > 0 && overlap.length >= ptKeySet.size) {
+                return {
+                    detectedVariants: values,
+                    detectedVariantPropName: prop.name,
+                };
+            }
+        }
+    }
+    // Fallback: check known variant prop names
+    for (const name of FALLBACK_VARIANT_PROP_NAMES) {
+        const prop = props.find((p) => p.name === name);
+        if (prop) {
+            const values = extractVariantsFromProp(prop);
+            if (values.length > 0) {
+                return {
+                    detectedVariants: values,
+                    detectedVariantPropName: prop.name,
+                };
+            }
+        }
+    }
+    return { detectedVariants: [], detectedVariantPropName: null };
+};
+export class ComponentRegistry {
+    cache = new Map();
+    discoveryCache = null;
+    discoveryMtime = 0;
+    passthroughCache = null;
+    passthroughMtime = 0;
+    projectRoot;
+    constructor(projectRoot) {
+        this.projectRoot = projectRoot;
+    }
+    async discoverComponents() {
+        const barrelPath = path.join(this.projectRoot, 'src/components/components.ts');
+        // Invalidate discovery cache if barrel file has changed
+        const barrelStat = await fs.stat(barrelPath);
+        if (this.discoveryCache && barrelStat.mtimeMs === this.discoveryMtime) {
+            return this.discoveryCache;
+        }
+        this.discoveryMtime = barrelStat.mtimeMs;
+        const source = await fs.readFile(barrelPath, 'utf-8');
+        const components = [];
+        const exportRegex = /export\s*\{\s*default\s+as\s+(\w+)\s*\}\s*from\s*'\.\/([^']+)'/g;
+        for (const match of source.matchAll(exportRegex)) {
+            const exportName = match[1];
+            const relativePath = match[2];
+            // Resolve the .vue file path
+            const absoluteVuePath = path.join(this.projectRoot, 'src/components', relativePath);
+            // Try to find the corresponding .ts type file
+            const vueParsed = path.parse(absoluteVuePath);
+            const tsPath = path.join(vueParsed.dir, `${vueParsed.name}.ts`);
+            let absoluteTypePath = null;
+            try {
+                await fs.access(tsPath);
+                absoluteTypePath = tsPath;
+            }
+            catch {
+                // No type file exists for this component
+            }
+            components.push({
+                exportName,
+                relativePath,
+                absoluteVuePath,
+                absoluteTypePath,
+            });
+        }
+        this.discoveryCache = components;
+        return components;
+    }
+    async getComponent(name) {
+        const components = await this.discoverComponents();
+        const discovery = components.find((c) => c.exportName.toLowerCase() === name.toLowerCase());
+        if (!discovery)
+            return null;
+        // Check cache validity
+        const cached = this.cache.get(discovery.exportName);
+        if (cached) {
+            const vueStat = await fs.stat(discovery.absoluteVuePath);
+            const typeStat = discovery.absoluteTypePath
+                ? await fs.stat(discovery.absoluteTypePath)
+                : null;
+            if (vueStat.mtimeMs === cached.vueMtime &&
+                (typeStat?.mtimeMs ?? 0) === cached.typeMtime) {
+                return cached.metadata;
+            }
+        }
+        return this.parseComponent(discovery);
+    }
+    async listComponents() {
+        const discoveries = await this.discoverComponents();
+        const results = [];
+        for (const discovery of discoveries) {
+            const metadata = await this.getComponent(discovery.exportName);
+            if (metadata)
+                results.push(metadata);
+        }
+        return results;
+    }
+    async searchComponents(query, category) {
+        const all = await this.listComponents();
+        const lowerQuery = query.toLowerCase();
+        return all.filter((c) => {
+            if (category && category !== 'all' && c.category !== category)
+                return false;
+            return (c.name.toLowerCase().includes(lowerQuery) ||
+                c.typename.toLowerCase().includes(lowerQuery) ||
+                c.description.toLowerCase().includes(lowerQuery) ||
+                c.props.some((p) => p.name.toLowerCase().includes(lowerQuery)));
+        });
+    }
+    async getPassthroughForComponent(componentName) {
+        const passthroughs = await this.loadPassthroughs();
+        const pt = findPassthroughForComponent(passthroughs, componentName);
+        if (!pt)
+            return null;
+        return { variants: pt.variants, keys: pt.keys };
+    }
+    async getColorPalettes() {
+        const palettePath = path.join(this.projectRoot, 'src/config/colorPalettes.ts');
+        return fs.readFile(palettePath, 'utf-8');
+    }
+    async getDefaultPassthrough() {
+        const ptPath = path.join(this.projectRoot, 'src/config/defaultPassthrough/index.ts');
+        const source = await fs.readFile(ptPath, 'utf-8');
+        return parseDefaultPassthrough(source);
+    }
+    async componentExists(name) {
+        const components = await this.discoverComponents();
+        return components.some((c) => c.exportName.toLowerCase() === name.toLowerCase());
+    }
+    async loadPassthroughs() {
+        const ptPath = path.join(this.projectRoot, 'src/config/defaultPassthrough/index.ts');
+        // Invalidate passthrough cache if file has changed
+        const ptStat = await fs.stat(ptPath);
+        if (this.passthroughCache && ptStat.mtimeMs === this.passthroughMtime) {
+            return this.passthroughCache;
+        }
+        this.passthroughMtime = ptStat.mtimeMs;
+        const source = await fs.readFile(ptPath, 'utf-8');
+        this.passthroughCache = parsePassthroughFile(source);
+        return this.passthroughCache;
+    }
+    async parseComponent(discovery) {
+        const vueSource = await fs.readFile(discovery.absoluteVuePath, 'utf-8');
+        const vueStat = await fs.stat(discovery.absoluteVuePath);
+        let typeSource = null;
+        let typeStat = null;
+        if (discovery.absoluteTypePath) {
+            typeSource = await fs.readFile(discovery.absoluteTypePath, 'utf-8');
+            typeStat = await fs.stat(discovery.absoluteTypePath);
+        }
+        // Parse Vue SFC
+        const sfcData = parseVueSfc(vueSource);
+        // Parse TypeScript interfaces
+        let props = [];
+        let extendsComponent = false;
+        let typename = discovery.exportName;
+        let passthroughInterfaceName = null;
+        let variants = [];
+        let variantPropName = null;
+        if (typeSource && discovery.absoluteTypePath) {
+            const interfaces = parseTypeScriptFile(typeSource, path.basename(discovery.absoluteTypePath));
+            const mainInterface = findMainInterface(interfaces, discovery.exportName);
+            if (mainInterface) {
+                props = mainInterface.props;
+                extendsComponent = mainInterface.extendsTypes.includes('Component');
+                typename = mainInterface.name;
+                // Extract __typename value
+                const typenameProp = mainInterface.props.find((p) => p.name === '__typename');
+                if (typenameProp) {
+                    const tnMatch = typenameProp.type.match(/'([^']+)'/);
+                    if (tnMatch)
+                        typename = tnMatch[1];
+                }
+            }
+            const ptInterface = findPassthroughInterface(interfaces);
+            if (ptInterface) {
+                passthroughInterfaceName = ptInterface.name;
+            }
+        }
+        // Merge defaults from Vue SFC
+        for (const prop of props) {
+            if (sfcData.defaults[prop.name] !== undefined) {
+                prop.defaultValue = sfcData.defaults[prop.name];
+            }
+        }
+        // Get passthrough keys
+        const passthroughs = await this.loadPassthroughs();
+        const pt = findPassthroughForComponent(passthroughs, discovery.exportName);
+        // Detect variant prop by cross-referencing passthrough variant keys with prop values
+        const detected = detectVariantProp(props, pt);
+        variants = detected.detectedVariants;
+        variantPropName = detected.detectedVariantPropName;
+        const directory = path.relative(this.projectRoot, path.dirname(discovery.absoluteVuePath));
+        const isModule = discovery.exportName.endsWith('Module') ||
+            MODULE_COMPONENTS_OVERRIDE.has(discovery.exportName);
+        const metadata = {
+            name: discovery.exportName,
+            category: isModule ? 'module' : 'component',
+            typename,
+            directory,
+            vueFile: path.relative(this.projectRoot, discovery.absoluteVuePath),
+            typeFile: discovery.absoluteTypePath
+                ? path.relative(this.projectRoot, discovery.absoluteTypePath)
+                : null,
+            interfaceName: typename,
+            props,
+            emits: sfcData.emits,
+            slots: sfcData.slots,
+            variants,
+            variantPropName,
+            passthroughInterface: passthroughInterfaceName,
+            passthroughKeys: pt?.keys ?? [],
+            extendsComponent,
+            hasColorPalette: sfcData.usesColorPalette,
+            description: getComponentDescription(discovery.exportName),
+        };
+        this.cache.set(discovery.exportName, {
+            metadata,
+            vueMtime: vueStat.mtimeMs,
+            typeMtime: typeStat?.mtimeMs ?? 0,
+        });
+        return metadata;
+    }
+}

package/dist/scaffolding/templates.d.ts

@@ -0,0 +1,21 @@
+interface ScaffoldProp {
+    name: string;
+    type: string;
+    required?: boolean;
+    default?: string;
+}
+interface ScaffoldOptions {
+    name: string;
+    category: 'component' | 'module';
+    props?: ScaffoldProp[];
+    hasColorPalette?: boolean;
+    hasPassthrough?: boolean;
+    variants?: string[];
+    variantPropName?: string;
+}
+export declare const generateTypeFile: (options: ScaffoldOptions) => string;
+export declare const generateVueFile: (options: ScaffoldOptions) => string;
+export declare const generateStoryFile: (options: ScaffoldOptions) => string;
+export declare const generateComponentExport: (name: string) => string;
+export declare const generateTypeExport: (name: string) => string;
+export {};

package/dist/scaffolding/templates.js

@@ -0,0 +1,122 @@
+export const generateTypeFile = (options) => {
+    const { name, props = [], hasPassthrough = true, variants } = options;
+    const lines = [];
+    lines.push("import { Component } from '../../types'");
+    if (hasPassthrough) {
+        lines.push("import { ComponentPassthrough } from '../../types'");
+    }
+    lines.push('');
+    if (hasPassthrough) {
+        lines.push(`export interface ${name}Passthrough extends ComponentPassthrough {`);
+        lines.push('\troot?: string');
+        lines.push('}');
+        lines.push('');
+    }
+    lines.push(`export interface ${name} extends Component {`);
+    lines.push(`\t__typename?: '${name}'`);
+    for (const prop of props) {
+        const optional = prop.required ? '' : '?';
+        lines.push(`\t${prop.name}${optional}: ${prop.type}`);
+    }
+    if (variants && variants.length > 0) {
+        const propName = options.variantPropName ?? 'variant';
+        const variantType = variants.map((v) => `'${v}'`).join(' | ');
+        lines.push(`\t${propName}?: ${variantType}`);
+    }
+    lines.push('\tbackgroundColor?: string');
+    lines.push('\ttextColor?: string');
+    if (hasPassthrough) {
+        lines.push(`\tpt?: ${name}Passthrough`);
+    }
+    lines.push('\tisChild?: boolean');
+    lines.push('}');
+    lines.push('');
+    return lines.join('\n');
+};
+export const generateVueFile = (options) => {
+    const { name, props = [], hasColorPalette = true, hasPassthrough = true, variants, } = options;
+    const lines = [];
+    lines.push('<script setup lang="ts">');
+    // Imports
+    const imports = [];
+    imports.push(`import { ${name} } from './${name}'`);
+    imports.push("import { computed } from 'vue'");
+    imports.push("import { twMerge } from 'tailwind-merge'");
+    if (hasColorPalette) {
+        imports.push("import { withColorPalette } from '../../config/colorPalettes'");
+    }
+    if (hasPassthrough) {
+        imports.push("import { combinePassthroughs } from '../../config/defaultPassthrough'");
+    }
+    lines.push(imports.join('\n'));
+    lines.push('');
+    // Props with defaults
+    const defaults = ['\tisChild: false,'];
+    if (variants && variants.length > 0) {
+        const propName = options.variantPropName ?? 'variant';
+        defaults.push(`\t${propName}: '${variants[0]}',`);
+    }
+    for (const prop of props) {
+        if (prop.default !== undefined) {
+            defaults.push(`\t${prop.name}: ${prop.default},`);
+        }
+    }
+    lines.push(`const props = withDefaults(defineProps<${name}>(), {`);
+    lines.push(defaults.join('\n'));
+    lines.push('})');
+    lines.push('');
+    if (hasColorPalette) {
+        lines.push('const { backgroundColor, palette } = withColorPalette(props)');
+        lines.push('');
+    }
+    lines.push('const computedClass = computed(() => {');
+    lines.push('\treturn twMerge(');
+    if (hasColorPalette) {
+        lines.push('\t\t`bg-${backgroundColor}`,');
+    }
+    lines.push("\t\tprops.class ?? ''");
+    lines.push('\t)');
+    lines.push('})');
+    lines.push('</script>');
+    lines.push('');
+    lines.push('<template>');
+    lines.push('\t<component :is="isChild ? \'div\' : \'section\'" :class="computedClass">');
+    lines.push(`\t\t<!-- ${name} content -->`);
+    lines.push('\t</component>');
+    lines.push('</template>');
+    lines.push('');
+    return lines.join('\n');
+};
+export const generateStoryFile = (options) => {
+    const { name, category } = options;
+    const storyCategory = category === 'module' ? 'Modules' : 'Components';
+    const importPath = `../../src/components/${name}/${name}.vue`;
+    const lines = [];
+    lines.push("import { Meta, StoryObj } from '@storybook/vue3'");
+    lines.push(`import ${name} from '${importPath}'`);
+    lines.push("import { DEFAULT_ARG_TYPES } from '..'");
+    lines.push('');
+    lines.push(`const meta: Meta<typeof ${name}> = {`);
+    lines.push(`\tcomponent: ${name},`);
+    lines.push('\targTypes: DEFAULT_ARG_TYPES,');
+    lines.push(`\ttitle: '${storyCategory}/${name}',`);
+    lines.push('}');
+    lines.push('');
+    lines.push(`type Story = StoryObj<typeof ${name}>`);
+    lines.push('');
+    lines.push('export default meta');
+    lines.push('');
+    lines.push('export const Default: Story = {');
+    lines.push('\targs: {');
+    lines.push("\t\tbackgroundColor: 'lily',");
+    lines.push('\t},');
+    lines.push('}');
+    lines.push('');
+    return lines.join('\n');
+};
+export const generateComponentExport = (name) => {
+    return `export { default as ${name} } from './${name}/${name}.vue'`;
+};
+export const generateTypeExport = (name) => {
+    return `export type { ${name} as ${name}Type } from './${name}/${name}'`;
+};

package/dist/server.d.ts

@@ -0,0 +1,3 @@
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { ComponentRegistry } from './registry/component-registry.js';
+export declare const registerAllTools: (server: McpServer, registry: ComponentRegistry, projectRoot: string) => void;

package/dist/server.js

@@ -0,0 +1,61 @@
+import { z } from 'zod';
+import { handleListComponents } from './tools/list-components.js';
+import { handleGetComponent } from './tools/get-component.js';
+import { handleGetComponentProps } from './tools/get-component-props.js';
+import { handleGetColorPalettes } from './tools/get-color-palettes.js';
+import { handleGetPassthroughConfig } from './tools/get-passthrough-config.js';
+import { handleSearchComponents } from './tools/search-components.js';
+import { handleScaffoldComponent } from './tools/scaffold-component.js';
+export const registerAllTools = (server, registry, projectRoot) => {
+    server.tool('list-components', 'List all available components in the Cooper Component Library with descriptions and variants', {}, async () => handleListComponents(registry));
+    server.tool('get-component', 'Get full documentation for a specific component including props, types, events, slots, passthrough config, and source code', {
+        name: z
+            .string()
+            .describe('Component name in PascalCase, e.g., "ContainerModule" or "CTA"'),
+    }, async ({ name }) => handleGetComponent(registry, name, projectRoot));
+    server.tool('get-component-props', 'Get detailed prop information for a component including types, defaults, and required status', { name: z.string().describe('Component name in PascalCase') }, async ({ name }) => handleGetComponentProps(registry, name));
+    server.tool('get-color-palettes', 'Get all available color palettes, their structure, usage patterns, and full source code', {}, async () => handleGetColorPalettes(registry));
+    server.tool('get-passthrough-config', 'Get the passthrough (style customization) configuration for a specific component, including default Tailwind classes', { name: z.string().describe('Component name in PascalCase') }, async ({ name }) => handleGetPassthroughConfig(registry, name));
+    server.tool('search-components', 'Search components by name, category, or prop names', {
+        query: z
+            .string()
+            .describe('Search term to match against component names, descriptions, and prop names'),
+        category: z
+            .enum(['component', 'module', 'all'])
+            .optional()
+            .describe('Filter by component category'),
+    }, async ({ query, category }) => handleSearchComponents(registry, query, category));
+    server.tool('scaffold-component', 'Generate a new component following library conventions. Creates .vue, .ts, and .stories.ts files, and updates barrel exports.', {
+        name: z
+            .string()
+            .describe('PascalCase component name, e.g., "BannerModule"'),
+        category: z
+            .enum(['component', 'module'])
+            .describe('Whether this is a basic component or a module'),
+        props: z
+            .array(z.object({
+            name: z.string(),
+            type: z.string(),
+            required: z.boolean().optional(),
+            default: z.string().optional(),
+        }))
+            .optional()
+            .describe('Initial props to include'),
+        hasColorPalette: z
+            .boolean()
+            .optional()
+            .describe('Include color palette integration (default: true)'),
+        hasPassthrough: z
+            .boolean()
+            .optional()
+            .describe('Include passthrough system (default: true)'),
+        variants: z
+            .array(z.string())
+            .optional()
+            .describe('Variant names, e.g., ["Default", "Hero"]'),
+        variantPropName: z
+            .string()
+            .optional()
+            .describe('Prop name for variants, e.g., "type" or "buttonType". Defaults to "variant".'),
+    }, async (args) => handleScaffoldComponent(registry, args, projectRoot));
+};

package/dist/tools/get-color-palettes.d.ts

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

package/dist/tools/get-color-palettes.js

@@ -0,0 +1,68 @@
+export const handleGetColorPalettes = async (registry) => {
+    let source;
+    try {
+        source = await registry.getColorPalettes();
+    }
+    catch {
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: 'Error: Could not read color palettes file. Ensure src/config/colorPalettes.ts exists.',
+                },
+            ],
+            isError: true,
+        };
+    }
+    // Extract palette names from the source
+    const paletteNames = [];
+    const paletteRegex = /(\w+)\s*:\s*\{[\s\S]*?headline\s*:/g;
+    for (const match of source.matchAll(paletteRegex)) {
+        if (match[1] !== 'cta' &&
+            match[1] !== 'tile' &&
+            match[1] !== 'label' &&
+            match[1] !== 'uiElement' &&
+            match[1] !== 'interactive') {
+            paletteNames.push(match[1]);
+        }
+    }
+    let output = '# Color Palette System\n\n';
+    output += '## Available Palettes\n\n';
+    output +=
+        paletteNames.length > 0
+            ? paletteNames.map((n) => `\`${n}\``).join(', ')
+            : 'See source file for palette names';
+    output += '\n\n';
+    output += '## Usage\n\n';
+    output += '```typescript\n';
+    output += "import { withColorPalette } from '@/config/colorPalettes'\n\n";
+    output += 'const { backgroundColor, palette } = withColorPalette(props)\n\n';
+    output += '// In template:\n';
+    output += '// <h2 :class="`text-${palette.headline}`">Title</h2>\n';
+    output += '// <p :class="`text-${palette.copy}`">Text</p>\n';
+    output += '```\n\n';
+    output += '## Override\n\n';
+    output += '```typescript\n';
+    output += "import { overridePalette } from '@/config/colorPalettes'\n";
+    output += "overridePalette(customPalettes, 'defaultColorName')\n";
+    output += '```\n\n';
+    output += '## Palette Structure\n\n';
+    output += 'Each palette provides these color roles:\n';
+    output += '- `headline` - Text color for headings\n';
+    output += '- `subheadline` - Text color for subheadings\n';
+    output += '- `copy` - Body text color\n';
+    output += '- `copyAccent` - Highlighted text color\n';
+    output += '- `bullet` - List bullet color\n';
+    output += '- `cta.fill` - Filled button colors (bg, copy)\n';
+    output += '- `cta.outline` - Outlined button colors (copy, border)\n';
+    output += '- `cta.link` - Link button color (copy)\n';
+    output += '- `cta.logo` - Logo button color (copy)\n';
+    output += '- `uiElement` - UI element colors (bg, copy, border)\n';
+    output += '- `tile` - Tile-specific colors\n';
+    output += '- `label` - Label background and text colors\n\n';
+    output += '## Full Source\n\n';
+    output += '```typescript\n';
+    output += source;
+    output += '\n```\n';
+    return { content: [{ type: 'text', text: output }] };
+};

package/dist/tools/get-component-props.d.ts

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

package/dist/tools/get-component-props.js

@@ -0,0 +1,32 @@
+export const handleGetComponentProps = 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,
+        };
+    }
+    let output = `# ${metadata.name} Props\n\n`;
+    output += `**Interface:** ${metadata.interfaceName}\n`;
+    output += `**Extends Component:** ${metadata.extendsComponent ? 'Yes (inherits class?: string)' : 'No'}\n\n`;
+    if (metadata.props.length > 0) {
+        output += '| Prop | Type | Required | Default | Description |\n';
+        output += '|------|------|----------|---------|-------------|\n';
+        for (const prop of metadata.props) {
+            output += `| ${prop.name} | \`${prop.type}\` | ${prop.required ? 'Yes' : 'No'} | ${prop.defaultValue ?? '-'} | ${prop.description ?? '-'} |\n`;
+        }
+    }
+    else {
+        output += 'No props defined in type file.\n';
+    }
+    if (metadata.variants.length > 0) {
+        output += `\n## Variants\n\n`;
+        output += `Available variants: ${metadata.variants.map((v) => `\`${v}\``).join(', ')}\n`;
+    }
+    return { content: [{ type: 'text', text: output }] };
+};

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

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