@brander/mcp-demo 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +48 -63
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -1,33 +1,27 @@
1
- # TechStore Pro — BranderUX MCP Demo
1
+ # @brander/mcp-demo
2
2
 
3
- A reference implementation showing how to add [BranderUX](https://branderux.com) branded UI rendering to an MCP server using [`@brander/mcp-tools`](https://www.npmjs.com/package/@brander/mcp-tools).
3
+ A demo MCP server showcasing [BranderUX](https://branderux.com) branded UI rendering inside AI chatbots. Uses [`@brander/mcp-tools`](https://www.npmjs.com/package/@brander/mcp-tools) to render interactive, branded UI components directly in conversations on Claude, ChatGPT, and other MCP-compatible hosts.
4
4
 
5
- This demo creates a fake B2B e-commerce company (TechStore Pro) with 8 business tools that Claude can use to search products, view orders, analyze customers, and display analytics — all rendered as branded, interactive UI inside Claude Desktop.
5
+ ## Connect
6
6
 
7
- ## Setup
7
+ ### Claude.ai / ChatGPT (Remote)
8
8
 
9
- ```bash
10
- # Clone the repo
11
- git clone https://github.com/BranderUX/mcp-demo.git
12
- cd mcp-demo
9
+ Use the hosted URL — no installation needed:
13
10
 
14
- # Install dependencies
15
- npm install
16
-
17
- # Build
18
- npm run build
11
+ ```
12
+ https://mcp-demo.branderux.com/mcp
19
13
  ```
20
14
 
21
- ## Configure Claude Desktop
15
+ ### Claude Desktop (Local)
22
16
 
23
- Add this to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json`):
17
+ Add to your config (`~/Library/Application Support/Claude/claude_desktop_config.json`):
24
18
 
25
19
  ```json
26
20
  {
27
21
  "mcpServers": {
28
- "techstore-pro": {
29
- "command": "node",
30
- "args": ["/absolute/path/to/mcp-demo/dist/index.js"],
22
+ "branderux-demo": {
23
+ "command": "npx",
24
+ "args": ["-y", "@brander/mcp-demo"],
31
25
  "env": {
32
26
  "BRANDER_PROJECT_ID": "your_project_id",
33
27
  "BRANDER_BETA_KEY": "bux_dp_your_key"
@@ -37,75 +31,66 @@ Add this to your Claude Desktop config (`~/Library/Application Support/Claude/cl
37
31
  }
38
32
  ```
39
33
 
40
- Then restart Claude Desktop.
34
+ ## Tools
41
35
 
42
- ## Environment Variables
36
+ | Tool | Description |
37
+ |---|---|
38
+ | `generate_screen` | Render branded UI screens (charts, tables, grids, forms, cards, etc.) |
39
+ | `browse_components` | Browse available BranderUX UI components |
40
+ | `get_component_details` | View details of a specific component |
41
+ | `browse_scenarios` | Explore demo business scenarios |
42
+ | `get_scenario_details` | View a specific scenario with sample data |
43
+ | `get_platform_analytics` | View platform analytics and metrics |
44
+ | `get_feature_overview` | Explore BranderUX platform features |
45
+ | `get_integration_guide` | Get integration guides for different frameworks |
46
+ | `explore_ai_capabilities` | Explore AI-powered UI generation capabilities |
43
47
 
44
- | Variable | Required | Description |
45
- |---|---|---|
46
- | `BRANDER_PROJECT_ID` | Yes | Your BranderUX project ID |
47
- | `BRANDER_BETA_KEY` | Yes | Design partner key (`bux_dp_...`) |
48
- | `BRANDER_API_BASE_URL` | No | API URL (defaults to `https://branderux.com`) |
48
+ ## Try It
49
49
 
50
- ## Tools
50
+ Connect to the demo and try these prompts:
51
51
 
