@brander/mcp-demo 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+/**
+ * BranderUX Demo — MCP Integration Showcase (stdio transport)
+ *
+ * For local use with Claude Desktop. See api/mcp.ts for the HTTP transport (Vercel).
+ *
+ * Claude Desktop config:
+ * {
+ *   "mcpServers": {
+ *     "branderux-demo": {
+ *       "command": "node",
+ *       "args": ["/path/to/brander-mcp-demo/dist/index.js"],
+ *       "env": {
+ *         "BRANDER_PROJECT_ID": "your_project_id",
+ *         "BRANDER_BETA_KEY": "bux_dp_your_key"
+ *       }
+ *     }
+ *   }
+ * }
+ */
+export {};

package/dist/index.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/**
+ * BranderUX Demo — MCP Integration Showcase (stdio transport)
+ *
+ * For local use with Claude Desktop. See api/mcp.ts for the HTTP transport (Vercel).
+ *
+ * Claude Desktop config:
+ * {
+ *   "mcpServers": {
+ *     "branderux-demo": {
+ *       "command": "node",
+ *       "args": ["/path/to/brander-mcp-demo/dist/index.js"],
+ *       "env": {
+ *         "BRANDER_PROJECT_ID": "your_project_id",
+ *         "BRANDER_BETA_KEY": "bux_dp_your_key"
+ *       }
+ *     }
+ *   }
+ * }
+ */
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { createServer } from "./create-server.js";
+const server = await createServer();
+const transport = new StdioServerTransport();
+await server.connect(transport);

package/dist/tools/capability-tools.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerCapabilityTools(server: McpServer): void;

package/dist/tools/capability-tools.js

@@ -0,0 +1,98 @@
+import { z } from "zod";
+import { INTEGRATION_METHODS, AI_CAPABILITIES } from "../data/integrations.js";
+export function registerCapabilityTools(server) {
+    server.registerTool("get_integration_guide", {
+        description: "Get the integration guide for a specific BranderUX deployment method: SDK, MCP, or Embed. " +
+            "Returns step-by-step setup instructions, code examples, features, and requirements. " +
+            "After getting results, use generate_screen with a header for the integration method, " +
+            "details_data for setup steps and features, " +
+            "a form element for 'Get Started' configuration, " +
+            "a button element linking to documentation, " +
+            "and an alert element for any prerequisites or limitations.",
+        inputSchema: z.object({
+            method: z
+                .string()
+                .describe("Integration method: 'sdk' | 'mcp' | 'embed'"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleGetIntegrationGuide(input) }] }));
+    server.registerTool("explore_ai_capabilities", {
+        description: "Explore BranderUX's AI capabilities: screen selection, query enhancement, AG-UI streaming, " +
+            "multi-provider support, click-to-query interactions, and A2UI flexible mode. " +
+            "Filter by category or status. " +
+            "After getting results, use generate_screen with a data_table element showing all capabilities, " +
+            "an item_grid for visual capability cards, " +
+            "and a chat_bubble summarizing how BranderUX's AI works.",
+        inputSchema: z.object({
+            category: z
+                .string()
+                .optional()
+                .describe("Category filter: 'Core AI' | 'Streaming' | 'Compatibility' | 'Interactivity' | 'Advanced'"),
+            status: z
+                .string()
+                .optional()
+                .describe("Status filter: 'ga' | 'beta' | 'coming-soon'"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleExploreAICapabilities(input) }] }));
+}
+// ============================================================================
+// HANDLERS
+// ============================================================================
+function handleGetIntegrationGuide(input) {
+    const method = input.method.toLowerCase();
+    const integration = INTEGRATION_METHODS.find((m) => m.slug === method || m.name.toLowerCase() === method);
+    if (!integration) {
+        return JSON.stringify({
+            error: `Integration method not found: ${method}. Available: sdk, mcp, embed`,
+            available: INTEGRATION_METHODS.map((m) => ({
+                slug: m.slug,
+                name: m.name,
+                tagline: m.tagline,
+            })),
+        });
+    }
+    // Also return a summary of all methods for comparison
+    const otherMethods = INTEGRATION_METHODS.filter((m) => m.slug !== integration.slug).map((m) => ({
+        name: m.name,
+        slug: m.slug,
+        tagline: m.tagline,
+        setupTime: m.setupTime,
+        adoptionRate: `${m.adoptionRate}%`,
+    }));
+    return JSON.stringify({
+        integration: {
+            ...integration,
+            adoptionRate: `${integration.adoptionRate}%`,
+        },
+        otherMethods,
+    });
+}
+function handleExploreAICapabilities(input) {
+    let results = [...AI_CAPABILITIES];
+    if (input.category && typeof input.category === "string") {
+        const cat = input.category.toLowerCase();
+        results = results.filter((c) => c.category.toLowerCase().includes(cat));
+    }
+    if (input.status && typeof input.status === "string") {
+        results = results.filter((c) => c.status === input.status);
+    }
+    const gaCount = AI_CAPABILITIES.filter((c) => c.status === "ga").length;
+    const betaCount = AI_CAPABILITIES.filter((c) => c.status === "beta").length;
+    return JSON.stringify({
+        total: results.length,
+        summary: {
+            totalCapabilities: AI_CAPABILITIES.length,
+            generallyAvailable: gaCount,
+            inBeta: betaCount,
+            categories: [...new Set(AI_CAPABILITIES.map((c) => c.category))],
+        },
+        capabilities: results.map((c) => ({
+            id: c.id,
+            name: c.name,
+            category: c.category,
+            description: c.description,
+            howItWorks: c.howItWorks,
+            technicalDetail: c.technicalDetail,
+            status: c.status,
+        })),
+    });
+}

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

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerComponentTools(server: McpServer): void;

