@brander/mcp-demo 0.1.0

package/dist/data/integrations.js

@@ -0,0 +1,225 @@
+// ============================================================================
+// BranderUX Demo — Integration Methods & AI Capabilities
+// ============================================================================
+export const INTEGRATION_METHODS = [
+    {
+        id: "int-sdk",
+        name: "SDK",
+        slug: "sdk",
+        tagline: "React component — drop-in integration",
+        description: "The @brander/sdk NPM package provides a <Brander /> React component and a <BranderChatWidget /> " +
+            "that you drop into your app. It handles AI streaming, screen rendering, brand theming, and " +
+            "click-to-query interactions out of the box. Works with Anthropic, OpenAI, and Gemini.",
+        bestFor: ["React / Next.js apps", "Full-featured AI assistants", "Chat-based interfaces"],
+        setupTime: "5 minutes",
+        techStack: ["React 18+", "Next.js 14+", "TypeScript"],
+        codeExample: [
+            'import { Brander } from "@brander/sdk";',
+            'import { anthropicStream } from "@brander/sdk/adapters";',
+            "",
+            "function App() {",
+            "  return (",
+            "    <Brander",
+            '      projectId="your_project_id"',
+            "      onQueryStream={({ query, tools, systemPrompt }) =>",
+            "        anthropicStream({ query, tools, systemPrompt, apiKey })",
+            "      }",
+            "    />",
+            "  );",
+            "}",
+        ].join("\n"),
+        steps: [
+            { step: 1, title: "Install the package", description: "npm install @brander/sdk" },
+            { step: 2, title: "Add the component", description: "Import and render <Brander /> with your project ID" },
+            { step: 3, title: "Connect your AI", description: "Pass an onQueryStream handler using one of the built-in adapters (Anthropic, OpenAI, Gemini)" },
+            { step: 4, title: "Customize", description: "Configure brand settings, screens, and element visibility in the BranderUX dashboard" },
+        ],
+        features: [
+            "Full React component with AG-UI streaming",
+            "Built-in adapters for Anthropic, OpenAI, Gemini",
+            "Progressive rendering — elements appear as data streams in",
+            "Click-to-query — every element is interactive",
+            "Chat widget variant for floating assistant",
+            "Brand theming applied automatically",
+            "Conversation history management",
+        ],
+        limitations: [
+            "Requires React 18+",
+            "Client-side rendering only",
+        ],
+        adoptionRate: 52,
+        status: "stable",
+    },
+    {
+        id: "int-mcp",
+        name: "MCP Tools",
+        slug: "mcp",
+        tagline: "Composable library — add branded UI to any MCP server",
+        description: "The @brander/mcp-tools package is a composable library that adds BranderUX branded UI rendering " +
+            "to any MCP server with a single function call. It registers a generate_screen tool and a " +
+            "ui://brander/element-renderer resource that renders 14 element types as interactive HTML panels " +
+            "inside Claude's chat.",
+        bestFor: ["Claude Desktop integrations", "MCP server ecosystems", "AI assistant tools"],
+        setupTime: "10 minutes",
+        techStack: ["Node.js", "@modelcontextprotocol/sdk", "TypeScript"],
+        codeExample: [
+            'import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";',
+            'import { registerBranderTools } from "@brander/mcp-tools";',
+            "",
+            'const server = new McpServer({ name: "my-server", version: "1.0.0" });',
+            "",
+            "// Register your own business tools",
+            "registerMyTools(server);",
+            "",
+            "// One line adds branded UI rendering",
+            "await registerBranderTools(server, {",
+            '  projectId: "your_project_id",',
+            '  betaKey: "bux_dp_your_key",',
+            "});",
+        ].join("\n"),
+        steps: [
+            { step: 1, title: "Install the package", description: "npm install @brander/mcp-tools" },
+            { step: 2, title: "Create your MCP server", description: "Set up an McpServer and register your business tools" },
+            { step: 3, title: "Add BranderUX", description: "Call registerBranderTools(server, config) — one line, done" },
+            { step: 4, title: "Configure Claude Desktop", description: "Add the server to your claude_desktop_config.json with BRANDER_PROJECT_ID and BRANDER_BETA_KEY env vars" },
+        ],
+        features: [
+            "Single function call integration",
+            "14 element types rendered as interactive HTML",
+            "Works inside Claude Desktop chat",
+            "Streaming support with progressive rendering",
+            "Brand settings loaded from BranderUX API",
+            "Works alongside your existing MCP tools",
+        ],
+        limitations: [
+            "Requires MCP-compatible AI client (Claude Desktop)",
+            "Currently stdio transport — HTTP transport coming soon",
+        ],
+        adoptionRate: 31,
+        status: "stable",
+    },
+    {
+        id: "int-embed",
+        name: "Embed",
+        slug: "embed",
+        tagline: "Zero-dependency iframe — works anywhere",
+        description: "Embed BranderUX as an iframe in any web application with zero dependencies. " +
+            "Communication happens through the PostMessage API with token-based authentication. " +
+            "Perfect for adding AI-powered UI to existing apps without framework requirements.",
+        bestFor: ["Any web application", "No-framework sites", "Quick prototyping"],
+        setupTime: "2 minutes",
+        techStack: ["HTML", "Any framework or none"],
+        codeExample: [
+            "<!-- Add to your HTML -->",
+            '<iframe',
+            '  src="https://branderux.com/embed?token=YOUR_TOKEN&config=BASE64_CONFIG"',
+            '  style="width: 100%; height: 600px; border: none;"',
+            "></iframe>",
+            "",
+            "<script>",
+            "  // Listen for events from BranderUX",
+            '  window.addEventListener("message", (event) => {',
+            '    if (event.data.type === "branderux:query") {',
+            "      // Handle AI query from user interaction",
+            "      console.log(event.data.query);",
+            "    }",
+            "  });",
+            "</script>",
+        ].join("\n"),
+        steps: [
+            { step: 1, title: "Get an API token", description: "Create a token in the BranderUX dashboard with your allowed domains" },
+            { step: 2, title: "Add the iframe", description: "Embed the BranderUX iframe with your token and configuration" },
+            { step: 3, title: "Handle events", description: "Listen for PostMessage events to integrate with your app logic" },
+        ],
+        features: [
+            "Zero dependencies — just an iframe",
+            "Works with any framework or plain HTML",
+            "PostMessage API for two-way communication",
+            "Token-based authentication with domain whitelisting",
+            "Full brand theming",
+        ],
+        limitations: [
+            "Limited customization compared to SDK",
+            "Requires internet connection to BranderUX servers",
+            "iframe sandboxing may limit some interactions",
+        ],
+        adoptionRate: 17,
+        status: "stable",
+    },
+];
+export const AI_CAPABILITIES = [
+    {
+        id: "ai-screen-select",
+        name: "Intelligent Screen Selection",
+        category: "Core AI",
+        description: "BranderUX AI analyzes the user's query and automatically selects the best screen layout from your configured screens. " +
+            "It scores each screen's fit (0.0–1.0) and picks the top matches, ensuring the right combination of elements for every response.",
+        howItWorks: "When a query arrives, BranderUX's screen selection AI evaluates it against all available screen configurations. " +
+            "Each screen has selection criteria (whenToUse, clickedElements, exampleQueries) that the AI scores. " +
+            "The top 2–3 screens are selected, and their element tools are sent to the customer's AI.",
+        technicalDetail: "Uses Claude Haiku for fast selection (< 200ms). Returns fitScores, reasoning, and confidence level.",
+        status: "ga",
+    },
+    {
+        id: "ai-query-enhance",
+        name: "Query Enhancement",
+        category: "Core AI",
+        description: "Automatically enhances user queries with context from the selected screen and available tools. " +
+            "The AI rewrites vague queries into precise, tool-optimized prompts — improving response quality without user effort.",
+        howItWorks: "After screen selection, the original query is enriched with screen context (available elements, data fields) " +
+            "and conversation history. The enhanced query guides the customer's AI to produce better-structured responses.",
+        technicalDetail: "Enhancement is optional (enableQueryEnhancement flag). Adds ~50ms to processing time.",
+        status: "ga",
+    },
+    {
+        id: "ai-streaming",
+        name: "AG-UI Streaming Protocol",
+        category: "Streaming",
+        description: "Progressive rendering via the AG-UI (Agent-UI) streaming protocol. Elements appear on screen as data streams in, " +
+            "not after the full response completes. Users see partial results immediately for a fluid, real-time experience.",
+        howItWorks: "The customer's AI streams tool call arguments as JSON fragments via SSE (Server-Sent Events). " +
+            "BranderUX's JsonFragmentParser incrementally extracts element data from the stream. " +
+            "Each element renders progressively — tables show rows as they arrive, charts update with new data points.",
+        technicalDetail: "17 AG-UI event types. Uses TOOL_CALL_ARGS events with delta JSON fragments parsed incrementally.",
+        status: "ga",
+    },
+    {
+        id: "ai-multi-provider",
+        name: "Multi-Provider AI Support",
+        category: "Compatibility",
+        description: "Works with Anthropic Claude, OpenAI GPT, and Google Gemini out of the box. " +
+            "Built-in stream adapters normalize each provider's streaming format into the AG-UI protocol, " +
+            "so you can switch AI providers without changing your UI code.",
+        howItWorks: "Each AI provider has a dedicated stream adapter (anthropicStream, openaiStream, geminiStream) " +
+            "that converts provider-specific SSE events into standardized AG-UI events. " +
+            "Tool schemas are also generated in each provider's format automatically.",
+        technicalDetail: "Adapters: anthropic.ts (218 lines), openai.ts (266 lines), gemini.ts (336 lines), sse.ts (141 lines).",
+        status: "ga",
+    },
+    {
+        id: "ai-click-to-query",
+        name: "Click-to-Query Interactions",
+        category: "Interactivity",
+        description: "Every rendered element is interactive. Click a table row, chart segment, grid card, or button — " +
+            "BranderUX auto-generates a contextual follow-up query and sends it back to the AI. " +
+            "This creates a fluid exploration loop where users drill deeper with zero typing.",
+        howItWorks: "Each element type has a registered behavior template (e.g., DataTable: 'Show details for [title] (ID: [id])'). " +
+            "When a user clicks, BranderUX fills the template with the clicked item's data and submits a new query. " +
+            "The AI receives the query, selects the appropriate detail screen, and renders the response.",
+        technicalDetail: "Defined in ELEMENT_BEHAVIOR_REGISTRY. Supports queryTemplate patterns with [field] placeholders.",
+        status: "ga",
+    },
+    {
+        id: "ai-flexible-mode",
+        name: "A2UI Flexible Mode",
+        category: "Advanced",
+        description: "An alternative to deterministic screen selection. In A2UI mode, the AI emits declarative UI trees directly — " +
+            "choosing which elements to use, how to lay them out (rows/columns), and what data to display. " +
+            "No predefined screens needed. The AI has full creative control over the layout.",
+        howItWorks: "Instead of selecting from predefined screens, the customer's AI receives an A2UI prompt describing all available " +
+            "components and layout primitives (Column, Row). The AI responds with a JSON structure defining the component tree, " +
+            "adjacency list, data model, and element configurations. BranderUX renders this declarative surface.",
+        technicalDetail: "Uses updateComponents, updateDataModel, and setRootComponent operations. Currently in beta.",
+        status: "beta",
+    },
+];

