@webspire/mcp 0.1.0

package/dist/tools.js

@@ -0,0 +1,151 @@
+import { z } from 'zod';
+import { loadRegistry, searchSnippets, suggestSnippets, } from './registry.js';
+function formatSnippetBrief(s) {
+    return [
+        `**${s.title}** (${s.id})`,
+        `  ${s.description}`,
+        `  Category: ${s.category} | Tags: ${s.tags.join(', ')}`,
+        s.meta.useCases.length > 0
+            ? `  Use cases: ${s.meta.useCases.slice(0, 2).join('; ')}`
+            : '',
+    ]
+        .filter(Boolean)
+        .join('\n');
+}
+function formatSnippetFull(s) {
+    const props = s.meta.customProperties
+        .map((p) => `  ${p}: ${s.meta.defaultValues[p] ?? 'unset'}`)
+        .join('\n');
+    return [
+        `# ${s.title}`,
+        '',
+        s.description,
+        '',
+        '## Usage',
+        '```html',
+        s.meta.usageExample,
+        '```',
+        '',
+        '## CSS',
+        '```css',
+        s.css,
+        '```',
+        '',
+        s.meta.customProperties.length > 0 ? `## Custom Properties\n${props}` : '',
+        s.meta.classes.length > 0
+            ? `## Classes\n${s.meta.classes.join(', ')}`
+            : '',
+        s.meta.accessibility.length > 0
+            ? `## Accessibility\nRespects: ${s.meta.accessibility.join(', ')}`
+            : '',
+        '',
+        `Browser support: ${s.meta.browser}`,
+        `Size: ${s.meta.lines} lines, ${s.meta.bytes} bytes`,
+    ]
+        .filter((line) => line !== '')
+        .join('\n');
+}
+export function registerTools(server, registryOptions) {
+    server.tool('list_categories', 'List all available snippet categories with snippet counts', {}, async () => {
+        const registry = await loadRegistry(registryOptions);
+        const counts = {};
+        for (const snippet of registry.snippets) {
+            counts[snippet.category] = (counts[snippet.category] ?? 0) + 1;
+        }
+        const result = Object.entries(counts)
+            .sort(([, a], [, b]) => b - a)
+            .map(([cat, count]) => `${cat}: ${count} snippet${count > 1 ? 's' : ''}`)
+            .join('\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `${registry.snippets.length} snippets across ${Object.keys(counts).length} categories:\n\n${result}`,
+                },
+            ],
+        };
+    });
+    server.tool('search_snippets', 'Search Webspire CSS snippets by keyword, problem description, or use case. Returns matching snippets with their descriptions and IDs.', {
+        query: z
+            .string()
+            .describe('Search query: problem description, use case, or CSS technique (e.g. "glass card", "fade animation", "blur entrance")'),
+        category: z
+            .string()
+            .optional()
+            .describe('Filter by category: glass, animations, easing, scroll, decorative, interactions, text'),
+        tags: z.array(z.string()).optional().describe('Filter by tags'),
+    }, async ({ query, category, tags }) => {
+        const registry = await loadRegistry(registryOptions);
+        const results = searchSnippets(registry, query, category, tags);
+        if (results.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No snippets found matching your query. Try broader keywords or check available categories with list_categories.',
+                    },
+                ],
+            };
+        }
+        const text = results.map(formatSnippetBrief).join('\n\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Found ${results.length} snippet${results.length > 1 ? 's' : ''}:\n\n${text}`,
+                },
+            ],
+        };
+    });
+    server.tool('get_snippet', 'Get full CSS source, metadata, usage example, and custom properties for a specific snippet. Use this after finding a snippet via search_snippets or suggest_snippet.', {
+        id: z
+            .string()
+            .describe('Snippet ID, e.g. "glass/frosted", "animations/fade-in", "easing/tokens"'),
+    }, async ({ id }) => {
+        const registry = await loadRegistry(registryOptions);
+        const snippet = registry.snippets.find((s) => s.id === id);
+        if (!snippet) {
+            const available = registry.snippets.map((s) => s.id).join(', ');
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `Snippet "${id}" not found. Available snippets: ${available}`,
+                    },
+                ],
+            };
+        }
+        return {
+            content: [{ type: 'text', text: formatSnippetFull(snippet) }],
+        };
+    });
+    server.tool('suggest_snippet', 'Describe a UI problem or desired effect in plain language and get the best matching Webspire snippets. The AI matches your description against each snippet\'s use cases and problem statements.', {
+        problem: z
+            .string()
+            .describe('Describe the UI problem or effect you need (e.g. "I need a blurred card overlay on my hero section", "my list items should animate in one by one")'),
+    }, async ({ problem }) => {
+        const registry = await loadRegistry(registryOptions);
+        const results = suggestSnippets(registry, problem);
+        if (results.length === 0) {
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: 'No matching snippet found for your description. Try rephrasing or use search_snippets with specific keywords.',
+                    },
+                ],
+            };
+        }
+        const text = results
+            .map((s, i) => `${i + 1}. ${formatSnippetBrief(s)}\n   Usage: \`${s.meta.usageExample}\``)
+            .join('\n\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Top ${results.length} suggestion${results.length > 1 ? 's' : ''} for "${problem}":\n\n${text}\n\nUse get_snippet(id) for full CSS and details.`,
+                },
+            ],
+        };
+    });
+}