package/dist/tools/component-tools.js

@@ -0,0 +1,109 @@
+import { z } from "zod";
+import { COMPONENTS } from "../data/components.js";
+import { SCENARIOS } from "../data/scenarios.js";
+export function registerComponentTools(server) {
+    server.registerTool("browse_components", {
+        description: "Browse BranderUX's 14 built-in UI component types (plus Custom Elements coming soon). " +
+            "Filter by category, status, or search by name. Returns component cards with popularity, " +
+            "usage stats, and example queries. " +
+            "After getting results, use generate_screen with item_grid element type to display components " +
+            "as a visual catalog, and optionally a stats_grid for summary metrics.",
+        inputSchema: z.object({
+            query: z
+                .string()
+                .optional()
+                .describe("Search text to match against component name or description"),
+            category: z
+                .string()
+                .optional()
+                .describe("Category filter: 'Structure & Navigation' | 'Data & Analytics' | 'Content & Media' | 'User Interaction' | 'Communication' | 'Customization'"),
+            status: z
+                .string()
+                .optional()
+                .describe("Status filter: 'stable' | 'beta' | 'new' | 'coming-soon'"),
+            limit: z.number().optional().describe("Maximum results to return (default 15)"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleBrowseComponents(input) }] }));
+    server.registerTool("get_component_details", {
+        description: "Get detailed information about a specific BranderUX UI component by ID or name. " +
+            "Returns full component data including props, use cases, and usage statistics. " +
+            "Also shows which example scenarios use this component. " +
+            "After getting results, use generate_screen with a header for the component name, " +
+            "a details_data element for props and configuration, " +
+            "a chat_bubble for the description and use case explanation, " +
+            "and an alert element if the component is in beta or coming-soon status.",
+        inputSchema: z.object({
+            component_id: z
+                .string()
+                .describe("Component ID (e.g. 'comp-header') or name (e.g. 'Header', 'DataTable', 'StatsGrid')"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleGetComponentDetails(input) }] }));
+}
+// ============================================================================
+// HANDLERS
+// ============================================================================
+function handleBrowseComponents(input) {
+    let results = [...COMPONENTS];
+    if (input.query && typeof input.query === "string") {
+        const q = input.query.toLowerCase();
+        results = results.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.description.toLowerCase().includes(q) ||
+            c.elementType.toLowerCase().includes(q));
+    }
+    if (input.category && typeof input.category === "string") {
+        const cat = input.category.toLowerCase();
+        results = results.filter((c) => c.category.toLowerCase().includes(cat));
+    }
+    if (input.status && typeof input.status === "string") {
+        results = results.filter((c) => c.status === input.status);
+    }
+    const limit = typeof input.limit === "number" ? input.limit : 15;
+    results = results.slice(0, limit);
+    const stableCount = COMPONENTS.filter((c) => c.status === "stable").length;
+    const totalUsage = COMPONENTS.reduce((sum, c) => sum + c.usageCount, 0);
+    return JSON.stringify({
+        total: results.length,
+        summary: {
+            totalComponents: COMPONENTS.length,
+            stableComponents: stableCount,
+            totalMonthlyUsage: totalUsage,
+            mostPopular: COMPONENTS.reduce((a, b) => a.popularityScore > b.popularityScore ? a : b).name,
+        },
+        components: results.map((c) => ({
+            id: c.id,
+            name: c.name,
+            elementType: c.elementType,
+            category: c.category,
+            description: c.description,
+            popularityScore: c.popularityScore,
+            usageCount: c.usageCount,
+            status: c.status,
+            bestFor: c.bestFor,
+            exampleQuery: c.exampleQuery,
+        })),
+    });
+}
+function handleGetComponentDetails(input) {
+    const id = input.component_id;
+    const component = COMPONENTS.find((c) => c.id === id ||
+        c.name.toLowerCase() === id.toLowerCase() ||
+        c.elementType === id.toLowerCase() ||
+        c.name.toLowerCase().includes(id.toLowerCase()));
+    if (!component) {
+        return JSON.stringify({ error: `Component not found: ${id}` });
+    }
+    // Find scenarios that use this component
+    const relatedScenarios = SCENARIOS.filter((s) => s.componentsUsed.includes(component.elementType)).map((s) => ({
+        id: s.id,
+        name: s.name,
+        industry: s.industry,
+        integrationMethod: s.integrationMethod,
+    }));
+    return JSON.stringify({
+        component: {
+            ...component,
+            relatedScenarios,
+            scenarioCount: relatedScenarios.length,
+        },
+    });
+}

