McpConnect

Code

import { McpConnect } from "@fadymondy/nasaq/web";declare const token: string;export function Connect() {  return <McpConnect serverUrl="https://mcp.example.com/mcp" serverName="example" token={token} onTest={async () => ({ ok: true, tools: 12 })} />;}

Integrations · beta

Live examples and controls: McpConnect in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/mcp-connect.json

Tell people how to connect their AI tool to your MCP server. One tab per client with the exact command or JSON, a copy button, a one-click install link where the client has one, the server URL and token, and a button that tests the connection.

When to useCopy Anchor Link

• Next to the API keys of a product that ships an MCP server.
• Docs or onboarding pages that need copy-ready client config.

When not to useCopy Anchor Link

• A general code sample: use CodeBlock.
• Managing the keys themselves: ApiKeys.

ImportCopy Anchor Link

import { McpConnect } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { McpConnect } from "@fadymondy/nasaq/web";

declare const token: string;

export function Connect() {
  return <McpConnect serverUrl="https://mcp.example.com/mcp" serverName="example" token={token} onTest={async () => ({ ok: true, tools: 12 })} />;
}

AnatomyCopy Anchor Link

McpConnect                      data-slot="mcp-connect" (Card)
├─ server URL                   CopyField (dir="ltr")
├─ token                        masked field: show/hide, copy
├─ Tabs                         one per client
│  ├─ numbered steps
│  ├─ snippet                   CodeBlock with target (file or Terminal) and copy
│  └─ deep link                 "Add to Cursor" / "Install in VS Code"
└─ Test connection              Alert: success (latency, tools) or failure

APICopy Anchor Link

McpConnect: every div prop except children, plus:

Helpers (pure, tested): mcpSnippet(client, server, tokenOverride?) returns { target, language, code, deepLink? }; maskToken(token).

ExamplesCopy Anchor Link

Only two clients

import { McpConnect } from "@fadymondy/nasaq/web";

export const Two = () => <McpConnect serverUrl="https://mcp.example.com/mcp" clients={["claude-code", "cursor"]} />;

Build a snippet yourself

import { mcpSnippet } from "@fadymondy/nasaq/web";

export const cmd = mcpSnippet("claude-code", { name: "example", url: "https://mcp.example.com/mcp", token: "abc" }).code;

AccessibilityCopy Anchor Link

• Tabs are Base UI Tabs: arrow keys move, the panel is labelled by its tab.
• The token field has a label and the show/hide button has a state-aware name. Test results are announced (role="status" or alert).

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. URLs, commands, JSON and tokens are dir="ltr".

Styling & tokensCopy Anchor Link

• Built on Card, Tabs, CodeBlock, CopyField, Alert and --nq-* tokens.
• Target [data-slot="mcp-connect"].

Do / Don'tCopy Anchor Link

• Do give a scoped, expiring token, not a master key.
• Do keep the token masked on screen; the copy button gives the real one.
• Don't put the token in a deep link you log or share.
• Client config formats change: check them against each client's docs when you upgrade.

RelatedCopy Anchor Link

• ApiKeys
• CodeBlock
• Tabs

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-integrations-mcp-connect--docs