package/dist/data/platform-analytics.d.ts

@@ -0,0 +1,47 @@
+export interface PlatformAnalytics {
+    period: string;
+    overview: {
+        totalProjects: number;
+        monthlyActiveProjects: number;
+        totalScreenGenerations: number;
+        avgResponseTimeMs: number;
+        uptimePercentage: number;
+    };
+    componentPopularity: Array<{
+        component: string;
+        elementType: string;
+        usageCount: number;
+        percentage: number;
+    }>;
+    integrationBreakdown: Array<{
+        method: string;
+        count: number;
+        percentage: number;
+    }>;
+    aiProviderBreakdown: Array<{
+        provider: string;
+        count: number;
+        percentage: number;
+    }>;
+    monthlyGrowth: Array<{
+        month: string;
+        projects: number;
+        screenGenerations: number;
+        apiCalls: number;
+    }>;
+    screenTypeUsage: Array<{
+        screenType: string;
+        count: number;
+        percentage: number;
+    }>;
+}
+export declare const PLATFORM_ANALYTICS: PlatformAnalytics;
+export interface PlatformFeature {
+    id: string;
+    name: string;
+    category: string;
+    description: string;
+    status: "ga" | "beta" | "coming-soon";
+    highlight: boolean;
+}
+export declare const PLATFORM_FEATURES: PlatformFeature[];