package/dist/tools/platform-tools.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerPlatformTools(server: McpServer): void;

package/dist/tools/platform-tools.js

@@ -0,0 +1,123 @@
+import { z } from "zod";
+import { PLATFORM_ANALYTICS, PLATFORM_FEATURES } from "../data/platform-analytics.js";
+export function registerPlatformTools(server) {
+    server.registerTool("get_platform_analytics", {
+        description: "Get BranderUX platform analytics and performance metrics. Returns project counts, " +
+            "API performance, component popularity, integration method breakdown, and growth trends. " +
+            "After getting results, use generate_screen with: a header for the period, " +
+            "stats_grid for key metrics (active projects, screen generations, avg response time, uptime), " +
+            "line_chart for monthly growth trend, " +
+            "pie_chart for integration method or AI provider breakdown, " +
+            "and bar_chart for component popularity ranking.",
+        inputSchema: z.object({
+            period: z
+                .string()
+                .optional()
+                .describe("Time period (e.g. 'Q1 2026'). Defaults to Q1 2026."),
+            metric: z
+                .string()
+                .optional()
+                .describe("Focus on a specific metric: 'overview' | 'growth' | 'components' | 'integrations' | 'providers' | 'screens'"),
+        }),
+    }, async (input) => ({
+        content: [{ type: "text", text: handleGetPlatformAnalytics(input) }],
+    }));
+    server.registerTool("get_feature_overview", {
+        description: "Get an overview of BranderUX platform features and capabilities. " +
+            "Filter by category or status. Returns feature descriptions with availability. " +
+            "After getting results, use generate_screen with a header for 'BranderUX Platform', " +
+            "an item_grid showing features as cards, " +
+            "a stats_grid for capability highlights (total features, GA count, highlights), " +
+            "and a chat_bubble summarizing the platform's value proposition.",
+        inputSchema: z.object({
+            category: z
+                .string()
+                .optional()
+                .describe("Category filter: 'Core' | 'AI' | 'Customization' | 'Developer'"),
+            status: z
+                .string()
+                .optional()
+                .describe("Status filter: 'ga' | 'beta' | 'coming-soon'"),
+        }),
+    }, async (input) => ({
+        content: [{ type: "text", text: handleGetFeatureOverview(input) }],
+    }));
+}
+// ============================================================================
+// HANDLERS
+// ============================================================================
+function handleGetPlatformAnalytics(input) {
+    const data = PLATFORM_ANALYTICS;
+    if (input.metric && typeof input.metric === "string") {
+        const metric = input.metric.toLowerCase();
+        if (metric === "overview") {
+            return JSON.stringify({ period: data.period, overview: data.overview });
+        }
+        if (metric === "growth") {
+            return JSON.stringify({ period: data.period, monthlyGrowth: data.monthlyGrowth });
+        }
+        if (metric === "components") {
+            return JSON.stringify({
+                period: data.period,
+                componentPopularity: data.componentPopularity,
+            });
+        }
+        if (metric === "integrations") {
+            return JSON.stringify({
+                period: data.period,
+                integrationBreakdown: data.integrationBreakdown,
+            });
+        }
+        if (metric === "providers") {
+            return JSON.stringify({
+                period: data.period,
+                aiProviderBreakdown: data.aiProviderBreakdown,
+            });
+        }
+        if (metric === "screens") {
+            return JSON.stringify({
+                period: data.period,
+                screenTypeUsage: data.screenTypeUsage,
+            });
+        }
+    }
+    // Return all analytics
+    return JSON.stringify(data);
+}
+function handleGetFeatureOverview(input) {
+    let results = [...PLATFORM_FEATURES];
+    if (input.category && typeof input.category === "string") {
+        const cat = input.category.toLowerCase();
+        results = results.filter((f) => f.category.toLowerCase().includes(cat));
+    }
+    if (input.status && typeof input.status === "string") {
+        results = results.filter((f) => f.status === input.status);
+    }
+    const gaCount = PLATFORM_FEATURES.filter((f) => f.status === "ga").length;
+    const betaCount = PLATFORM_FEATURES.filter((f) => f.status === "beta").length;
+    const comingSoonCount = PLATFORM_FEATURES.filter((f) => f.status === "coming-soon").length;
+    const highlightCount = PLATFORM_FEATURES.filter((f) => f.highlight).length;
+    return JSON.stringify({
+        total: results.length,
+        summary: {
+            totalFeatures: PLATFORM_FEATURES.length,
+            generallyAvailable: gaCount,
+            inBeta: betaCount,
+            comingSoon: comingSoonCount,
+            highlights: highlightCount,
+            categories: [...new Set(PLATFORM_FEATURES.map((f) => f.category))],
+        },
+        valueProposition: "BranderUX is an AI-UX middleware platform that transforms AI responses into branded, " +
+            "interactive UI components. Instead of plain text, your users see dashboards, charts, " +
+            "tables, and forms — all in your brand, all clickable, all streaming in real-time. " +
+            "Integrate with one line of code. Works with Claude, GPT, and Gemini.",
+        features: results.map((f) => ({
+            id: f.id,
+            name: f.name,
+            category: f.category,
+            description: f.description,
+            status: f.status,
+            highlight: f.highlight,
+        })),
+    });
+}

