@webspire/mcp 0.1.0 → 0.3.0

package/dist/index.js

@@ -11,7 +11,7 @@ const registryOptions = {
 };
 const server = new McpServer({
     name: 'webspire',
-    version: '0.1.0',
+    version: '0.3.0',
 });
 registerTools(server, registryOptions);
 registerResources(server, registryOptions);

package/dist/registration.js

@@ -58,6 +58,39 @@ function formatSnippetFull(s) {
         .filter((line) => line !== '')
         .join('\n');
 }
+function formatTemplateBrief(t) {
+    return [
+        `**${t.title}** (${t.id})`,
+        `  ${t.summary}`,
+        `  Category: ${t.category} | Style: ${t.style}`,
+        t.tags.length > 0 ? `  Tags: ${t.tags.join(', ')}` : '',
+    ]
+        .filter(Boolean)
+        .join('\n');
+}
+function formatTemplateFull(t) {
+    return [
+        `# ${t.title}`,
+        '',
+        t.description ?? t.summary,
+        '',
+        '## Identity',
+        `ID: ${t.id}`,
+        `Category: ${t.category}`,
+        `Style: ${t.style}`,
+        '',
+        t.tags.length > 0 ? `## Tags\n${t.tags.join(', ')}` : '',
+        t.sections.length > 0 ? `## Sections\n${t.sections.join(', ')}` : '',
+        t.patterns.length > 0 ? `## Uses Patterns\n${t.patterns.join(', ')}` : '',
+        '',
+        '## HTML',
+        '```html',
+        t.html,
+        '```',
+    ]
+        .filter((line) => line !== '')
+        .join('\n');
+}
 function formatPatternBrief(p) {
     return [
         `**${p.title}** (${p.id})`,
@@ -344,6 +377,84 @@ export function registerToolsWithProvider(server, getRegistry) {
             content: [{ type: 'text', text: formatPatternFull(pattern) }],
         };
     });
+    server.tool('list_templates', 'List all available page templates grouped by category', {}, async () => {
+        const registry = await getRegistry();
+        const templates = registry.templates ?? [];
+        const counts = {};
+        for (const t of templates) {
+            counts[t.category] = (counts[t.category] ?? 0) + 1;
+        }
+        const result = Object.entries(counts)
+            .sort(([, a], [, b]) => b - a)
+            .map(([cat, count]) => `${cat}: ${count} template${count > 1 ? 's' : ''}`)
+            .join('\n');
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `${templates.length} templates across ${Object.keys(counts).length} categories:\n\n${result}`,
+                },
+            ],
+        };
+    });
+    server.tool('search_templates', 'Search Webspire page templates by keyword, category, or style.', {
+        query: z.string().describe('Search query, e.g. "saas landing", "portfolio dark", "shop"'),
+        category: z.string().optional().describe('Filter by category, e.g. saas-landing, agency, shop'),
+        style: z.string().optional().describe('Filter by style, e.g. modern, bold, minimal, corporate'),
+    }, async ({ query, category, style }) => {
+        const registry = await getRegistry();
+        let templates = registry.templates ?? [];
+        if (category)
+            templates = templates.filter((t) => t.category === category);
+        if (style)
+            templates = templates.filter((t) => t.style === style);
+        const terms = query.toLowerCase().split(/\s+/).filter(Boolean);
+        const results = templates
+            .map((t) => {
+            const haystack = [t.title, t.summary, t.description ?? '', t.category, t.style, ...t.tags, ...t.sections]
+                .join(' ')
+                .toLowerCase();
+            const score = terms.reduce((acc, term) => acc + (haystack.includes(term) ? 1 : 0), 0);
+            return { template: t, score };
+        })
+            .filter((row) => row.score > 0)
+            .sort((a, b) => b.score - a.score)
+            .slice(0, 10)
+            .map((row) => row.template);
+        if (results.length === 0) {
+            return {
+                content: [{ type: 'text', text: 'No templates found matching your query.' }],
+            };
+        }
+        return {
+            content: [
+                {
+                    type: 'text',
+                    text: `Found ${results.length} template${results.length > 1 ? 's' : ''}:\n\n${results.map(formatTemplateBrief).join('\n\n')}`,
+                },
+            ],
+        };
+    });
+    server.tool('get_template', 'Get full template HTML for a specific page template. Returns standalone HTML ready to use.', {
+        id: z.string().describe('Template ID, e.g. "saas-landing/modern", "shop/catalog"'),
+    }, async ({ id }) => {
+        const registry = await getRegistry();
+        const template = (registry.templates ?? []).find((t) => t.id === id);
+        if (!template) {
+            const available = (registry.templates ?? []).map((t) => t.id).join(', ');
+            return {
+                content: [
+                    {
+                        type: 'text',
+                        text: `Template "${id}" not found. Available templates: ${available}`,
+                    },
+                ],
+            };
+        }
+        return {
+            content: [{ type: 'text', text: formatTemplateFull(template) }],
+        };
+    });
 }
 export function registerResourcesWithProvider(server, getRegistry) {
     server.resource('categories', 'webspire://categories', {
@@ -468,4 +579,52 @@ export function registerResourcesWithProvider(server, getRegistry) {
             ],
         };
     });
