Function McpServer

src/docs/McpServer.jsx:70–138

()

};

const McpServer = () => {
  const [selectedClient, setSelectedClient] = useState('claude');

  useScrollToTop();

  return (
    <section className="docs-section">
      <h3 className="docs-category-title">MCP Server</h3>

      <p className="docs-paragraph">
        <a style={{ textDecoration: 'underline' }} href="https://modelcontextprotocol.io/" target="_blank" rel="noreferrer">
          Model Context Protocol (MCP)
        </a>{' '}
        is an open standard that enables AI assistants to securely connect to external data sources and tools.
      </p>

      <p className="docs-paragraph dim">
        React Bits encourages the use of the shadcn MCP server to browse, search, and install components using natural
        language.
      </p>

      <hr className="docs-separator" />

      <h3 className="docs-category-title">Quick Start</h3>

      <p className="docs-paragraph">
        Registries are configured in your project&apos;s <span className="docs-highlight">components.json</span> file,
        where you should first add the <span className="docs-highlight">@react-bits</span> registry:
      </p>
      <CodeBlock showLineNumbers>{`{
  "registries": {
    "@react-bits": "https://reactbits.dev/r/{name}.json"
  }
}`}</CodeBlock>

      <p className="docs-paragraph dim">
        Then, from the options below, select your client & set up the shadcn MCP server.
      </p>

      <MethodSelector methods={CLIENTS} selected={selectedClient} onSelect={setSelectedClient} />

      <ClientInstructions client={selectedClient} />

      <hr className="docs-separator" />

      <h3 className="docs-category-title">Learn more</h3>

      <p className="docs-paragraph dim" style={{ marginBottom: '16px' }}>
        To learn more about using the shadcn MCP server, including manual setup for different clients, please visit the
        official documentation:
      </p>

      <a
        className="docs-paragraph"
        style={{ textDecoration: 'underline' }}
        href="https://ui.shadcn.com/docs/mcp"
        target="_blank"
        rel="noreferrer"