@brander/mcp-demo 0.1.16 → 0.1.17

package/dist/data/integrations.js

@@ -1,18 +1,24 @@
 // ============================================================================
-// BranderUX Demo — Integration Methods & AI Capabilities
+// BranderUX Demo — Integration Methods (Real Code Examples, No Fake Metrics)
 // ============================================================================
 export const INTEGRATION_METHODS = [
     {
-        id: "int-sdk",
-        name: "SDK",
         slug: "sdk",
+        name: "SDK",
+        package: "@brander/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"],
+        requirements: ["React 18+", "Next.js 14+ (recommended)", "TypeScript"],
+        steps: [
+            { step: 1, title: "Install the package", command: "npm install @brander/sdk", description: "Add the SDK to your project" },
+            { 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" },
+        ],
         codeExample: [
             'import { Brander } from "@brander/sdk";',
             'import { anthropicStream } from "@brander/sdk/adapters";',
@@ -28,12 +34,6 @@ export const INTEGRATION_METHODS = [
             "  );",
             "}",
         ].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",
@@ -47,21 +47,25 @@ export const INTEGRATION_METHODS = [
             "Requires React 18+",
             "Client-side rendering only",
         ],
-        adoptionRate: 52,
         status: "stable",
     },
     {
-        id: "int-mcp",
-        name: "MCP Tools",
         slug: "mcp",
+        name: "MCP Tools",
+        package: "@brander/mcp-tools",
         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"],
+        description: "The @brander/mcp-tools package 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 15 element types as interactive HTML panels inside Claude and ChatGPT.",
+        bestFor: ["Claude Desktop integrations", "Claude.ai and ChatGPT", "MCP server ecosystems"],
         setupTime: "10 minutes",
-        techStack: ["Node.js", "@modelcontextprotocol/sdk", "TypeScript"],
+        requirements: ["Node.js 18+", "@modelcontextprotocol/sdk ^1.0.0", "TypeScript"],
+        steps: [
+            { step: 1, title: "Install the package", command: "npm install @brander/mcp-tools", description: "Add the MCP tools library" },
+            { 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 environment", description: "Set BRANDER_PROJECT_ID and BRANDER_BETA_KEY env vars" },
+        ],
         codeExample: [
             'import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";',
             'import { registerBranderTools } from "@brander/mcp-tools";',
@@ -71,47 +75,60 @@ export const INTEGRATION_METHODS = [
             "// Register your own business tools",
             "registerMyTools(server);",
             "",
-            "// One line adds branded UI rendering",
+            "// One line adds branded UI rendering for 15 element types",
             "await registerBranderTools(server, {",
-            '  projectId: "your_project_id",',
-            '  betaKey: "bux_dp_your_key",',
+            "  projectId: process.env.BRANDER_PROJECT_ID!,",
+            "  betaKey: process.env.BRANDER_BETA_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",
+            "15 element types rendered as interactive HTML panels",
+            "Works inside Claude Desktop, Claude.ai, and ChatGPT",
             "Streaming support with progressive rendering",
             "Brand settings loaded from BranderUX API",
             "Works alongside your existing MCP tools",
+            "MCP Apps standard — embedded interactive panels in chat",
         ],
         limitations: [
-            "Requires MCP-compatible AI client (Claude Desktop)",
-            "Currently stdio transport — HTTP transport coming soon",
+            "Requires MCP-compatible AI client",
+            "Rendering inside host sandbox (some browser APIs limited)",
         ],
-        adoptionRate: 31,
         status: "stable",
+        configExample: [
+            "{",
+            '  "mcpServers": {',
+            '    "my-app": {',
+            '      "command": "node",',
+            '      "args": ["/path/to/dist/index.js"],',
+            '      "env": {',
+            '        "BRANDER_PROJECT_ID": "your_project_id",',
+            '        "BRANDER_BETA_KEY": "bux_dp_your_key"',
+            "      }",
+            "    }",
+            "  }",
+            "}",
+        ].join("\n"),
     },
     {
-        id: "int-embed",
-        name: "Embed",
         slug: "embed",
+        name: "Embed",
+        package: "N/A (iframe)",
         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"],
+        bestFor: ["Any web application", "No-framework sites", "Quick prototyping", "Legacy applications"],
         setupTime: "2 minutes",
-        techStack: ["HTML", "Any framework or none"],
+        requirements: ["HTML", "Any framework or none", "API token from BranderUX dashboard"],
+        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" },
+        ],
         codeExample: [
             "<!-- Add to your HTML -->",
-            '<iframe',
+            "<iframe",
             '  src="https://branderux.com/embed?token=YOUR_TOKEN&config=BASE64_CONFIG"',
             '  style="width: 100%; height: 600px; border: none;"',
             "></iframe>",
@@ -126,11 +143,6 @@ export const INTEGRATION_METHODS = [
             "  });",
             "</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",
@@ -143,83 +155,55 @@ export const INTEGRATION_METHODS = [
             "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",
-    },
-];
+// ============================================================================
+// HANDLER
+// ============================================================================
+export function getIntegrationData(method) {
+    if (method === "compare") {
+        return {
+            comparison: INTEGRATION_METHODS.map((m) => ({
+                name: m.name,
+                package: m.package,
+                tagline: m.tagline,
+                bestFor: m.bestFor,
+                setupTime: m.setupTime,
+                features: m.features,
+                limitations: m.limitations,
+                status: m.status,
+            })),
+            recommendation: "For React/Next.js apps, start with the SDK — most control, built-in streaming. " +
+                "For MCP ecosystems (Claude/ChatGPT), use MCP Tools. " +
+                "For quick prototyping or non-React apps, use Embed.",
+        };
+    }
+    const integration = INTEGRATION_METHODS.find((m) => m.slug === method);
+    if (!integration) {
+        return {
+            error: `Unknown method: ${method}`,
+            availableMethods: INTEGRATION_METHODS.map((m) => m.slug),
+        };
+    }
+    return {
+        method: {
+            name: integration.name,
+            package: integration.package,
+            tagline: integration.tagline,
+            description: integration.description,
+            bestFor: integration.bestFor,
+            setupTime: integration.setupTime,
+            requirements: integration.requirements,
+            steps: integration.steps,
+            codeExample: integration.codeExample,
+            features: integration.features,
+            limitations: integration.limitations,
+            status: integration.status,
+            ...(integration.configExample && { configExample: integration.configExample }),
+        },
+        otherMethods: INTEGRATION_METHODS
+            .filter((m) => m.slug !== method)
+            .map((m) => ({ name: m.name, tagline: m.tagline, setupTime: m.setupTime })),
+    };
+}

package/dist/data/platform.d.ts

@@ -0,0 +1,36 @@
+export interface PlatformInfo {
+    name: string;
+    tagline: string;
+    description: string;
+    website: string;
+    valueProposition: string[];
+}
+export interface UIGenerationMode {
+    id: string;
+    name: string;
+    description: string;
+    howItWorks: string;
+    bestFor: string;
+    tradeoffs: string;
+    status: "ga" | "beta";
+}
+export interface AIFeature {
+    id: string;
+    name: string;
+    category: string;
+    description: string;
+    howItWorks: string;
+    technicalDetail: string;
+    status: "ga" | "beta" | "coming-soon";
+}
+export interface NoCodeInfo {
+    description: string;
+    pmCapabilities: string[];
+    aiGeneration: string;
+    dashboardFeatures: string[];
+}
+export declare const PLATFORM: PlatformInfo;
+export declare const UI_GENERATION_MODES: UIGenerationMode[];
+export declare const AI_FEATURES: AIFeature[];
+export declare const NO_CODE: NoCodeInfo;
+export declare function getPlatformData(topic?: string): Record<string, unknown>;

package/dist/data/platform.js

@@ -0,0 +1,276 @@
+// ============================================================================
+// BranderUX Demo — Platform Knowledge (Real Product Information)
+// ============================================================================
+// ============================================================================
+// PRODUCT INFO
+// ============================================================================
+export const PLATFORM = {
+    name: "BranderUX",
+    tagline: "AI-UX middleware — transforms AI responses into branded, interactive UI",
+    description: "BranderUX is an AI-UX middleware platform that sits between your AI provider and your users. " +
+        "Instead of plain text responses, your AI generates branded, interactive UI components — " +
+        "dashboards, charts, tables, forms, catalogs — all styled with your brand's colors, fonts, and layout. " +
+        "Every element is clickable: users drill deeper by clicking, not typing. " +
+        "Works with Claude, GPT, and Gemini. No developer required — PMs configure everything through the dashboard.",
+    website: "https://branderux.com",
+    valueProposition: [
+        "Transforms plain-text AI responses into branded visual UI (dashboards, charts, tables, forms, catalogs)",
+        "15 built-in element types — from KPI stats grids to interactive data tables to forms",
+        "Every element is interactive — click to drill deeper, zero typing needed",
+        "Works with Claude, GPT, and Gemini — switch providers without changing UI code",
+        "PM controls everything through the dashboard — no developer required for configuration",
+        "AI generates brand settings, screen layouts, and element configurations from natural language",
+        "Progressive streaming — elements appear as AI generates data, not after the full response",
+        "Three integration options: React SDK, MCP Tools, or zero-dependency Embed",
+    ],
+};
+// ============================================================================
+// UI GENERATION MODES
+// ============================================================================
+export const UI_GENERATION_MODES = [
+    {
+        id: "fixed-screens",
+        name: "Fixed Screens (Deterministic)",
+        description: "The PM configures screen layouts in the BranderUX dashboard — choosing which elements appear, " +
+            "their arrangement, and sizing. When a user asks a question, BranderUX AI analyzes the query " +
+            "and selects the best-fit screen, then the customer's AI fills it with data.",
+        howItWorks: "1. PM designs screens in the dashboard (drag-and-drop or AI-generated)\n" +
+            "2. User asks a question\n" +
+            "3. BranderUX AI scores each screen's fit for the query (<200ms)\n" +
+            "4. Top screens are selected, converted to AI tools\n" +
+            "5. Customer's AI calls the tool with real data\n" +
+            "6. BranderUX renders the screen with brand styling",
+        bestFor: "Predictable, controlled experiences where you want consistent layouts. Great for products with well-defined use cases.",
+        tradeoffs: "Most predictable — PM has full control over layouts. Requires upfront screen design (or AI generation).",
+        status: "ga",
+    },
+    {
+        id: "a2ui",
+        name: "A2UI (Flexible Mode)",
+        description: "The AI decides the layout dynamically. Instead of picking from predefined screens, the AI emits " +
+            "declarative UI trees — choosing which elements to use, how to arrange them (rows/columns), " +
+            "and what data to display. No predefined screens needed.",
+        howItWorks: "1. User asks a question\n" +
+            "2. BranderUX generates an A2UI prompt describing all available elements and layout primitives\n" +
+            "3. Customer's AI responds with a declarative UI structure\n" +
+            "4. BranderUX parses and renders the component tree with brand styling\n" +
+            "5. Elements and layout adapt to each query dynamically",
+        bestFor: "Dynamic, exploratory use cases where the AI should have creative control over layouts. Great for chatbots and assistants that handle diverse queries.",
+        tradeoffs: "More flexible — AI adapts layout to each query. Less predictable — PM has less control over exact layout.",
+        status: "beta",
+    },
+    {
+        id: "mcp-app",
+        name: "MCP App",
+        description: "Renders interactive UI panels directly inside AI chat interfaces like Claude and ChatGPT " +
+            "via the MCP (Model Context Protocol) standard. The AI calls a generate_screen tool, " +
+            "and BranderUX renders the screen as an embedded interactive HTML panel in the chat.",
+        howItWorks: "1. The @brander/mcp-tools library registers a generate_screen tool on your MCP server\n" +
+            "2. AI receives the tool and calls it with an array of elements\n" +
+            "3. BranderUX returns structured content + a self-contained HTML resource\n" +
+            "4. The host (Claude/ChatGPT) renders the HTML as an interactive panel\n" +
+            "5. Users interact with elements directly in the chat interface",
+        bestFor: "MCP server ecosystems. Ships branded UI inside Claude Desktop, Claude.ai, and ChatGPT without building a frontend.",
+        tradeoffs: "Works anywhere MCP is supported. Rendering happens inside the host's sandbox, so some browser APIs are limited.",
+        status: "ga",
+    },
+];
+// ============================================================================
+// AI FEATURES
+// ============================================================================
+export const AI_FEATURES = [
+    {
+        id: "screen-select",
+        name: "Intelligent Screen Selection",
+        category: "Core AI",
+        description: "BranderUX AI analyzes each user query and scores all available screens for fit. " +
+            "The top-matching screens are selected and sent to the customer's AI as tools. " +
+            "Runs in under 200ms using Claude Haiku.",
+        howItWorks: "Each screen has selection criteria: whenToUse descriptions, clickedElements mappings, " +
+            "and exampleQueries. The AI evaluates the user's query against these criteria and returns " +
+            "fitScores (0.0–1.0), reasoning, and confidence level.",
+        technicalDetail: "Uses Claude Haiku for speed. Returns top 2-3 screens with fitScores, reasoning, and enhancedQuery.",
+        status: "ga",
+    },
+    {
+        id: "query-enhance",
+        name: "Query Enhancement",
+        category: "Core AI",
+        description: "Automatically enriches vague user queries with context from available screens and conversation history. " +
+            "The enhanced query guides the customer's AI to produce better-structured responses.",
+        howItWorks: "After screen selection, the original query is combined with screen context (available elements, " +
+            "data fields) and prior conversation. The enhanced query is more precise and tool-optimized.",
+        technicalDetail: "Optional via enableQueryEnhancement flag. Adds ~50ms processing time.",
+        status: "ga",
+    },
+    {
+        id: "streaming",
+        name: "AG-UI Streaming",
+        category: "Streaming",
+        description: "Progressive rendering via the AG-UI protocol. Elements appear on screen as the AI generates data, " +
+            "not after the full response completes. Tables show rows as they arrive, charts update with new data points.",
+        howItWorks: "The AI streams tool call arguments as JSON fragments via SSE. BranderUX's parser extracts element data " +
+            "incrementally. Each element renders progressively with smooth fade-in animations.",
+        technicalDetail: "17 AG-UI event types. Adapters available for Anthropic, OpenAI, and Gemini streaming formats.",
+        status: "ga",
+    },
+    {
+        id: "multi-provider",
+        name: "Multi-Provider AI Support",
+        category: "Compatibility",
+        description: "Works with Anthropic Claude, OpenAI GPT, and Google Gemini. Built-in stream adapters normalize " +
+            "each provider's streaming format, so you can switch AI providers without changing your UI code.",
+        howItWorks: "Each provider has a dedicated adapter (anthropicStream, openaiStream, geminiStream) that converts " +
+            "provider-specific SSE events into standardized AG-UI events. Tool schemas are also auto-generated " +
+            "in each provider's format.",
+        technicalDetail: "SDK includes 4 adapters: Anthropic, OpenAI, Gemini, and generic SSE.",
+        status: "ga",
+    },
+    {
+        id: "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. " +
+            "Users explore data by clicking, not typing.",
+        howItWorks: "Each element type has a behavior template (e.g., DataTable: 'Show details for [title] (ID: [id])'). " +
+            "When clicked, BranderUX fills the template with the clicked item's data and submits a new query. " +
+            "The AI responds with an appropriate detail screen.",
+        technicalDetail: "Templates use [field] placeholders. AI can also provide custom clickQuery per element.",
+        status: "ga",
+    },
+    {
+        id: "brand-generation",
+        name: "AI Brand Generation",
+        category: "No-Code AI",
+        description: "Describe your company in natural language — the AI generates a complete brand package: " +
+            "primary/secondary/accent colors, font style, layout preferences, border radius, shadow settings, " +
+            "and a full gray palette. Refine with follow-up prompts.",
+        howItWorks: "Enter a company description (e.g., 'Modern fintech startup for millennials'). " +
+            "The AI detects the industry and style preferences, then generates brand settings. " +
+            "You can regenerate with refinements (e.g., 'Make it more playful, use rounded corners').",
+        technicalDetail: "Uses Claude for generation. Includes reasoning for colors, typography, and layout choices.",
+        status: "ga",
+    },
+    {
+        id: "project-generation",
+        name: "AI Project Generation",
+        category: "No-Code AI",
+        description: "Describe your project and the AI generates the complete configuration: brand settings, " +
+            "screen layouts, element visibility, and system prompts. Go from idea to working AI-powered UI " +
+            "in minutes.",
+        howItWorks: "1. Describe your project (or answer discovery questions)\n" +
+            "2. AI generates a project plan with recommended screens\n" +
+            "3. Brand settings, screen layouts, and element configs are created automatically\n" +
+            "4. Preview and refine in the dashboard",
+        technicalDetail: "Multi-phase generation: discovery → plan → brand → screens → configuration.",
+        status: "ga",
+    },
+];
+// ============================================================================
+// NO-CODE PHILOSOPHY
+// ============================================================================
+export const NO_CODE = {
+    description: "BranderUX is designed so that Product Managers own the entire AI-UX experience without writing code. " +
+        "Developers are only needed for the initial SDK/MCP integration — after that, PMs control everything " +
+        "through the dashboard.",
+    pmCapabilities: [
+        "Design brand settings (colors, fonts, layout) — or let AI generate them",
+        "Configure screen layouts with a visual screen builder (drag-and-drop)",
+        "Set element visibility per screen — toggle which elements appear",
+        "Create custom screens with AI assistance",
+        "Manage system prompts and AI behavior",
+        "Configure click-to-query behaviors",
+        "Switch between Fixed Screens and A2UI modes",
+        "Monitor performance and usage through analytics",
+        "Generate complete projects from natural language descriptions",
+    ],
+    aiGeneration: "Describe your project in natural language — the AI generates brand settings, screen layouts, " +
+        "element configurations, and system prompts automatically. Refine with conversational follow-ups. " +
+        "Go from idea to working branded AI-UX in minutes, not weeks.",
+    dashboardFeatures: [
+        "Visual Screen Builder — drag-and-drop element placement",
+        "Brand Studio — AI-powered brand generation and customization",
+        "Element Library — configure props, visibility, and behavior for each element",
+        "Playground — test your AI-UX with real queries in real-time",
+        "API Token Management — create tokens for Embed and SDK integrations",
+        "Project Generator — AI creates your entire project from a description",
+    ],
+};
+// ============================================================================
+// HANDLER
+// ============================================================================
+export function getPlatformData(topic) {
+    switch (topic) {
+        case "integration":
+            return {
+                topic: "Integration Methods",
+                description: "BranderUX offers three integration methods, each suited to different use cases.",
+                methods: [
+                    { name: "SDK (@brander/sdk)", bestFor: "React / Next.js apps", setupTime: "5 minutes" },
+                    { name: "MCP Tools (@brander/mcp-tools)", bestFor: "MCP servers (Claude Desktop, Claude.ai, ChatGPT)", setupTime: "10 minutes" },
+                    { name: "Embed", bestFor: "Any web app (zero dependencies)", setupTime: "2 minutes" },
+                ],
+                note: "Use the get_integration_guide tool for detailed setup instructions and code examples.",
+            };
+        case "modes":
+            return {
+                topic: "UI Generation Modes",
+                modes: UI_GENERATION_MODES.map((m) => ({
+                    name: m.name,
+                    description: m.description,
+                    howItWorks: m.howItWorks,
+                    bestFor: m.bestFor,
+                    tradeoffs: m.tradeoffs,
+                    status: m.status,
+                })),
+            };
+        case "ai-features":
+            return {
+                topic: "AI Features",
+                features: AI_FEATURES.map((f) => ({
+                    name: f.name,
+                    category: f.category,
+                    description: f.description,
+                    howItWorks: f.howItWorks,
+                    technicalDetail: f.technicalDetail,
+                    status: f.status,
+                })),
+            };
+        case "no-code":
+            return {
+                topic: "No-Code / PM-Driven Workflow",
+                ...NO_CODE,
+            };
+        default:
+            return {
+                topic: "BranderUX Overview",
+                product: PLATFORM,
+                uiGenerationModes: UI_GENERATION_MODES.map((m) => ({
+                    name: m.name,
+                    description: m.description,
+                    bestFor: m.bestFor,
+                    status: m.status,
+                })),
+                aiFeatures: AI_FEATURES.map((f) => ({
+                    name: f.name,
+                    description: f.description,
+                    status: f.status,
+                })),
+                noCode: {
+                    description: NO_CODE.description,
+                    pmCapabilities: NO_CODE.pmCapabilities,
+                },
+                integrationMethods: [
+                    { name: "SDK (@brander/sdk)", bestFor: "React / Next.js apps" },
+                    { name: "MCP Tools (@brander/mcp-tools)", bestFor: "MCP servers (Claude, ChatGPT)" },
+                    { name: "Embed", bestFor: "Any web app" },
+                ],
+                nextSteps: [
+                    "Use explore_elements to see all 15 element types with sample data",
+                    "Use get_demo_scenario to see ready-to-render business demos",
+                    "Use get_integration_guide for setup instructions and code",
+                ],
+            };
+    }
+}