+    server.resource('templates', 'webspire://templates', { description: 'List all page templates', mimeType: 'application/json' }, async () => {
+        const registry = await getRegistry();
+        const templates = (registry.templates ?? []).map((t) => ({
+            id: t.id,
+            title: t.title,
+            summary: t.summary,
+            category: t.category,
+            style: t.style,
+        }));
+        return {
+            contents: [
+                {
+                    uri: 'webspire://templates',
+                    mimeType: 'application/json',
+                    text: JSON.stringify(templates, null, 2),
+                },
+            ],
+        };
+    });
+    server.resource('template', 'webspire://template/{id}', {
+        description: 'Get full template data including HTML source',
+        mimeType: 'application/json',
+    }, async (uri) => {
+        const parts = uri.pathname.replace('//', '').split('/');
+        const id = parts.slice(1).join('/');
+        const registry = await getRegistry();
+        const template = (registry.templates ?? []).find((t) => t.id === id);
+        if (!template) {
+            return {
+                contents: [
+                    {
+                        uri: uri.href,
+                        mimeType: 'text/plain',
+                        text: `Template "${id}" not found`,
+                    },
+                ],
+            };
+        }
+        return {
+            contents: [
+                {
+                    uri: uri.href,
+                    mimeType: 'application/json',
+                    text: JSON.stringify(template, null, 2),
+                },
+            ],
+        };
+    });
 }

package/dist/search.d.ts

@@ -8,5 +8,5 @@ export interface SnippetSearchOptions {
     limit?: number;
 }
 export declare function stem(word: string): string;
-export declare function scoreSnippet(snippet: SnippetEntry, stems: string[]): number;
+export declare function scoreSnippet(snippet: SnippetEntry, queryStems: string[], expandedTerms: string[]): number;
 export declare function searchSnippets(snippets: SnippetEntry[], options: SnippetSearchOptions): SnippetEntry[];

package/dist/search.js

@@ -1,17 +1,41 @@
 const STEM_SUFFIXES = [
-    'ions',
-    'ing',
     'tion',
-    'ness',
+    'sion',
+    'ions',
     'ment',
+    'ness',
     'able',
     'ible',
     'ous',
     'ive',
+    'ing',
     'ed',
     'es',
+    'ly',
     's',
 ];
