@mcp-b/react-components 0.6.1 → 0.6.3

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 (7) hide show
  1. package/dist/components/AgentChat.js +2 -1
  2. package/dist/components/AgentConnection.js +18 -10
  3. package/dist/components/McpServerPicker.js +26 -8
  4. package/dist/styles/mcp-server-picker.css +25 -9
  5. package/dist/utils/mcp-server-catalog.d.ts +53 -53
  6. package/dist/utils/mcp-server-catalog.js +10 -10
  7. package/package.json +2 -2
package/dist/components/AgentChat.js CHANGED
@@ -4,6 +4,7 @@ import { Activity, ActivityContent, ActivityPanel, ActivityTrigger } from "./Act
4
4
  import { Context, ContextContent, ContextContentBody, ContextContentHeader, ContextTrigger, getContextUsage, getContextUsedTokens } from "./Context.js";
5
5
  import { Conversation, ConversationContent, ConversationEmptyState, ConversationScrollButton } from "./Conversation.js";
6
6
  import { Message, MessageAction, MessageActions, MessageAttachment, MessageContent, MessageResponse } from "./Message.js";
7
+ import { MenuGroup, MenuGroupLabel } from "./Menu.js";
7
8
  import { PromptInput, PromptInputActionAddAttachments, PromptInputActionMenu, PromptInputActionMenuContent, PromptInputActionMenuTrigger, PromptInputApproval, PromptInputAttachments, PromptInputBody, PromptInputButton, PromptInputFooter, PromptInputPermissionSelector, PromptInputSubmit, PromptInputTextarea, PromptInputTools, getApprovalRequestId, getPendingToolApprovals, usePromptInputAttachments } from "./PromptInput.js";
8
9
  import { Reasoning, ReasoningContent, ReasoningTrigger } from "./Reasoning.js";
9
10
  import * as React from "react";
@@ -26,7 +27,7 @@ function AgentChatAddMenu({ children }) {
26
27
  sideOffset: 12,
27
28
  collisionPadding: 8,
28
29
  className: "agent-chat__add-menu",
29
- children: [/* @__PURE__ */ jsx(PromptInputActionAddAttachments, {}), children]
30
+ children: [/* @__PURE__ */ jsxs(MenuGroup, { children: [/* @__PURE__ */ jsx(MenuGroupLabel, { children: "Files" }), /* @__PURE__ */ jsx(PromptInputActionAddAttachments, {})] }), children]
30
31
  })] });
31
32
  }
32
33
  function isCompactedPart(message, part, partIndex) {
package/dist/components/AgentConnection.js CHANGED
@@ -144,11 +144,11 @@ function AgentConnectionPanel({ className, commands: commandsProp, dcrMcpServers
144
144
  children: [/* @__PURE__ */ jsxs(CodeBlockHeader, { children: [/* @__PURE__ */ jsx(CodeBlockTitle, { children: selected.label }), /* @__PURE__ */ jsx(CodeBlockActions, { children: /* @__PURE__ */ jsx(CodeBlockCopyButton, {}) })] }), /* @__PURE__ */ jsx(CodeBlockContainer, { children: /* @__PURE__ */ jsx(CodeBlockContent, {}) })]
145
145
  }),
146
146
  dcrMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
147
- heading: "DCR-ready MCP servers",
147
+ heading: "Auto",
148
148
  servers: dcrMcpServers
149
149
  }) : null,
150
150
  manualMcpServers.length > 0 ? /* @__PURE__ */ jsx(McpServerList, {
151
- heading: "Manual setup MCP servers",
151
+ heading: "Manual",
152
152
  servers: manualMcpServers
153
153
  }) : null
154
154
  ]
@@ -206,21 +206,29 @@ function McpServerSetup({ setup }) {
206
206
  }