52
- | Tool | Description | Renders As |
53
- |---|---|---|
54
- | `search_products` | Search product catalog by name, category, price | Item Grid + Stats Grid |
55
- | `get_product_details` | View full product details by ID | Header + Details Data + Alert |
56
- | `get_orders` | List orders with filters (status, customer, date) | Data Table |
57
- | `get_order_details` | View single order details | Header + Details Data |
58
- | `get_customers` | Search customers by name, segment, tier | Data Table |
59
- | `get_customer_profile` | View customer profile with order history | Header + Details Data + Line Chart |
60
- | `get_analytics_summary` | Revenue, orders, and trend analytics | Header + Stats Grid + Line Chart + Pie Chart |
61
- | `get_inventory_status` | Stock levels with low-stock alerts | Data Table + Alert |
52
+ - "Show me a sales dashboard with analytics"
53
+ - "Create a product catalog with items and pricing"
54
+ - "Display a customer data table"
55
+ - "Show a login form with email and password"
56
+ - "Create a stats overview with revenue metrics"
62
57
 
63
- ## Try It
58
+ ## How It Works
59
+
60
+ BranderUX uses the [MCP Apps](https://modelcontextprotocol.io/docs/extensions/apps) standard to render interactive UI inside AI conversations. When the AI calls `generate_screen`, it returns:
64
61
 
65
- Once configured, try these prompts in Claude Desktop:
62
+ 1. **Text summary** — for the AI to understand what was rendered
63
+ 2. **Structured content** — element data (charts, tables, forms, etc.)
64
+ 3. **HTML resource** — a bundled React app that renders the branded UI in a sandboxed iframe
66
65
 
67
- - "Show me all laptops under $2000"
68
- - "What are the latest orders?"
69
- - "Show me the analytics dashboard"
70
- - "Which products are low on stock?"
71
- - "Show me customer John's profile"
66
+ All UI is styled with your project's brand colors, fonts, and layout — configured in the BranderUX dashboard.
72
67
 
73
68
  ## Integration Pattern
74
69
 
75
- The entire BranderUX integration is **one line** in [`src/index.ts`](src/index.ts):
70
+ Adding BranderUX to any MCP server is one line:
76
71
 
77
72
  ```typescript
78
73
  import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
79
74
  import { registerBranderTools } from "@brander/mcp-tools";
80
75
 
81
- const server = new McpServer({ name: "techstore-pro", version: "1.0.0" });
76
+ const server = new McpServer({ name: "my-server", version: "1.0.0" });
82
77
 
83
- // Your business tools
84
- registerProductTools(server);
85
- registerOrderTools(server);
86
- // ...
78
+ // Add your own tools...
87
79
 
88
- // One line — branded UI for all element types
80
+ // One line — branded UI rendering for 15 element types
89
81
  await registerBranderTools(server, {
90
82
  projectId: process.env.BRANDER_PROJECT_ID!,
91
83
  betaKey: process.env.BRANDER_BETA_KEY!,
92
84
  });
93
-
94
- await server.connect(new StdioServerTransport());
95
85
  ```
96
86
 
97
- ## Development
98
-
99
- ```bash
100
- # Watch mode (auto-restarts on changes)
101
- npm run dev
102
-
103
- # Build for production
104
- npm run build
87
+ ## Environment Variables
105
88
 
106
- # Run built server
107
- npm start
108
- ```
89
+ | Variable | Required | Description |
90
+ |---|---|---|
91
+ | `BRANDER_PROJECT_ID` | Yes | Your BranderUX project ID |
92
+ | `BRANDER_BETA_KEY` | Yes | Design partner key (`bux_dp_...`) |
93
+ | `BRANDER_API_BASE_URL` | No | API URL (defaults to `https://branderux.com`) |
109
94
 
110
95
  ## License
111
96
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brander/mcp-demo",
3
- "version": "0.1.9",
3
+ "version": "0.1.11",
4
4
  "type": "module",
5
5
  "description": "BranderUX Demo — Explore BranderUX capabilities through branded UI",
6
6
  "bin": {
@@ -24,7 +24,7 @@
24
24
  "start": "node dist/index.js"
25
25
  },
26
26
  "dependencies": {
27
- "@brander/mcp-tools": "^0.2.9",
27
+ "@brander/mcp-tools": "^0.2.11",
28
28
  "@modelcontextprotocol/sdk": "^1.0.0",
29
29
  "zod": "^4.3.6"
30
30
  },