konnosDashboard
constants.tsx647 lines · main
1import Image from 'next/image'
2import { CodeBlock } from 'ui-patterns/CodeBlock'
3
4import antigravityAuthenticateScreenshot from './assets/antigravity-authenticate-screenshot.png'
5import type {
6 AntigravityMcpConfig,
7 ClaudeCodeMcpConfig,
8 CodexMcpConfig,
9 CopilotMcpConfig,
10 FactoryMcpConfig,
11 GeminiMcpConfig,
12 GooseMcpConfig,
13 McpClient,
14 McpFeatureGroup,
15 OpenCodeMcpConfig,
16 VSCodeMcpConfig,
17 WindsurfMcpConfig,
18} from './types'
19import { getMcpUrl } from './types'
20
21export const FEATURE_GROUPS_PLATFORM: McpFeatureGroup[] = [
22 {
23 id: 'docs',
24 name: 'Documentation',
25 description: 'Access Briven documentation and guides',
26 },
27 {
28 id: 'account',
29 name: 'Account',
30 description: 'Manage account settings and preferences',
31 },
32 {
33 id: 'database',
34 name: 'Database',
35 description: 'Query and manage database schema and data',
36 },
37 {
38 id: 'debugging',
39 name: 'Debugging',
40 description: 'Debug and troubleshoot issues',
41 },
42 {
43 id: 'development',
44 name: 'Development',
45 description: 'Development tools and utilities',
46 },
47 {
48 id: 'functions',
49 name: 'Functions',
50 description: 'Manage and deploy Edge Functions',
51 },
52 {
53 id: 'branching',
54 name: 'Branching',
55 description: 'Manage database branches',
56 },
57 {
58 id: 'storage',
59 name: 'Storage',
60 description: 'Manage files and storage buckets',
61 },
62]
63
64export const FEATURE_GROUPS_NON_PLATFORM = FEATURE_GROUPS_PLATFORM.filter((group) =>
65 ['docs', 'database', 'development', 'debugging'].includes(group.id)
66)
67
68/** Only set hasDistinctDarkIcon: true when the client has a separate -icon-dark.svg that looks different. Otherwise the same -icon.svg is used for both themes. */
69export const MCP_CLIENTS: McpClient[] = [
70 {
71 key: 'claude-code',
72 label: 'Claude Code',
73 icon: 'claude',
74 configFile: '.mcp.json',
75 externalDocsUrl: 'https://code.claude.com/docs/en/mcp',
76 transformConfig: (config): ClaudeCodeMcpConfig => {
77 return {
78 mcpServers: {
79 briven: {
80 type: 'http',
81 url: config.mcpServers.briven.url,
82 },
83 },
84 }
85 },
86 primaryInstructions: (_config, onCopy) => {
87 const config = _config as ClaudeCodeMcpConfig
88 const command = `claude mcp add --scope project --transport http briven "${config.mcpServers.briven.url}"`
89 return (
90 <div className="space-y-2">
91 <p className="text-xs text-foreground-light">
92 Add the MCP server to your project config using the command line:
93 </p>
94 <CodeBlock
95 value={command}
96 language="bash"
97 focusable={false}
98 // This is a no-op but the CodeBlock component is designed to output
99 // inline code if no className is given
100 className="block"
101 onCopyCallback={() => onCopy('command')}
102 />
103 </div>
104 )
105 },
106 alternateInstructions: (_config, onCopy) => (
107 <div className="space-y-2">
108 <p className="text-xs text-foreground-light">
109 After configuring the MCP server, you need to authenticate. In a regular terminal (not the
110 IDE extension) run:
111 </p>
112 <CodeBlock
113 value="claude /mcp"
114 language="bash"
115 focusable={false}
116 className="block"
117 onCopyCallback={() => onCopy('command')}
118 />
119 <p className="text-xs text-foreground-light">
120 Select the "briven" server, then "Authenticate" to begin the authentication flow.
121 </p>
122 </div>
123 ),
124 },
125 {
126 key: 'cursor',
127 label: 'Cursor',
128 icon: 'cursor',
129 configFile: '.cursor/mcp.json',
130 externalDocsUrl: 'https://docs.cursor.com/context/mcp',
131 generateDeepLink: (config) => {
132 const name = 'briven'
133 const mcpUrl = getMcpUrl(config)
134 const serverConfig = {
135 url: mcpUrl,
136 }
137 const base64Config = Buffer.from(JSON.stringify(serverConfig)).toString('base64')
138 return `cursor://anysphere.cursor-deeplink/mcp/install?name=${name}&config=${encodeURIComponent(base64Config)}`
139 },
140 },
141 {
142 key: 'vscode',
143 label: 'VS Code',
144 icon: 'vscode',
145 configFile: '.vscode/mcp.json',
146 externalDocsUrl: 'https://code.visualstudio.com/docs/copilot/chat/mcp-servers',
147 transformConfig: (config): VSCodeMcpConfig => {
148 return {
149 servers: {
150 briven: {
151 type: 'http',
152 url: config.mcpServers.briven.url,
153 },
154 },
155 }
156 },
157 generateDeepLink: (_config) => {
158 const config = _config as VSCodeMcpConfig
159 const mcpConfig = { name: 'briven', ...config.servers.briven }
160
161 return `vscode:mcp/install?${encodeURIComponent(JSON.stringify(mcpConfig))}`
162 },
163 },
164 {
165 key: 'codex',
166 label: 'Codex',
167 icon: 'openai',
168 hasDistinctDarkIcon: true,
169 configFile: '~/.codex/config.toml',
170 externalDocsUrl: 'https://developers.openai.com/codex/mcp/',
171 transformConfig: (config): CodexMcpConfig => {
172 return {
173 mcp_servers: {
174 briven: {
175 url: config.mcpServers.briven.url,
176 },
177 },
178 }
179 },
180 primaryInstructions: (config, onCopy) => {
181 const mcpUrl = getMcpUrl(config)
182 const command = `codex mcp add briven --url "${mcpUrl}"`
183 return (
184 <div className="space-y-2">
185 <p className="text-xs text-foreground-light">Add the Briven MCP server to Codex:</p>
186 <CodeBlock
187 value={command}
188 language="bash"
189 focusable={false}
190 className="block"
191 onCopyCallback={() => onCopy('command')}
192 />
193 </div>
194 )
195 },
196 alternateInstructions: (_config, onCopy) => (
197 <div className="space-y-2">
198 <p className="text-xs text-foreground-light">
199 After adding the server, enable remote MCP client support by adding this to your{' '}
200 <code>~/.codex/config.toml</code>:
201 </p>
202 <CodeBlock
203 value={`[features]\nrmcp_client = true`}
204 focusable={false}
205 className="block"
206 onCopyCallback={() => onCopy('config')}
207 />
208 <p className="text-xs text-foreground-light">Then authenticate:</p>
209 <CodeBlock
210 value="codex mcp login briven"
211 language="bash"
212 focusable={false}
213 className="block"
214 onCopyCallback={() => onCopy('command')}
215 />
216 <p className="text-xs text-foreground-light">
217 Finally, run <code>/mcp</code> inside Codex to verify authentication.
218 </p>
219 </div>
220 ),
221 },
222 {
223 key: 'gemini-cli',
224 label: 'Gemini CLI',
225 icon: 'gemini-cli',
226 configFile: '.gemini/settings.json',
227 externalDocsUrl: 'https://geminicli.com/docs/tools/mcp-server/',
228 transformConfig: (config): GeminiMcpConfig => {
229 return {
230 mcpServers: {
231 briven: {
232 httpUrl: config.mcpServers.briven.url,
233 },
234 },
235 }
236 },
237 primaryInstructions: (config, onCopy, options) => {
238 const mcpUrl = getMcpUrl(config)
239 const mcpCommand = `gemini mcp add -t http briven ${mcpUrl}`
240 return (
241 <div className="space-y-2">
242 <p className="text-xs text-warning">
243 Ensure you are running Gemini CLI version <code>0.20.2</code> or higher.
244 </p>
245 {options?.isPlatform && (
246 <>
247 <p className="text-xs text-foreground-light">
248 Install the Briven{' '}
249 <a
250 href="https://github.com/supabase-community/gemini-extension"
251 target="_blank"
252 rel="noopener noreferrer"
253 className="text-brand-link hover:underline"
254 >
255 extension
256 </a>{' '}
257 for Gemini CLI. This bundles the Briven MCP server connection,{' '}
258 <a
259 href="https://github.com/supabase/agent-skills"
260 target="_blank"
261 rel="noopener noreferrer"
262 className="text-brand-link hover:underline"
263 >
264 agent skills
265 </a>
266 , and other context.
267 </p>
268 <CodeBlock
269 value="gemini extensions install https://github.com/supabase-community/gemini-extension"
270 language="bash"
271 focusable={false}
272 className="block"
273 onCopyCallback={() => onCopy('command')}
274 />
275 <p className="text-xs text-foreground-light">
276 Or add just the MCP server to Gemini CLI:
277 </p>
278 </>
279 )}
280 {!options?.isPlatform && (
281 <p className="text-xs text-foreground-light">
282 Add the Briven MCP server to Gemini CLI:
283 </p>
284 )}
285 <CodeBlock
286 value={mcpCommand}
287 language="bash"
288 focusable={false}
289 className="block"
290 onCopyCallback={() => onCopy('command')}
291 />
292 </div>
293 )
294 },
295 alternateInstructions: (_config, onCopy) => {
296 return (
297 <div className="space-y-2">
298 <p className="text-xs text-foreground-light">
299 After installation, start the Gemini CLI and run the following command to authenticate
300 the server:
301 </p>
302 <CodeBlock
303 value="/mcp auth briven"
304 language="bash"
305 focusable={false}
306 className="block"
307 onCopyCallback={() => onCopy('command')}
308 />
309 </div>
310 )
311 },
312 },
313 {
314 key: 'copilot-cli',
315 label: 'GitHub Copilot',
316 icon: 'copilot',
317 hasDistinctDarkIcon: true,
318 configFile: '~/.copilot/mcp-config.json',
319 externalDocsUrl:
320 'https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers',
321 transformConfig: (config): CopilotMcpConfig => {
322 return {
323 mcpServers: {
324 briven: {
325 type: 'http',
326 url: config.mcpServers.briven.url,
327 },
328 },
329 }
330 },
331 primaryInstructions: (_config, onCopy) => {
332 const config = _config as CopilotMcpConfig
333 const command = `copilot mcp add --transport http briven "${config.mcpServers.briven.url}"`
334 return (
335 <div className="space-y-2">
336 <p className="text-xs text-foreground-light">
337 Add the MCP server to your GitHub Copilot config using the command line:
338 </p>
339 <CodeBlock
340 value={command}
341 language="bash"
342 focusable={false}
343 className="block"
344 onCopyCallback={() => onCopy('command')}
345 />
346 </div>
347 )
348 },
349 alternateInstructions: (_config, onCopy) => (
350 <div className="space-y-2">
351 <p className="text-xs text-foreground-light">
352 After configuring the MCP server, authenticate by running:
353 </p>
354 <CodeBlock
355 value="copilot -i /mcp"
356 language="bash"
357 focusable={false}
358 className="block"
359 onCopyCallback={() => onCopy('command')}
360 />
361 <p className="text-xs text-foreground-light">
362 Follow the on-screen instructions to complete the authentication flow.
363 </p>
364 </div>
365 ),
366 },
367 {
368 key: 'antigravity',
369 label: 'Antigravity',
370 icon: 'antigravity',
371 configFile: '~/.gemini/antigravity/mcp_config.json',
372 externalDocsUrl: 'https://antigravity.google/docs/mcp',
373 transformConfig: (config): AntigravityMcpConfig => {
374 return {
375 mcpServers: {
376 briven: {
377 serverUrl: config.mcpServers.briven.url,
378 },
379 },
380 }
381 },
382 alternateInstructions: (_config, _onCopy) => (
383 <div className="space-y-2">
384 <p className="text-xs text-foreground-light">
385 After saving the config, restart Antigravity. It will prompt you to complete the OAuth
386 flow to authenticate with Briven.
387 </p>
388 <p className="text-xs text-foreground-light">
389 To edit the config from within Antigravity, click the <strong>···</strong> menu at the top
390 of the Agent pane &gt; <strong>MCP Servers</strong> &gt;{' '}
391 <strong>Manage MCP Servers</strong> &gt; <strong>View raw config</strong>. From the Manage
392 MCP Servers page you can also <strong>Refresh</strong> server configs and enable/disable
393 servers.
394 </p>
395 <p className="text-xs text-foreground-light">
396 If you run into authentication issues, open Agent Settings with <strong>Cmd+,</strong>{' '}
397 (Mac) or <strong>Ctrl+,</strong> (Windows/Linux), navigate to the{' '}
398 <strong>Customizations</strong> tab, and click the <strong>Authenticate</strong> button
399 next to the Briven server.
400 </p>
401 <Image
402 src={antigravityAuthenticateScreenshot}
403 alt="Antigravity MCP server settings showing the Authenticate button next to the Briven server"
404 width={1316}
405 height={258}
406 className="rounded border border-muted w-full"
407 />
408 </div>
409 ),
410 },
411 {
412 key: 'windsurf',
413 label: 'Windsurf',
414 icon: 'windsurf',
415 hasDistinctDarkIcon: true,
416 configFile: '~/.codeium/windsurf/mcp_config.json',
417 externalDocsUrl: '',
418 transformConfig: (config): WindsurfMcpConfig => {
419 return {
420 mcpServers: {
421 briven: {
422 command: 'npx',
423 args: ['-y', 'mcp-remote', config.mcpServers.briven.url],
424 },
425 },
426 }
427 },
428 primaryInstructions: (_config, _onCopy) => (
429 <p className="text-xs text-warning">
430 Ensure you are running Windsurf version <code>0.1.37</code> or higher.
431 </p>
432 ),
433 alternateInstructions: (_config, _onCopy) => (
434 <p className="text-xs text-foreground-light">
435 Windsurf does not currently support remote MCP servers over HTTP transport. You need to use
436 the mcp-remote package as a proxy.
437 </p>
438 ),
439 },
440 {
441 key: 'goose',
442 label: 'Goose',
443 icon: 'goose',
444 hasDistinctDarkIcon: true,
445 configFile: '~/.config/goose/config.yaml',
446 externalDocsUrl: 'https://block.github.io/goose/docs/category/getting-started',
447 transformConfig: (config): GooseMcpConfig => {
448 return {
449 extensions: {
450 briven: {
451 available_tools: [],
452 bundled: null,
453 description:
454 'Connect your Briven projects to AI assistants. Manage tables, query data, deploy Edge Functions, and interact with your Briven backend directly from your MCP client.',
455 enabled: true,
456 env_keys: [],
457 envs: {},
458 headers: {},
459 name: 'Briven',
460 timeout: 300,
461 type: 'streamable_http',
462 uri: config.mcpServers.briven.url,
463 },
464 },
465 }
466 },
467 generateDeepLink: (config) => {
468 const name = 'briven'
469 const mcpUrl = getMcpUrl(config)
470 return `goose://extension?type=streamable_http&url=${encodeURIComponent(mcpUrl)}&id=briven&name=${name}&description=${encodeURIComponent('Connect your Briven projects to AI assistants. Manage tables, query data, deploy Edge Functions, and interact with your Briven backend directly from your MCP client.')}`
471 },
472 primaryInstructions: (config, onCopy) => {
473 const mcpUrl = getMcpUrl(config)
474 const command = `goose session --with-streamable-http-extension "${mcpUrl}"`
475 return (
476 <div className="space-y-2">
477 <p className="text-xs text-foreground-light">
478 Start a Goose session with the Briven extension:
479 </p>
480 <CodeBlock
481 value={command}
482 language="bash"
483 focusable={false}
484 className="block"
485 onCopyCallback={() => onCopy('command')}
486 />
487 </div>
488 )
489 },
490 alternateInstructions: (_config, _onCopy) => (
491 <div className="space-y-2">
492 <p className="text-xs text-foreground-light">
493 For more details, see{' '}
494 <a
495 href="https://block.github.io/goose/docs/getting-started/using-extensions"
496 target="_blank"
497 rel="noopener noreferrer"
498 className="text-brand underline"
499 >
500 Using Extensions
501 </a>{' '}
502 in Goose.
503 </p>
504 </div>
505 ),
506 },
507 {
508 key: 'factory',
509 label: 'Factory',
510 icon: 'factory',
511 hasDistinctDarkIcon: true,
512 configFile: '~/.factory/mcp.json',
513 externalDocsUrl: 'https://docs.factory.ai/cli/configuration/mcp.md',
514 transformConfig: (config): FactoryMcpConfig => {
515 return {
516 mcpServers: {
517 briven: {
518 type: 'http',
519 url: config.mcpServers.briven.url,
520 },
521 },
522 }
523 },
524 primaryInstructions: (config, onCopy) => {
525 const mcpUrl = getMcpUrl(config)
526 const command = `droid mcp add briven ${mcpUrl} --type http`
527 return (
528 <div className="space-y-2">
529 <p className="text-xs text-foreground-light">Add Briven MCP server to Factory:</p>
530 <CodeBlock
531 value={command}
532 language="bash"
533 focusable={false}
534 className="block"
535 onCopyCallback={() => onCopy('command')}
536 />
537 </div>
538 )
539 },
540 alternateInstructions: (_config, _onCopy) => (
541 <div className="space-y-2">
542 <p className="text-xs text-foreground-light">
543 Restart Factory or type <code>/mcp</code> within droid to complete OAuth authentication
544 flow.
545 </p>
546 </div>
547 ),
548 },
549 {
550 key: 'opencode',
551 label: 'OpenCode',
552 icon: 'opencode',
553 hasDistinctDarkIcon: true,
554 configFile: '~/.config/opencode/opencode.json',
555 externalDocsUrl: 'https://opencode.ai/docs/mcp-servers/',
556 transformConfig: (config): OpenCodeMcpConfig => {
557 const mcpUrl = getMcpUrl(config)
558 return {
559 $schema: 'https://opencode.ai/config.json',
560 mcp: {
561 briven: {
562 type: 'remote',
563 url: mcpUrl,
564 enabled: true,
565 },
566 },
567 }
568 },
569 alternateInstructions: (_config, onCopy) => (
570 <div className="space-y-2">
571 <p className="text-xs text-foreground-light">
572 After adding the configuration, run the following command to authenticate:
573 </p>
574 <CodeBlock
575 value="opencode mcp auth briven"
576 language="bash"
577 focusable={false}
578 className="block"
579 onCopyCallback={() => onCopy('command')}
580 />
581 <p className="text-xs text-foreground-light">
582 This will open your browser to complete the OAuth authentication flow.
583 </p>
584 </div>
585 ),
586 },
587 {
588 key: 'kiro',
589 label: 'Kiro',
590 icon: 'kiro',
591 configFile: '~/.kiro/settings/mcp.json',
592 externalDocsUrl: 'https://kiro.dev/docs/mcp/',
593 generateDeepLink: (_config, options) => {
594 const power = options?.isPlatform ? 'briven-hosted' : 'briven-local'
595 return `https://kiro.dev/launch/powers/${power}`
596 },
597 deepLinkDescription: (
598 <>
599 Install the Briven{' '}
600 <a
601 href="https://kiro.dev/docs/powers/"
602 target="_blank"
603 rel="noopener noreferrer"
604 className="text-brand-link hover:underline"
605 >
606 power
607 </a>{' '}
608 for Kiro. This bundles the Briven MCP server and steering files for best practices.
609 </>
610 ),
611 },
612 {
613 key: 'claude-ai',
614 label: 'Claude.ai',
615 icon: 'claude',
616 externalDocsUrl: 'https://claude.com/docs/connectors/overview',
617 generateDeepLink: () =>
618 'https://claude.ai/directory/connectors/11ca66fc-1e98-49d5-ab9b-7cb4672a8f10',
619 },
620 {
621 key: 'chatgpt',
622 label: 'ChatGPT',
623 icon: 'openai',
624 hasDistinctDarkIcon: true,
625 externalDocsUrl: 'https://chatgpt.com/features/apps/',
626 generateDeepLink: () =>
627 'https://chatgpt.com/apps/briven/asdk_app_69d3e5ee6a708191baa733f7b8931995',
628 },
629]
630
631export const MCP_CLIENT_GROUPS = [
632 {
633 heading: 'AI Agent CLI',
634 keys: ['claude-code', 'codex', 'gemini-cli', 'copilot-cli', 'opencode', 'factory'],
635 },
636 {
637 heading: 'Web Clients',
638 keys: ['claude-ai', 'chatgpt', 'goose'],
639 },
640 {
641 heading: 'IDE',
642 keys: ['cursor', 'vscode', 'antigravity', 'kiro', 'windsurf'],
643 },
644] as const
645
646export const DEFAULT_MCP_URL_PLATFORM = 'http://localhost:8080/mcp'
647export const DEFAULT_MCP_URL_NON_PLATFORM = 'http://localhost:54321/mcp'