207
207
  function renderMcpServerIcon(server) {
208
208
  const icon = server.icon;
209
- if (typeof icon === "string") return /* @__PURE__ */ jsx("img", {
209
+ if (typeof icon === "string") return /* @__PURE__ */ jsx(McpServerIconImage, {
210
210
  src: icon,
211
- alt: "",
212
- loading: "lazy",
213
- decoding: "async",
214
- referrerPolicy: "no-referrer"
211
+ name: server.name
215
212
  });
216
- if (icon) return /* @__PURE__ */ jsx("img", {
213
+ if (icon) return /* @__PURE__ */ jsx(McpServerIconImage, {
217
214
  src: icon.src,
215
+ name: server.name
216
+ });
217
+ return server.name.slice(0, 1);
218
+ }
219
+ function McpServerIconImage({ src, name }) {
220
+ const [failed, setFailed] = React.useState(false);
221
+ if (failed) return name.slice(0, 1);
222
+ return /* @__PURE__ */ jsx("img", {
223
+ src,
218
224
  alt: "",
225
+ width: 16,
226
+ height: 16,
219
227
  loading: "lazy",
220
228
  decoding: "async",
221
- referrerPolicy: "no-referrer"
229
+ referrerPolicy: "no-referrer",
230
+ onError: () => setFailed(true)
222
231
  });
223
- return server.name.slice(0, 1);
224
232
  }
225
233
  /**
226
234
  * Compact popover trigger for showing AgentConnectionPanel inline.
package/dist/components/McpServerPicker.js CHANGED
@@ -17,14 +17,14 @@ function McpServerPicker({ servers, onConnect, sideOffset = 80 }) {
17
17
  color: "neutral",
18
18
  size: "icon-xs",
19
19
  className: "mcp-server-picker__trigger",
20
- "aria-label": "Add MCP server",
20
+ "aria-label": "Add server",
21
21
  children: /* @__PURE__ */ jsx(PlusIcon, {})
22
22
  }) }), /* @__PURE__ */ jsx(MenuContent, {
23
23
  side: "top",
24
24
  align: "start",
25
25
  sideOffset,
26
26
  collisionPadding: 8,
27
- "aria-label": "MCP servers",
27
+ "aria-label": "Servers",
28
28
  className: "mcp-server-picker__popup",
29
29
  children: /* @__PURE__ */ jsx(McpServerPickerItems, {
30
30
  servers,
@@ -39,7 +39,7 @@ function McpServerPickerItems({ servers, onConnect }) {
39
39
  if (servers.length === 0) return /* @__PURE__ */ jsx(MenuItem, {
40
40
  disabled: true,
41
41
  className: "mcp-server-picker__empty",
42
- children: "No MCP servers available."
42
+ children: "No servers available."
43
43
  });
44
44
  return groups.map((group) => /* @__PURE__ */ jsxs(MenuGroup, {
45
45
  className: "mcp-server-picker__group",
@@ -80,7 +80,11 @@ function McpServerPickerRow({ server, onConnect }) {
80
80
  }),
81
81
  statusText ? /* @__PURE__ */ jsxs(MenuShortcut, {
82
82
  className: "mcp-server-picker__meta",
83
- children: [/* @__PURE__ */ jsx(StatusIcon, { status: server.status }), /* @__PURE__ */ jsx("span", { children: statusText })]
83
+ title: statusText,
84
+ children: [/* @__PURE__ */ jsx(StatusIcon, { status: server.status }), /* @__PURE__ */ jsx("span", {
85
+ className: "mcp-server-picker__status-label",
86
+ children: statusText
87
+ })]
84
88
  }) : null
85
89
  ]
86
90
  });
@@ -103,20 +107,34 @@ function getStatusLabel(status) {
103
107
  return "";
104
108
  }
105
109
  function renderIcon(icon, name) {
106
- if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, { src: icon });
107
- if (icon) return /* @__PURE__ */ jsx(IconImage, { src: icon.src });
110
+ if (typeof icon === "string") return /* @__PURE__ */ jsx(IconImage, {
111
+ src: icon,
112
+ name
113
+ });
114
+ if (icon) return /* @__PURE__ */ jsx(IconImage, {
115
+ src: icon.src,
116
+ name
117
+ });
108
118
  return /* @__PURE__ */ jsx("span", {
109
119
  className: "mcp-server-picker__fallback-icon",
110
120
  children: name.slice(0, 1)
111
121
  });
112
122
  }
113
- function IconImage({ src }) {
123
+ function IconImage({ src, name }) {
124
+ const [failed, setFailed] = React.useState(false);
125
+ if (failed) return /* @__PURE__ */ jsx("span", {
126
+ className: "mcp-server-picker__fallback-icon",
127
+ children: name.slice(0, 1)
128
+ });
114
129
  return /* @__PURE__ */ jsx("img", {
115
130
  src,
116
131
  alt: "",
132
+ width: 20,
133
+ height: 20,
117
134
  loading: "lazy",
118
135
  decoding: "async",
119
- referrerPolicy: "no-referrer"
136
+ referrerPolicy: "no-referrer",
137
+ onError: () => setFailed(true)
120
138
  });
121
139
  }
122
140
  function groupServers(servers) {
package/dist/styles/mcp-server-picker.css CHANGED
@@ -27,8 +27,10 @@
27
27
  }
28
28
 
29
29
  .mcp-server-picker__row {
30
- min-block-size: 2.5rem;
31
- gap: 0.75rem;
30
+ min-block-size: 2rem;
31
+ gap: 0.5rem;
32
+ padding-block: 0.3125rem;
33
+ padding-inline: 0.5rem;
32
34
  overflow: hidden;
33
35
  }
34
36
 
@@ -37,16 +39,16 @@
37
39
  flex: 0 0 auto;
38
40
  align-items: center;
39
41
  justify-content: center;
40
- inline-size: 1.5rem;
41
- block-size: 1.5rem;
42
+ inline-size: 1.25rem;
43
+ block-size: 1.25rem;
42
44
  color: var(--sigvelo-color-text-muted);
43
45
  }
44
46
 
45
47
  .mcp-server-picker__icon > img,
46
48
  .mcp-server-picker__icon > svg {
47
49
  display: block;
48
- inline-size: 1.25rem;
49
- block-size: 1.25rem;
50
+ inline-size: 1rem;
51
+ block-size: 1rem;
50
52
  object-fit: contain;
51
53
  }
52
54
 
@@ -54,8 +56,8 @@
54
56
  display: inline-flex;
55
57
  align-items: center;
56
58
  justify-content: center;
57
- inline-size: 1.375rem;
58
- block-size: 1.375rem;
59
+ inline-size: 1.125rem;
60
+ block-size: 1.125rem;
59
61
  border-radius: var(--sigvelo-radius-sm);
60
62
  background-color: var(--sigvelo-color-neutral-bg-subtle);
61
63
  color: var(--sigvelo-color-neutral-text-on-subtle);
@@ -79,6 +81,7 @@
79
81
 
80
82
  .mcp-server-picker__description {
81
83
  min-inline-size: 0;
84
+ max-inline-size: 20rem;
82
85
  overflow: hidden;
83
86
  color: var(--sigvelo-color-text-muted);
84
87
  text-overflow: ellipsis;
@@ -88,10 +91,23 @@
88
91
  .mcp-server-picker__meta {
89
92
  display: inline-flex;
90
93
  align-items: center;
91
- gap: 0.375rem;
94
+ justify-content: center;
95
+ inline-size: 1rem;
92
96
  min-inline-size: max-content;
93
97
  }
94
98
 
99
+ .mcp-server-picker__status-label {
100
+ position: absolute;
101
+ inline-size: 1px;
102
+ block-size: 1px;
103
+ padding: 0;
104
+ margin: -1px;
105
+ overflow: hidden;
106
+ clip-path: inset(50%);
107
+ white-space: nowrap;
108
+ border: 0;
109
+ }
110
+
95
111
  .mcp-server-picker__row[data-status="ready"] .mcp-server-picker__meta {
96
112
  color: var(--sigvelo-color-success-text-on-subtle);
97
113
  }
package/dist/utils/mcp-server-catalog.d.ts CHANGED
@@ -28,224 +28,224 @@ declare const DCR_MCP_SERVER_CARDS: readonly [{
28
28
  readonly name: "Airtable";
29
29
  readonly url: "https://mcp.airtable.com/mcp";
30
30
  readonly description: "Work with Airtable bases and records";
31
- readonly category: "DCR MCP servers";
31
+ readonly category: "Auto";
32
32
  readonly icon: "https://cdn.simpleicons.org/airtable/18BFFF";
33
33
  }, {
34
34
  readonly id: "atlassian";
35
35
  readonly name: "Atlassian";
36
36
  readonly url: "https://mcp.atlassian.com/v1/mcp/authv2";
37
37
  readonly description: "Use Jira, Confluence, and Compass";
38
- readonly category: "DCR MCP servers";
38
+ readonly category: "Auto";
39
39
  readonly icon: "https://cdn.simpleicons.org/atlassian/0052CC";
40
40
  }, {
41
41
  readonly id: "canva";
42
42
  readonly name: "Canva";
43
43
  readonly url: "https://mcp.canva.com/mcp";
44
44
  readonly description: "Create and edit Canva designs";
45
- readonly category: "DCR MCP servers";
46
- readonly icon: "https://cdn.simpleicons.org/canva/00C4CC";
45
+ readonly category: "Auto";
46
+ readonly icon: "https://www.canva.com/favicon.ico";
47
47
  }, {
48
48
  readonly id: "calendly";
49
49
  readonly name: "Calendly";
50
50
  readonly url: "https://mcp.calendly.com";
51
51
  readonly description: "Work with scheduling links and events";
52
- readonly category: "DCR MCP servers";
52
+ readonly category: "Auto";
53
53
  readonly icon: "https://cdn.simpleicons.org/calendly/006BFF";
54
54
  }, {
55
55
  readonly id: "clickup";
56
56
  readonly name: "ClickUp";
57
57
  readonly url: "https://mcp.clickup.com/mcp";
58
58
  readonly description: "Access tasks, docs, and workspace data";
59
- readonly category: "DCR MCP servers";
59
+ readonly category: "Auto";
60
60
  readonly icon: "https://cdn.simpleicons.org/clickup/7B68EE";
61
61
  }, {
62
62
  readonly id: "close";
63
63
  readonly name: "Close";
64
64
  readonly url: "https://mcp.close.com/mcp";
65
65
  readonly description: "Access CRM leads and sales activity";
66
- readonly category: "DCR MCP servers";
67
- readonly icon: "https://cdn.simpleicons.org/close/004DFF";
66
+ readonly category: "Auto";
67
+ readonly icon: "https://cdn.prod.website-files.com/61717799a852418a278cfa9b/69e787e66659174d6c555923_favicon.png";
68
68
  }, {
69
69
  readonly id: "cloudflare";
70
70
  readonly name: "Cloudflare";
71
71
  readonly url: "https://mcp.cloudflare.com/mcp";
72
72
  readonly description: "Manage Cloudflare resources";
73
- readonly category: "DCR MCP servers";
73
+ readonly category: "Auto";
74
74
  readonly icon: "https://cdn.simpleicons.org/cloudflare/F38020";
75
75
  }, {
76
76
  readonly id: "datadog";
77
77
  readonly name: "Datadog";
78
78
  readonly url: "https://mcp.datadoghq.com/v1/mcp";
79
79
  readonly description: "Inspect monitoring and observability data";
80
- readonly category: "DCR MCP servers";
80
+ readonly category: "Auto";
81
81
  readonly icon: "https://cdn.simpleicons.org/datadog/632CA6";
82
82
  }, {
83
83
  readonly id: "egnyte";
84
84
  readonly name: "Egnyte";
85
85
  readonly url: "https://mcp-server.egnyte.com/mcp";
86
86
  readonly description: "Search and manage Egnyte files";
87
- readonly category: "DCR MCP servers";
87
+ readonly category: "Auto";
88
88
  readonly icon: "https://cdn.simpleicons.org/egnyte/00968F";
89
89
  }, {
90
90
  readonly id: "figma";
91
91
  readonly name: "Figma";
92
92
  readonly url: "https://mcp.figma.com/mcp";
93
93
  readonly description: "Use design context and canvas tools";
94
- readonly category: "DCR MCP servers";
94
+ readonly category: "Auto";
95
95
  readonly icon: "https://cdn.simpleicons.org/figma/F24E1E";
96
96
  }, {
97
97
  readonly id: "grafana";
98
98
  readonly name: "Grafana";
99
99
  readonly url: "https://mcp.grafana.com/mcp";
100
100
  readonly description: "Inspect observability data";
101
- readonly category: "DCR MCP servers";
101
+ readonly category: "Auto";
102
102
  readonly icon: "https://cdn.simpleicons.org/grafana/F46800";
103
103
  }, {
104
104
  readonly id: "gitlab";
105
105
  readonly name: "GitLab";
106
106
  readonly url: "https://gitlab.com/api/v4/mcp";
107
107
  readonly description: "Work with repositories and GitLab Duo";
108
- readonly category: "DCR MCP servers";
108
+ readonly category: "Auto";
109
109
  readonly icon: "https://cdn.simpleicons.org/gitlab/FC6D26";
110
110
  }, {
111
111
  readonly id: "huggingface";
112
112
  readonly name: "Hugging Face";
113
113
  readonly url: "https://huggingface.co/mcp";
114
114
  readonly description: "Use Hub resources and AI apps";
115
- readonly category: "DCR MCP servers";
115
+ readonly category: "Auto";
116
116
  readonly icon: "https://cdn.simpleicons.org/huggingface/FFD21E";
117
117
  }, {
118
118
  readonly id: "indeed";
119
119
  readonly name: "Indeed";
120
120
  readonly url: "https://mcp.indeed.com/claude/mcp";
121
121
  readonly description: "Use Indeed hiring context";
122
- readonly category: "DCR MCP servers";
122
+ readonly category: "Auto";
123
123
  readonly icon: "https://cdn.simpleicons.org/indeed/003A9B";
124
124
  }, {
125
125
  readonly id: "intercom";
126
126
  readonly name: "Intercom";
127
127
  readonly url: "https://mcp.intercom.com/mcp";
128
128
  readonly description: "Work with customer support data";
129
- readonly category: "DCR MCP servers";
129
+ readonly category: "Auto";
130
130
  readonly icon: "https://cdn.simpleicons.org/intercom/6AFDEF";
131
131
  }, {
132
132
  readonly id: "linear";
133
133
  readonly name: "Linear";
134
134
  readonly url: "https://mcp.linear.app/mcp";
135
135
  readonly description: "Plan and build products";
136
- readonly category: "DCR MCP servers";
136
+ readonly category: "Auto";
137
137
  readonly icon: "https://cdn.simpleicons.org/linear/5E6AD2";
138
138
  }, {
139
139
  readonly id: "miro";
140
140
  readonly name: "Miro";
141
141
  readonly url: "https://mcp.miro.com/mcp";
142
142
  readonly description: "Work with boards and diagrams";
143
- readonly category: "DCR MCP servers";
143
+ readonly category: "Auto";
144
144
  readonly icon: "https://cdn.simpleicons.org/miro/FFD02F";
145
145
  }, {
146
146
  readonly id: "monday";
147
147
  readonly name: "monday.com";
148
148
  readonly url: "https://mcp.monday.com/mcp";
149
149
  readonly description: "Access monday.com workspace data";
150
- readonly category: "DCR MCP servers";
151
- readonly icon: "https://cdn.simpleicons.org/mondaydotcom/FF3D57";
150
+ readonly category: "Auto";
151
+ readonly icon: "https://monday.com/favicon.ico";
152
152
  }, {
153
153
  readonly id: "neon";
154
154
  readonly name: "Neon";
155
155
  readonly url: "https://mcp.neon.tech/mcp";
156
156
  readonly description: "Manage Neon Postgres projects";
157
- readonly category: "DCR MCP servers";
157
+ readonly category: "Auto";
158
158
  readonly icon: "https://cdn.simpleicons.org/neon/00E599";
159
159
  }, {
160
160
  readonly id: "notion";
161
161
  readonly name: "Notion";
162
162
  readonly url: "https://mcp.notion.com/mcp";
163
163
  readonly description: "Work across docs, wikis, and project notes";
164
- readonly category: "DCR MCP servers";
164
+ readonly category: "Auto";
165
165
  readonly icon: "https://cdn.simpleicons.org/notion/A1A1AA";
166
166
  }, {
167
167
  readonly id: "paypal";
168
168
  readonly name: "PayPal";
169
169
  readonly url: "https://mcp.paypal.com/http";
170
170
  readonly description: "Use PayPal merchant tools";
171
- readonly category: "DCR MCP servers";
171
+ readonly category: "Auto";
172
172
  readonly icon: "https://cdn.simpleicons.org/paypal/003087";
173
173
  }, {
174
174
  readonly id: "postman";
175
175
  readonly name: "Postman";
176
176
  readonly url: "https://mcp.postman.com/mcp";
177
177
  readonly description: "Inspect and use API collections";
178
- readonly category: "DCR MCP servers";
178
+ readonly category: "Auto";
179
179
  readonly icon: "https://cdn.simpleicons.org/postman/FF6C37";
180
180
  }, {
181
181
  readonly id: "railway";
182
182
  readonly name: "Railway";
183
183
  readonly url: "https://mcp.railway.com";
184
184
  readonly description: "Manage Railway projects and services";
185
- readonly category: "DCR MCP servers";
185
+ readonly category: "Auto";
186
186
  readonly icon: "https://cdn.simpleicons.org/railway/8957E5";
187
187
  }, {
188
188
  readonly id: "ramp";
189
189
  readonly name: "Ramp";
190
190
  readonly url: "https://ramp-mcp-remote.ramp.com/mcp";
191
191
  readonly description: "Use finance and spend management data";
192
- readonly category: "DCR MCP servers";
193
- readonly icon: "https://cdn.simpleicons.org/ramp/00D26A";
192
+ readonly category: "Auto";
193
+ readonly icon: "https://ramp.com/favicon.ico";
194
194
  }, {
195
195
  readonly id: "sentry";
196
196
  readonly name: "Sentry";
197
197
  readonly url: "https://mcp.sentry.dev/mcp";
198
198
  readonly description: "Debug errors and inspect projects";
199
- readonly category: "DCR MCP servers";
199
+ readonly category: "Auto";
200
200
  readonly icon: "https://cdn.simpleicons.org/sentry/8957E5";
201
201
  }, {
202
202
  readonly id: "square";
203
203
  readonly name: "Square";
204
204
  readonly url: "https://mcp.squareup.com/sse";
205
205
  readonly description: "Use Square APIs and merchant data";
206
- readonly category: "DCR MCP servers";
206
+ readonly category: "Auto";
207
207
  readonly icon: "https://cdn.simpleicons.org/square/3E4348";
208
208
  }, {
209
209
  readonly id: "stripe";
210
210
  readonly name: "Stripe";
211
211
  readonly url: "https://mcp.stripe.com";
212
212
  readonly description: "Interact with Stripe APIs and docs";
213
- readonly category: "DCR MCP servers";
213
+ readonly category: "Auto";
214
214
  readonly icon: "https://cdn.simpleicons.org/stripe/635BFF";
215
215
  }, {
216
216
  readonly id: "supabase";
217
217
  readonly name: "Supabase";
218
218
  readonly url: "https://mcp.supabase.com/mcp";
219
219
  readonly description: "Manage Supabase projects";
220
- readonly category: "DCR MCP servers";
220
+ readonly category: "Auto";
221
221
  readonly icon: "https://cdn.simpleicons.org/supabase/3ECF8E";
222
222
  }, {
223
223
  readonly id: "vercel";
224
224
  readonly name: "Vercel";
225
225
  readonly url: "https://mcp.vercel.com";
226
226
  readonly description: "Manage projects and deployments";
227
- readonly category: "DCR MCP servers";
227
+ readonly category: "Auto";
228
228
  readonly icon: "https://cdn.simpleicons.org/vercel/A1A1AA";
229
229
  }, {
230
230
  readonly id: "webflow";
231
231
  readonly name: "Webflow";
232
232
  readonly url: "https://mcp.webflow.com/mcp";
233
233
  readonly description: "Work with Webflow sites and CMS";
234
- readonly category: "DCR MCP servers";
234
+ readonly category: "Auto";
235
235
  readonly icon: "https://cdn.simpleicons.org/webflow/146EF5";
236
236
  }, {
237
237
  readonly id: "wix";
238
238
  readonly name: "Wix";
239
239
  readonly url: "https://mcp.wix.com/mcp";
240
240
  readonly description: "Work with Wix sites and apps";
241
- readonly category: "DCR MCP servers";
241
+ readonly category: "Auto";
242
242
  readonly icon: "https://cdn.simpleicons.org/wix/A1A1AA";
243
243
  }, {
244
244
  readonly id: "zapier";
245
245
  readonly name: "Zapier";
246
246
  readonly url: "https://mcp.zapier.com/api/v1/connect";
247
247
  readonly description: "Connect actions across apps";
248
- readonly category: "DCR MCP servers";
248
+ readonly category: "Auto";
249
249
  readonly icon: "https://cdn.simpleicons.org/zapier/FF4F00";
250
250
  }];
251
251
  /** High-signal remote MCP servers that require manual setup instead of DCR. */
@@ -254,7 +254,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
254
254
  readonly name: "Asana";
255
255
  readonly url: "https://mcp.asana.com/v2/mcp";
256
256
  readonly description: "Manage tasks, projects, and goals";
257
- readonly category: "Manual setup MCP servers";
257
+ readonly category: "Manual";
258
258
  readonly icon: "https://cdn.simpleicons.org/asana/F06A6A";
259
259
  readonly manualSetup: {
260
260
  readonly description: "Create an Asana MCP app, configure its redirect URL and workspace distribution, then connect with the app client ID and secret.";
@@ -274,7 +274,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
274
274
  readonly name: "Gmail";
275
275
  readonly url: "https://gmailmcp.googleapis.com/mcp/v1";
276
276
  readonly description: "Read and draft Gmail messages";
277
- readonly category: "Manual setup MCP servers";
277
+ readonly category: "Manual";
278
278
  readonly icon: "https://cdn.simpleicons.org/gmail/EA4335";
279
279
  readonly manualSetup: {
280
280
  readonly description: "Enable Gmail and Gmail MCP APIs, configure OAuth consent, add Gmail read/compose scopes, and create a web OAuth client.";
@@ -297,7 +297,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
297
297
  readonly name: "Google Calendar";
298
298
  readonly url: "https://calendarmcp.googleapis.com/mcp/v1";
299
299
  readonly description: "Inspect calendars, events, and availability";
300
- readonly category: "Manual setup MCP servers";
300
+ readonly category: "Manual";
301
301
  readonly icon: "https://cdn.simpleicons.org/googlecalendar/4285F4";
302
302
  readonly manualSetup: {
303
303
  readonly description: "Enable Calendar and Calendar MCP APIs, configure OAuth consent, add calendar read/freebusy scopes, and create a web OAuth client.";
@@ -320,7 +320,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
320
320
  readonly name: "Google Chat";
321
321
  readonly url: "https://chatmcp.googleapis.com/mcp/v1";
322
322
  readonly description: "Read spaces, memberships, and messages";
323
- readonly category: "Manual setup MCP servers";
323
+ readonly category: "Manual";
324
324
  readonly icon: "https://cdn.simpleicons.org/googlechat/00AC47";
325
325
  readonly manualSetup: {
326
326
  readonly description: "Enable Chat and Chat MCP APIs, configure a Chat app, add Chat read/send scopes, and create a web OAuth client.";
@@ -343,7 +343,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
343
343
  readonly name: "Google Drive";
344
344
  readonly url: "https://drivemcp.googleapis.com/mcp/v1";
345
345
  readonly description: "Search and manage Drive files";
346
- readonly category: "Manual setup MCP servers";
346
+ readonly category: "Manual";
347
347
  readonly icon: "https://cdn.simpleicons.org/googledrive/4285F4";
348
348
  readonly manualSetup: {
349
349
  readonly description: "Enable Drive and Drive MCP APIs, configure OAuth consent, add Drive read/file scopes, and create a web OAuth client.";
@@ -366,7 +366,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
366
366
  readonly name: "Google People API";
367
367
  readonly url: "https://people.googleapis.com/mcp/v1";
368
368
  readonly description: "Read contacts, profiles, and directory data";
369
- readonly category: "Manual setup MCP servers";
369
+ readonly category: "Manual";
370
370
  readonly icon: "https://cdn.simpleicons.org/google/4285F4";
371
371
  readonly manualSetup: {
372
372
  readonly description: "Enable People API, configure OAuth consent, add contacts/profile/directory scopes, and create a web OAuth client.";
@@ -389,7 +389,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
389
389
  readonly name: "Google Workspace Universal Search";
390
390
  readonly url: "https://workspacemcp.googleapis.com/mcp/v1";
391
391
  readonly description: "Search Gmail, Drive, Calendar, and Chat";
392
- readonly category: "Manual setup MCP servers";
392
+ readonly category: "Manual";
393
393
  readonly icon: "https://cdn.simpleicons.org/google/4285F4";
394
394
  readonly manualSetup: {
395
395
  readonly description: "Enable the Workspace MCP service plus Gmail, Drive, Calendar, and Chat APIs, then configure OAuth consent and readonly search scopes.";
@@ -412,7 +412,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
412
412
  readonly name: "HubSpot";
413
413
  readonly url: "https://mcp.hubspot.com";
414
414
  readonly description: "Work with CRM records and activities";
415
- readonly category: "Manual setup MCP servers";
415
+ readonly category: "Manual";
416
416
  readonly icon: "https://cdn.simpleicons.org/hubspot/FF7A59";
417
417
  readonly manualSetup: {
418
418
  readonly description: "Create a HubSpot MCP Auth App, configure the redirect URL, and connect with OAuth credentials from a PKCE-capable client.";
@@ -429,8 +429,8 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
429
429
  readonly name: "Microsoft Enterprise";
430
430
  readonly url: "https://mcp.svc.cloud.microsoft/enterprise";
431
431
  readonly description: "Query Microsoft Graph tenant data";
432
- readonly category: "Manual setup MCP servers";
433
- readonly icon: "https://cdn.simpleicons.org/microsoft/5E5E5E";
432
+ readonly category: "Manual";
433
+ readonly icon: "https://www.microsoft.com/favicon.ico";
434
434
  readonly manualSetup: {
435
435
  readonly description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.";
436
436
  readonly links: readonly [{
@@ -446,8 +446,8 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
446
446
  readonly name: "Microsoft Release Communications";
447
447
  readonly url: "https://www.microsoft.com/releasecommunications/mcp";
448
448
  readonly description: "Check Microsoft 365 roadmap and Azure updates";
449
- readonly category: "Manual setup MCP servers";
450
- readonly icon: "https://cdn.simpleicons.org/microsoft/5E5E5E";
449
+ readonly category: "Manual";
450
+ readonly icon: "https://www.microsoft.com/favicon.ico";
451
451
  readonly manualSetup: {
452
452
  readonly description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.";
453
453
  readonly links: readonly [{
@@ -460,8 +460,8 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
460
460
  readonly name: "Salesforce SObject Reads";
461
461
  readonly url: "https://api.salesforce.com/platform/mcp/v1/platform/sobject-reads";
462
462
  readonly description: "Read and query Salesforce CRM records";
463
- readonly category: "Manual setup MCP servers";
464
- readonly icon: "https://cdn.simpleicons.org/salesforce/00A1E0";
463
+ readonly category: "Manual";
464
+ readonly icon: "https://www.salesforce.com/favicon.ico";
465
465
  readonly manualSetup: {
466
466
  readonly description: "Create a Salesforce External Client App with mcp_api and refresh_token scopes, require PKCE, activate the hosted server, and connect with the consumer key.";
467
467
  readonly links: readonly [{
@@ -480,8 +480,8 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
480
480
  readonly name: "Slack";
481
481
  readonly url: "https://mcp.slack.com/mcp";
482
482
  readonly description: "Search channels, send messages, and manage canvases";
483
- readonly category: "Manual setup MCP servers";
484
- readonly icon: "https://cdn.simpleicons.org/slack/4A154B";
483
+ readonly category: "Manual";
484
+ readonly icon: "https://slack.com/favicon.ico";
485
485
  readonly manualSetup: {
486
486
  readonly description: "Create or reuse a Slack app, enable MCP access, add user scopes and redirect URLs, then connect with the app client ID and secret.";
487
487
  readonly links: readonly [{
@@ -500,7 +500,7 @@ declare const MANUAL_MCP_SERVER_CARDS: readonly [{
500
500
  readonly name: "Zoom Workspace";
501
501
  readonly url: "https://mcp.zoom.us/mcp/zoom/streamable";
502
502
  readonly description: "Use meetings, recordings, docs, and transcripts";
503
- readonly category: "Manual setup MCP servers";
503
+ readonly category: "Manual";
504
504
  readonly icon: "https://cdn.simpleicons.org/zoom/0B5CFF";
505
505
  readonly manualSetup: {
506
506
  readonly description: "Create a Zoom Marketplace General app, add the MCP product scopes, configure the client redirect URL, and connect with OAuth credentials.";
package/dist/utils/mcp-server-catalog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  //#region src/utils/mcp-server-catalog.ts
2
- const DCR_CATEGORY = "DCR MCP servers";
3
- const MANUAL_CATEGORY = "Manual setup MCP servers";
2
+ const DCR_CATEGORY = "Auto";
3
+ const MANUAL_CATEGORY = "Manual";
4
4
  /** Remote MCP servers whose OAuth metadata exposes a registration_endpoint. */
5
5
  const DCR_MCP_SERVER_CARDS = [
6
6
  {
@@ -25,7 +25,7 @@ const DCR_MCP_SERVER_CARDS = [
25
25
  url: "https://mcp.canva.com/mcp",
26
26
  description: "Create and edit Canva designs",
27
27
  category: DCR_CATEGORY,
28
- icon: "https://cdn.simpleicons.org/canva/00C4CC"
28
+ icon: "https://www.canva.com/favicon.ico"
29
29
  },
30
30
  {
31
31
  id: "calendly",
@@ -49,7 +49,7 @@ const DCR_MCP_SERVER_CARDS = [
49
49
  url: "https://mcp.close.com/mcp",
50
50
  description: "Access CRM leads and sales activity",
51
51
  category: DCR_CATEGORY,
52
- icon: "https://cdn.simpleicons.org/close/004DFF"
52
+ icon: "https://cdn.prod.website-files.com/61717799a852418a278cfa9b/69e787e66659174d6c555923_favicon.png"
53
53
  },
54
54
  {
55
55
  id: "cloudflare",
@@ -145,7 +145,7 @@ const DCR_MCP_SERVER_CARDS = [
145
145
  url: "https://mcp.monday.com/mcp",
146
146
  description: "Access monday.com workspace data",
147
147
  category: DCR_CATEGORY,
148
- icon: "https://cdn.simpleicons.org/mondaydotcom/FF3D57"
148
+ icon: "https://monday.com/favicon.ico"
149
149
  },
150
150
  {
151
151
  id: "neon",
@@ -193,7 +193,7 @@ const DCR_MCP_SERVER_CARDS = [
193
193
  url: "https://ramp-mcp-remote.ramp.com/mcp",
194
194
  description: "Use finance and spend management data",
195
195
  category: DCR_CATEGORY,
196
- icon: "https://cdn.simpleicons.org/ramp/00D26A"
196
+ icon: "https://ramp.com/favicon.ico"
197
197
  },
198
198
  {
199
199
  id: "sentry",
@@ -485,7 +485,7 @@ const MANUAL_MCP_SERVER_CARDS = [
485
485
  url: "https://mcp.svc.cloud.microsoft/enterprise",
486
486
  description: "Query Microsoft Graph tenant data",
487
487
  category: MANUAL_CATEGORY,
488
- icon: "https://cdn.simpleicons.org/microsoft/5E5E5E",
488
+ icon: "https://www.microsoft.com/favicon.ico",
489
489
  manualSetup: {
490
490
  description: "Provision the preview tenant resource, register the client, grant delegated MCP permissions, and connect with Microsoft Entra OAuth.",
491
491
  links: [{
@@ -503,7 +503,7 @@ const MANUAL_MCP_SERVER_CARDS = [
503
503
  url: "https://www.microsoft.com/releasecommunications/mcp",
504
504
  description: "Check Microsoft 365 roadmap and Azure updates",
505
505
  category: MANUAL_CATEGORY,
506
- icon: "https://cdn.simpleicons.org/microsoft/5E5E5E",
506
+ icon: "https://www.microsoft.com/favicon.ico",
507
507
  manualSetup: {
508
508
  description: "No OAuth is required; add the Streamable HTTP endpoint directly to the MCP client.",
509
509
  links: [{
@@ -518,7 +518,7 @@ const MANUAL_MCP_SERVER_CARDS = [
518
518
  url: "https://api.salesforce.com/platform/mcp/v1/platform/sobject-reads",
519
519
  description: "Read and query Salesforce CRM records",
520
520
  category: MANUAL_CATEGORY,
521
- icon: "https://cdn.simpleicons.org/salesforce/00A1E0",
521
+ icon: "https://www.salesforce.com/favicon.ico",
522
522
  manualSetup: {
523
523
  description: "Create a Salesforce External Client App with mcp_api and refresh_token scopes, require PKCE, activate the hosted server, and connect with the consumer key.",
524
524
  links: [
@@ -543,7 +543,7 @@ const MANUAL_MCP_SERVER_CARDS = [
543
543
  url: "https://mcp.slack.com/mcp",
544
544
  description: "Search channels, send messages, and manage canvases",
545
545
  category: MANUAL_CATEGORY,
546
- icon: "https://cdn.simpleicons.org/slack/4A154B",
546
+ icon: "https://slack.com/favicon.ico",
547
547
  manualSetup: {
548
548
  description: "Create or reuse a Slack app, enable MCP access, add user scopes and redirect URLs, then connect with the app client ID and secret.",
549
549
  links: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mcp-b/react-components",
3
- "version": "0.6.1",
3
+ "version": "0.6.3",
4
4
  "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
5
5
  "homepage": "https://design-system.sigvelo.com",
6
6
  "bugs": {
@@ -49,7 +49,7 @@
49
49
  "anser": "^2.3.5",
50
50
  "shiki": "^3.23.0",
51
51
  "streamdown": "^2.5.0",
52
- "@mcp-b/design-tokens": "0.6.1"
52
+ "@mcp-b/design-tokens": "0.6.3"
53
53
  },
54
54
  "devDependencies": {
55
55
  "@ai-sdk/react": "^3.0.194",