package/dist/data/platform-analytics.js

@@ -0,0 +1,176 @@
+// ============================================================================
+// BranderUX Demo — Platform Analytics & Features
+// ============================================================================
+export const PLATFORM_ANALYTICS = {
+    period: "Q1 2026",
+    overview: {
+        totalProjects: 1247,
+        monthlyActiveProjects: 834,
+        totalScreenGenerations: 2_340_000,
+        avgResponseTimeMs: 187,
+        uptimePercentage: 99.97,
+    },
+    componentPopularity: [
+        { component: "Header", elementType: "header", usageCount: 45_200, percentage: 19.3 },
+        { component: "DataTable", elementType: "data-table", usageCount: 41_300, percentage: 17.6 },
+        { component: "ItemGrid", elementType: "item-grid", usageCount: 39_700, percentage: 17.0 },
+        { component: "StatsGrid", elementType: "stats-grid", usageCount: 38_400, percentage: 16.4 },
+        { component: "DetailsData", elementType: "details-data", usageCount: 35_200, percentage: 15.0 },
+        { component: "LineChart", elementType: "line-chart", usageCount: 29_800, percentage: 12.7 },
+        { component: "PieChart", elementType: "pie-chart", usageCount: 22_100, percentage: 9.4 },
+        { component: "BarChart", elementType: "bar-chart", usageCount: 18_600, percentage: 7.9 },
+        { component: "Alert", elementType: "alert", usageCount: 16_900, percentage: 7.2 },
+        { component: "Image", elementType: "image", usageCount: 15_400, percentage: 6.6 },
+        { component: "Button", elementType: "button", usageCount: 14_300, percentage: 6.1 },
+        { component: "ChatBubble", elementType: "chat-bubble", usageCount: 12_800, percentage: 5.5 },
+        { component: "Form", elementType: "form", usageCount: 11_200, percentage: 4.8 },
+        { component: "ItemCard", elementType: "item-card", usageCount: 28_400, percentage: 12.1 },
+    ],
+    integrationBreakdown: [
+        { method: "SDK", count: 649, percentage: 52 },
+        { method: "MCP Tools", count: 387, percentage: 31 },
+        { method: "Embed", count: 211, percentage: 17 },
+    ],
+    aiProviderBreakdown: [
+        { provider: "Anthropic (Claude)", count: 561, percentage: 45 },
+        { provider: "OpenAI (GPT)", count: 449, percentage: 36 },
+        { provider: "Google (Gemini)", count: 237, percentage: 19 },
+    ],
+    monthlyGrowth: [
+        { month: "Aug 2025", projects: 312, screenGenerations: 89_000, apiCalls: 445_000 },
+        { month: "Sep 2025", projects: 398, screenGenerations: 142_000, apiCalls: 710_000 },
+        { month: "Oct 2025", projects: 487, screenGenerations: 231_000, apiCalls: 1_155_000 },
+        { month: "Nov 2025", projects: 589, screenGenerations: 298_000, apiCalls: 1_490_000 },
+        { month: "Dec 2025", projects: 712, screenGenerations: 387_000, apiCalls: 1_935_000 },
+        { month: "Jan 2026", projects: 834, screenGenerations: 456_000, apiCalls: 2_280_000 },
+        { month: "Feb 2026", projects: 923, screenGenerations: 512_000, apiCalls: 2_560_000 },
+    ],
+    screenTypeUsage: [
+        { screenType: "admin-dashboard", count: 31_200, percentage: 28 },
+        { screenType: "table", count: 25_800, percentage: 23 },
+        { screenType: "analytics", count: 19_400, percentage: 17 },
+        { screenType: "details", count: 16_100, percentage: 14 },
+        { screenType: "items-catalog", count: 12_700, percentage: 11 },
+        { screenType: "text", count: 7_800, percentage: 7 },
+    ],
+};
+export const PLATFORM_FEATURES = [
+    {
+        id: "feat-elements",
+        name: "14 Built-in Element Types",
+        category: "Core",
+        description: "From headers to charts to forms, every AI response is rendered as branded, interactive UI. " +
+            "Includes data tables, stat grids, line/pie/bar charts, item grids, cards, images, forms, buttons, alerts, and chat bubbles.",
+        status: "ga",
+        highlight: true,
+    },
+    {
+        id: "feat-click-to-query",
+        name: "Click-to-Query Interactions",
+        category: "Core",
+        description: "Every element is clickable. One click auto-generates a contextual query back to the AI, " +
+            "creating a fluid exploration loop. Click a table row → see details. Click a chart segment → see breakdown.",
+        status: "ga",
+        highlight: true,
+    },
+    {
+        id: "feat-streaming",
+        name: "AG-UI Streaming",
+        category: "Core",
+        description: "Progressive rendering via the AG-UI protocol. Elements appear as data streams in, not after. " +
+            "Tables show rows as they arrive, charts update with new data points — instant visual feedback.",
+        status: "ga",
+        highlight: true,
+    },
+    {
+        id: "feat-multi-provider",
+        name: "Multi-Provider AI Support",
+        category: "AI",
+        description: "Works with Anthropic Claude, OpenAI GPT, and Google Gemini. Built-in stream adapters normalize " +
+            "each provider's format, so you can switch AI providers without changing your UI code.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-screen-select",
+        name: "Intelligent Screen Selection",
+        category: "AI",
+        description: "BranderUX AI analyzes user queries and automatically selects the best screen layout. " +
+            "Scores each screen's fit and picks the optimal combination of elements for every response.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-query-enhance",
+        name: "Query Enhancement",
+        category: "AI",
+        description: "Automatically enhances user queries with context from available screens and tools. " +
+            "Vague questions become precise, tool-optimized prompts — better responses with zero user effort.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-brand-studio",
+        name: "Brand Studio",
+        category: "Customization",
+        description: "Full brand customization: colors, fonts, logos, border radius, and layout patterns. " +
+            "AI can even generate your brand identity from a text description of your company.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-screen-builder",
+        name: "Screen Builder",
+        category: "Customization",
+        description: "Visual drag-and-drop screen designer. Compose custom screen layouts from the 14 element types " +
+            "without writing code. Configure element positions, sizes, and default props.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-custom-screens",
+        name: "Custom Screens",
+        category: "Customization",
+        description: "Build unlimited custom screen layouts stored in your project. Go beyond the 6 predefined screens " +
+            "with layouts tailored to your specific business needs.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-custom-elements",
+        name: "Custom Elements (Vibe Coding)",
+        category: "Customization",
+        description: "Create your own custom element types using AI-assisted vibe coding. Describe the component you need " +
+            "in natural language and BranderUX generates a fully functional, branded element — complete with " +
+            "click-to-query, streaming, and brand theming integration.",
+        status: "coming-soon",
+        highlight: true,
+    },
+    {
+        id: "feat-deterministic",
+        name: "Deterministic Mode",
+        category: "Developer",
+        description: "Screen tools with predictable layouts. The AI picks from your configured screens and fills them " +
+            "with data. You control exactly which screen types are available and what elements they contain.",
+        status: "ga",
+        highlight: false,
+    },
+    {
+        id: "feat-a2ui",
+        name: "A2UI Flexible Mode",
+        category: "Developer",
+        description: "The AI emits declarative UI trees directly — choosing elements, layouts (rows/columns), and data. " +
+            "No predefined screens needed. Full creative control for the AI over the layout.",
+        status: "beta",
+        highlight: false,
+    },
+    {
+        id: "feat-project-gen",
+        name: "AI Project Generation",
+        category: "AI",
+        description: "Describe your project in natural language and the AI generates complete screen configurations, " +
+            "brand settings, and element layouts. Go from idea to working AI UI in minutes.",
+        status: "ga",
+        highlight: true,
+    },
+];