package/dist/types.d.ts

@@ -0,0 +1,114 @@
+export type SnippetCategory = 'glass' | 'animations' | 'easing' | 'scroll' | 'decorative' | 'interactions' | 'text';
+export interface SnippetAccessibility {
+    prefersReducedMotion: boolean;
+    prefersColorScheme: boolean;
+    supportsCheck: boolean;
+    ariaNotes?: string[];
+    contrastNotes?: string[];
+}
+export interface SnippetMeta {
+    lines: number;
+    bytes: number;
+    tailwind: string;
+    browser: string;
+    accessibility: SnippetAccessibility;
+    customProperties: string[];
+    classes: string[];
+    useCases: string[];
+    solves: string[];
+    usageExample: string;
+    defaultValues?: Record<string, string>;
+}
+export interface SnippetEntry {
+    id: string;
+    title: string;
+    description: string;
+    category: SnippetCategory;
+    tags: string[];
+    responsive: boolean;
+    darkMode: boolean;
+    dependencies?: string[];
+    variants?: string[];
+    updatedAt: string;
+    meta: SnippetMeta;
+    css: string;
+}
+export interface PatternEntry {
+    id: string;
+    title: string;
+    summary: string;
+    description?: string;
+    family: string;
+    kind: 'section' | 'component' | 'pattern' | 'layout';
+    tier: 'base' | 'enhanced';
+    extends: string | null;
+    tags: string[];
+    search: {
+        intent: string[];
+        keywords: string[];
+        useCases: string[];
+    };
+    frameworks: {
+        html: boolean;
+        astro: boolean;
+        webComponent: boolean;
+    };
+    tokens: {
+        color: string;
+        radius: string;
+        shadow: string;
+        spacing: string;
+        typography: string;
+    };
+    capabilities: {
+        responsive: boolean;
+        darkMode: boolean;
+        animated: boolean;
+        interactive: boolean;
+        dependencies: string[];
+        animationPreset: 'none' | 'fade-up' | 'fade-in' | 'scale-in' | 'slide-up' | 'stagger-children' | null;
+    };
+    slots: Array<{
+        name: string;
+        required: boolean;
+        description: string;
+    }>;
+    props: Array<{
+        name: string;
+        type: string;
+        default: unknown;
+        description: string;
+    }>;
+    files: {
+        html: string;
+        css: string | null;
+        js: string | null;
+        astro?: string;
+        webComponent?: string;
+    };
+    install: {
+        copyPasteReady: boolean;
+        ssrSafe: boolean;
+        tailwindOnly: boolean;
+        notes: string[];
+    };
+    ai?: {
+        prompts: string[];
+        compositionRole: 'entry' | 'supporting' | 'navigation' | 'conversion' | 'trust' | 'footer';
+    };
+    governance: {
+        status: 'draft' | 'review' | 'published' | 'deprecated';
+        quality: 'experimental' | 'stable' | 'flagship';
+        owner: string;
+        updatedAt: string;
+    };
+    html: string;
+    css: string | null;
+    js: string | null;
+}
+export interface Registry {
+    version: string;
+    generated: string;
+    snippets: SnippetEntry[];
+    patterns?: PatternEntry[];
+}

package/dist/types.js

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

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@webspire/mcp",
+  "version": "0.1.0",
+  "description": "MCP server for Webspire CSS snippets — AI-native snippet discovery and matching",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./handlers": "./dist/handlers.js",
+    "./registry": "./dist/registry.js",
+    "./search": "./dist/search.js",
+    "./registration": "./dist/registration.js"
+  },
+  "bin": {
+    "webspire-mcp": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc && node scripts/bundle-registry.mjs",
+    "dev": "tsx src/index.ts",
+    "clean": "rm -rf dist"
+  },
+  "files": [
+    "dist",
+    "data"
+  ],
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "tsx": "catalog:",
+    "typescript": "catalog:"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "css",
+    "snippets",
+    "ui-patterns",
+    "tailwind",
+    "ai",
+    "ai-native",
+    "glassmorphism",
+    "component-registry"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/casoon/webspire",
+    "directory": "packages/mcp"
+  },
+  "homepage": "https://webspire.de",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}