package/dist/tools/scenario-tools.d.ts

@@ -0,0 +1,2 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+export declare function registerScenarioTools(server: McpServer): void;

package/dist/tools/scenario-tools.js

@@ -0,0 +1,113 @@
+import { z } from "zod";
+import { SCENARIOS } from "../data/scenarios.js";
+import { COMPONENTS } from "../data/components.js";
+export function registerScenarioTools(server) {
+    server.registerTool("browse_scenarios", {
+        description: "Browse example implementation scenarios showing what you can build with BranderUX. " +
+            "Filter by industry, integration method, or AI provider. " +
+            "Returns scenario summaries with components used and expected performance metrics. " +
+            "After getting results, use generate_screen with a data_table element to display scenarios " +
+            "in a sortable table, and optionally a stats_grid for aggregate metrics.",
+        inputSchema: z.object({
+            industry: z
+                .string()
+                .optional()
+                .describe("Industry filter (e.g. 'Fintech', 'Healthcare', 'E-commerce', 'Education', 'Insurance')"),
+            integration_method: z
+                .string()
+                .optional()
+                .describe("Integration method filter: 'SDK' | 'MCP' | 'Embed'"),
+            ai_provider: z
+                .string()
+                .optional()
+                .describe("AI provider filter: 'Anthropic' | 'OpenAI' | 'Google'"),
+            limit: z.number().optional().describe("Maximum results (default 10)"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleBrowseScenarios(input) }] }));
+    server.registerTool("get_scenario_details", {
+        description: "Get detailed information about a specific BranderUX implementation scenario by ID or name. " +
+            "Returns full scenario details including components used, screen configurations, " +
+            "and expected performance improvements. " +
+            "After getting results, use generate_screen with a header for the scenario name, " +
+            "details_data for implementation details and metrics, " +
+            "a bar_chart comparing expected before/after performance improvements, " +
+            "and item_card elements for each component used in the scenario.",
+        inputSchema: z.object({
+            scenario_id: z
+                .string()
+                .describe("Scenario ID (e.g. 'sc-001') or name (e.g. 'Fintech Transaction Dashboard')"),
+        }),
+    }, async (input) => ({ content: [{ type: "text", text: handleGetScenarioDetails(input) }] }));
+}
+// ============================================================================
+// HANDLERS
+// ============================================================================
+function handleBrowseScenarios(input) {
+    let results = [...SCENARIOS];
+    if (input.industry && typeof input.industry === "string") {
+        const industry = input.industry.toLowerCase();
+        results = results.filter((s) => s.industry.toLowerCase().includes(industry));
+    }
+    if (input.integration_method && typeof input.integration_method === "string") {
+        const method = input.integration_method.toUpperCase();
+        results = results.filter((s) => s.integrationMethod === method);
+    }
+    if (input.ai_provider && typeof input.ai_provider === "string") {
+        const provider = input.ai_provider.toLowerCase();
+        results = results.filter((s) => s.aiProvider.toLowerCase().includes(provider));
+    }
+    const limit = typeof input.limit === "number" ? input.limit : 10;
+    // Sort by engagement lift descending
+    results.sort((a, b) => b.expectedResults.engagementLift - a.expectedResults.engagementLift);
+    results = results.slice(0, limit);
+    const avgEngagement = SCENARIOS.reduce((sum, s) => sum + s.expectedResults.engagementLift, 0) / SCENARIOS.length;
+    const avgResponseTime = SCENARIOS.reduce((sum, s) => sum + s.expectedResults.responseTimeMs, 0) / SCENARIOS.length;
+    return JSON.stringify({
+        total: results.length,
+        summary: {
+            totalScenarios: SCENARIOS.length,
+            avgEngagementLift: `${Math.round(avgEngagement)}%`,
+            avgResponseTime: `${Math.round(avgResponseTime)}ms`,
+            industries: [...new Set(SCENARIOS.map((s) => s.industry))],
+        },
+        scenarios: results.map((s) => ({
+            id: s.id,
+            name: s.name,
+            industry: s.industry,
+            integrationMethod: s.integrationMethod,
+            aiProvider: s.aiProvider,
+            componentsUsed: s.componentsUsed,
+            screensConfigured: s.screensConfigured,
+            engagementLift: `${s.expectedResults.engagementLift}%`,
+            responseTimeMs: s.expectedResults.responseTimeMs,
+            satisfaction: s.expectedResults.userSatisfaction,
+            monthlyInteractions: s.expectedResults.monthlyInteractions,
+            tags: s.tags,
+        })),
+    });
+}
+function handleGetScenarioDetails(input) {
+    const id = input.scenario_id;
+    const scenario = SCENARIOS.find((s) => s.id === id ||
+        s.name.toLowerCase().includes(id.toLowerCase()));
+    if (!scenario) {
+        return JSON.stringify({ error: `Scenario not found: ${id}` });
+    }
+    // Enrich with component details
+    const componentDetails = scenario.componentsUsed
+        .map((elementType) => COMPONENTS.find((c) => c.elementType === elementType))
+        .filter(Boolean)
+        .map((c) => ({
+        name: c.name,
+        elementType: c.elementType,
+        category: c.category,
+        description: c.description,
+    }));
+    return JSON.stringify({
+        scenario: {
+            ...scenario,
+            componentDetails,
+            componentCount: componentDetails.length,
+        },
+    });
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@brander/mcp-demo",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "BranderUX Demo — Explore BranderUX capabilities through branded UI",
+  "bin": {
+    "brander-mcp-demo": "dist/index.js"
+  },
+  "files": [
+    "dist/"
+  ],
+  "keywords": [
+    "mcp",
+    "branderux",
+    "claude",
+    "chatgpt",
+    "ai",
+    "branded-ui",
+    "model-context-protocol"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsx --watch src/index.ts",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@brander/mcp-tools": "^0.2.0",
+    "@modelcontextprotocol/sdk": "^1.0.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@vercel/node": "^5.0.0",
+    "tsx": "^4.0.0",
+    "typescript": "^5.5.4"
+  }
+}