package/dist/data/scenarios.d.ts

@@ -0,0 +1,18 @@
+export interface Scenario {
+    id: string;
+    name: string;
+    industry: string;
+    description: string;
+    integrationMethod: "SDK" | "MCP" | "Embed";
+    aiProvider: string;
+    componentsUsed: string[];
+    screensConfigured: number;
+    expectedResults: {
+        engagementLift: number;
+        responseTimeMs: number;
+        userSatisfaction: number;
+        monthlyInteractions: number;
+    };
+    tags: string[];
+}
+export declare const SCENARIOS: Scenario[];

package/dist/data/scenarios.js

@@ -0,0 +1,196 @@
+// ============================================================================
+// BranderUX Demo — Example Scenarios
+// ============================================================================
+export const SCENARIOS = [
+    {
+        id: "sc-001",
+        name: "Fintech Transaction Dashboard",
+        industry: "Fintech",
+        description: "Real-time transaction monitoring dashboard with fraud alert notifications. " +
+            "Users ask natural language questions about payments, and the AI responds with " +
+            "interactive charts, sortable transaction tables, and actionable alerts — all " +
+            "rendered in the company's brand.",
+        integrationMethod: "SDK",
+        aiProvider: "Anthropic (Claude)",
+        componentsUsed: ["header", "stats-grid", "data-table", "line-chart", "alert"],
+        screensConfigured: 4,
+        expectedResults: {
+            engagementLift: 47,
+            responseTimeMs: 180,
+            userSatisfaction: 4.8,
+            monthlyInteractions: 125_000,
+        },
+        tags: ["finance", "real-time", "dashboards", "alerts"],
+    },
+    {
+        id: "sc-002",
+        name: "Healthcare Patient Portal",
+        industry: "Healthcare",
+        description: "Patient-facing AI assistant with appointment scheduling, health metric tracking, " +
+            "and care plan summaries. Patients interact through natural language and receive " +
+            "structured forms for booking, stats grids for vitals, and detail cards for records.",
+        integrationMethod: "Embed",
+        aiProvider: "OpenAI (GPT)",
+        componentsUsed: ["header", "form", "stats-grid", "details-data", "chat-bubble", "button"],
+        screensConfigured: 5,
+        expectedResults: {
+            engagementLift: 62,
+            responseTimeMs: 220,
+            userSatisfaction: 4.7,
+            monthlyInteractions: 89_000,
+        },
+        tags: ["healthcare", "patient-portal", "forms", "scheduling"],
+    },
+    {
+        id: "sc-003",
+        name: "E-commerce Product Assistant",
+        industry: "E-commerce",
+        description: "Visual product catalog assistant with inventory tracking and order management. " +
+            "Shoppers browse products through interactive grids, view analytics on popular items, " +
+            "and track orders — all through conversational AI with branded UI rendering.",
+        integrationMethod: "MCP",
+        aiProvider: "Anthropic (Claude)",
+        componentsUsed: ["item-grid", "item-card", "data-table", "stats-grid", "pie-chart"],
+        screensConfigured: 5,
+        expectedResults: {
+            engagementLift: 38,
+            responseTimeMs: 150,
+            userSatisfaction: 4.6,
+            monthlyInteractions: 210_000,
+        },
+        tags: ["e-commerce", "catalog", "inventory", "orders"],
+    },
+    {
+        id: "sc-004",
+        name: "Supply Chain Fleet Tracker",
+        industry: "Supply Chain & Logistics",
+        description: "Fleet tracking dashboard with shipment analytics and route performance comparisons. " +
+            "Operations teams ask about delivery status, compare route efficiency with bar charts, " +
+            "and receive proactive alerts for delays — all within a branded interface.",
+        integrationMethod: "SDK",
+        aiProvider: "Google (Gemini)",
+        componentsUsed: ["header", "stats-grid", "line-chart", "bar-chart", "data-table", "alert"],
+        screensConfigured: 4,
+        expectedResults: {
+            engagementLift: 55,
+            responseTimeMs: 195,
+            userSatisfaction: 4.9,
+            monthlyInteractions: 78_000,
+        },
+        tags: ["logistics", "fleet", "real-time", "analytics"],
+    },
+    {
+        id: "sc-005",
+        name: "Developer Docs Explorer",
+        industry: "Developer Tools",
+        description: "Interactive API documentation explorer where developers ask questions in natural language " +
+            "and receive structured responses — endpoint details as key-value cards, architecture diagrams " +
+            "as images, code examples in chat bubbles, and quick-action buttons for common operations.",
+        integrationMethod: "MCP",
+        aiProvider: "Anthropic (Claude)",
+        componentsUsed: ["header", "details-data", "chat-bubble", "button", "image", "alert"],
+        screensConfigured: 3,
+        expectedResults: {
+            engagementLift: 41,
+            responseTimeMs: 130,
+            userSatisfaction: 4.5,
+            monthlyInteractions: 156_000,
+        },
+        tags: ["devtools", "documentation", "API", "interactive"],
+    },
+    {
+        id: "sc-006",
+        name: "EdTech Learning Dashboard",
+        industry: "Education",
+        description: "Student progress tracking and course recommendation system. Teachers view class performance " +
+            "through stats grids and line charts, browse course catalogs with item grids, and configure " +
+            "assignment settings through forms — all AI-driven with branded visuals.",
+        integrationMethod: "Embed",
+        aiProvider: "OpenAI (GPT)",
+        componentsUsed: ["header", "stats-grid", "line-chart", "item-grid", "pie-chart", "form"],
+        screensConfigured: 4,
+        expectedResults: {
+            engagementLift: 52,
+            responseTimeMs: 200,
+            userSatisfaction: 4.7,
+            monthlyInteractions: 67_000,
+        },
+        tags: ["education", "progress-tracking", "courses", "analytics"],
+    },
+    {
+        id: "sc-007",
+        name: "Insurance Claims Processor",
+        industry: "Insurance",
+        description: "Claims processing dashboard with approval workflows. Adjusters view claim details " +
+            "through structured cards, manage workload via data tables, submit evaluations through " +
+            "forms, and receive priority alerts — reducing manual processing time significantly.",
+        integrationMethod: "SDK",
+        aiProvider: "Anthropic (Claude)",
+        componentsUsed: ["header", "data-table", "details-data", "form", "stats-grid", "alert", "button"],
+        screensConfigured: 6,
+        expectedResults: {
+            engagementLift: 59,
+            responseTimeMs: 250,
+            userSatisfaction: 4.8,
+            monthlyInteractions: 94_000,
+        },
+        tags: ["insurance", "claims", "workflows", "processing"],
+    },
+    {
+        id: "sc-008",
+        name: "Marketing Campaign Dashboard",
+        industry: "Marketing & Analytics",
+        description: "Campaign performance dashboard with real-time metrics. Marketers ask about campaign ROI " +
+            "and receive stats grids with KPIs, line charts showing trends over time, pie charts for " +
+            "channel distribution, and bar charts comparing A/B test results.",
+        integrationMethod: "Embed",
+        aiProvider: "OpenAI (GPT)",
+        componentsUsed: ["header", "stats-grid", "line-chart", "bar-chart", "pie-chart", "data-table"],
+        screensConfigured: 3,
+        expectedResults: {
+            engagementLift: 44,
+            responseTimeMs: 175,
+            userSatisfaction: 4.6,
+            monthlyInteractions: 183_000,
+        },
+        tags: ["marketing", "campaigns", "real-time", "ROI"],
+    },
+    {
+        id: "sc-009",
+        name: "Smart Grid Energy Monitor",
+        industry: "Energy & Utilities",
+        description: "Smart grid monitoring with consumption analytics and anomaly detection. Operators view " +
+            "real-time consumption trends, compare regional performance with bar charts, and receive " +
+            "visual anomaly alerts before issues escalate — all through AI-driven branded interfaces.",
+        integrationMethod: "MCP",
+        aiProvider: "Google (Gemini)",
+        componentsUsed: ["header", "stats-grid", "line-chart", "bar-chart", "alert", "image"],
+        screensConfigured: 3,
+        expectedResults: {
+            engagementLift: 48,
+            responseTimeMs: 210,
+            userSatisfaction: 4.5,
+            monthlyInteractions: 42_000,
+        },
+        tags: ["energy", "monitoring", "anomaly-detection", "real-time"],
+    },
+    {
+        id: "sc-010",
+        name: "SaaS CRM Pipeline Manager",
+        industry: "SaaS / CRM",
+        description: "Customer relationship management with visual pipeline tracking. Sales teams ask about " +
+            "deal status and receive pipeline visualizations as pie charts, lead tables with status " +
+            "chips, customer detail cards, and grid views of accounts — all branded to match the CRM.",
+        integrationMethod: "SDK",
+        aiProvider: "Anthropic (Claude)",
+        componentsUsed: ["header", "stats-grid", "data-table", "pie-chart", "details-data", "item-grid"],
+        screensConfigured: 5,
+        expectedResults: {
+            engagementLift: 51,
+            responseTimeMs: 165,
+            userSatisfaction: 4.7,
+            monthlyInteractions: 137_000,
+        },
+        tags: ["SaaS", "CRM", "pipeline", "sales"],
+    },
+];