+/** Common synonyms for CSS/UI terms — maps alternative words to canonical terms */
+const SYNONYMS = {
+    blur: ['glass', 'frosted', 'glassmorphism', 'backdrop'],
+    glass: ['blur', 'frosted', 'glassmorphism', 'transparent'],
+    fade: ['opacity', 'appear', 'entrance', 'reveal'],
+    slide: ['translate', 'move', 'enter', 'entrance'],
+    hover: ['mouse', 'interaction', 'lift', 'pointer'],
+    card: ['panel', 'surface', 'container', 'box'],
+    animation: ['animate', 'motion', 'transition', 'keyframe'],
+    glow: ['neon', 'light', 'shine', 'luminous'],
+    scroll: ['viewport', 'intersection', 'parallax', 'progress'],
+    text: ['font', 'typography', 'heading', 'title'],
+    gradient: ['color', 'blend', 'mesh', 'aurora'],
+    dark: ['darkmode', 'theme', 'scheme', 'night'],
+    button: ['btn', 'cta', 'action', 'click'],
+    responsive: ['mobile', 'fluid', 'adaptive', 'clamp'],
+    focus: ['keyboard', 'a11y', 'accessibility', 'ring'],
+    stagger: ['cascade', 'sequence', 'delay', 'children'],
+    reveal: ['show', 'appear', 'unhide', 'visible', 'fade'],
+    shimmer: ['skeleton', 'loading', 'placeholder', 'pulse'],
+    ripple: ['click', 'material', 'touch', 'feedback'],
+};
 export function stem(word) {
     for (const suffix of STEM_SUFFIXES) {
         if (word.length > suffix.length + 2 && word.endsWith(suffix)) {
@@ -20,29 +44,70 @@ export function stem(word) {
     }
     return word;
 }
-export function scoreSnippet(snippet, stems) {
+/** Expand query terms with synonyms for broader matching */
+function expandWithSynonyms(terms) {
+    const expanded = new Set(terms);
+    for (const term of terms) {
+        // Direct synonym lookup
+        if (SYNONYMS[term]) {
+            for (const syn of SYNONYMS[term]) {
+                expanded.add(syn);
+            }
+        }
+        // Reverse lookup: if term appears as a synonym value
+        for (const [key, values] of Object.entries(SYNONYMS)) {
+            if (values.includes(term)) {
+                expanded.add(key);
+            }
+        }
+    }
+    return [...expanded];
+}
+export function scoreSnippet(snippet, queryStems, expandedTerms) {
     let score = 0;
+    // Exact ID match — highest priority
+    const idLower = snippet.id.toLowerCase();
+    for (const term of queryStems) {
+        if (idLower.includes(term))
+            score += 5;
+    }
+    // solves field — primary intent match
     for (const solve of snippet.meta.solves) {
         const lower = solve.toLowerCase();
-        score += stems.filter((w) => lower.includes(w)).length * 3;
+        score += queryStems.filter((w) => lower.includes(w)).length * 4;
     }
+    // useCases — strong signal
     for (const useCase of snippet.meta.useCases) {
         const lower = useCase.toLowerCase();
-        score += stems.filter((w) => lower.includes(w)).length * 2;
+        score += queryStems.filter((w) => lower.includes(w)).length * 3;
     }
-    const desc = snippet.description.toLowerCase();
-    score += stems.filter((w) => desc.includes(w)).length;
+    // Title — important
     const title = snippet.title.toLowerCase();
-    score += stems.filter((w) => title.includes(w)).length * 2;
-    score += stems.filter((w) => snippet.tags.some((t) => t.includes(w))).length;
+    score += queryStems.filter((w) => title.includes(w)).length * 3;
+    // Description
+    const desc = snippet.description.toLowerCase();
+    score += queryStems.filter((w) => desc.includes(w)).length * 2;
+    // Tags
+    const tagStr = snippet.tags.join(' ').toLowerCase();
+    score += queryStems.filter((w) => tagStr.includes(w)).length * 2;
+    // Classes
     const classes = snippet.meta.classes.join(' ').toLowerCase();
-    score += stems.filter((w) => classes.includes(w)).length;
+    score += queryStems.filter((w) => classes.includes(w)).length;
+    // Synonym-expanded terms — lower weight to avoid noise
+    const synonymOnly = expandedTerms.filter((t) => !queryStems.includes(t));
+    if (synonymOnly.length > 0) {
+        const allText = [title, desc, tagStr, ...snippet.meta.useCases, ...snippet.meta.solves]
+            .join(' ')
+            .toLowerCase();
+        score += synonymOnly.filter((w) => allText.includes(w)).length;
+    }
     return score;
 }
 export function searchSnippets(snippets, options) {
     const { query, category, tags, darkMode, responsive, limit = 10 } = options;
     const words = query.toLowerCase().split(/\s+/).filter(Boolean);
     const stems = words.map(stem);
+    const expanded = expandWithSynonyms(words);
     if (stems.length === 0) {
         return [];
     }
@@ -58,7 +123,7 @@ export function searchSnippets(snippets, options) {
             return false;
         return true;
     })
-        .map((snippet) => ({ snippet, score: scoreSnippet(snippet, stems) }))
+        .map((snippet) => ({ snippet, score: scoreSnippet(snippet, stems, expanded) }))
         .filter(({ score }) => score > 0)
         .sort((a, b) => b.score - a.score);
     return scored.slice(0, limit).map(({ snippet }) => snippet);

package/dist/types.d.ts

@@ -106,9 +106,44 @@ export interface PatternEntry {
     css: string | null;
     js: string | null;
 }
+export interface TemplateEntry {
+    id: string;
+    title: string;
+    summary: string;
+    description?: string;
+    category: string;
+    style: string;
+    tags: string[];
+    patterns: string[];
+    sections: string[];
+    features: {
+        responsive: boolean;
+        darkMode: boolean;
+        animations: boolean;
+        formHandling: boolean;
+    };
+    files: {
+        html: string;
+        preview: string;
+    };
+    install: {
+        copyPasteReady: boolean;
+        tailwindCdn: boolean;
+        vanillaJs: boolean;
+        notes: string[];
+    };
+    governance: {
+        status: 'draft' | 'review' | 'published' | 'deprecated';
+        quality: 'experimental' | 'stable' | 'flagship';
+        owner: string;
+        updatedAt: string;
+    };
+    html: string;
+}
 export interface Registry {
     version: string;
     generated: string;
     snippets: SnippetEntry[];
     patterns?: PatternEntry[];
+    templates?: TemplateEntry[];
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webspire/mcp",
-  "version": "0.1.0",
-  "description": "MCP server for Webspire CSS snippets — AI-native snippet discovery and matching",
+  "version": "0.3.0",
+  "description": "MCP server for Webspire — AI-native discovery of CSS snippets, UI patterns, and page templates",
   "type": "module",
   "exports": {
     ".": "./dist/index.js",
@@ -23,13 +23,13 @@
     "data"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "catalog:",
-    "zod": "catalog:"
+    "@modelcontextprotocol/sdk": "^1.13.0",
+    "zod": "^4.2.1"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "tsx": "catalog:",
-    "typescript": "catalog:"
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
   },
   "keywords": [
     "mcp",