add MCP info

components/MCPInstructions/MCPInstructions.mdx

@@ -0,0 +1,257 @@
+import React, { useState } from 'react';
+
+export const McpInstallInstructions = ({ name, url }) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+
+  const encodeToBase64 = (data) => {
+    try {
+      if (typeof window !== 'undefined' && window.btoa) {
+        return window.btoa(JSON.stringify(data));
+      } else if (typeof Buffer !== 'undefined') {
+        return Buffer.from(JSON.stringify(data)).toString('base64');
+      }
+    } catch (e) {
+      console.error('Failed to encode to base64', e);
+    }
+    return '';
+  };
+
+
+  const cardClass = 'p-6 border rounded-lg bg-white shadow-sm dark:bg-inherit border-gray-200 dark:border-white/10';
+  const headingClass = 'font-semibold mb-4 text-base text-gray-800 dark:text-white';
+  const codeBlockClass = 'bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 rounded-lg overflow-x-auto text-sm border border-gray-200 dark:border-gray-700 shadow-sm';
+  const inlineCodeClass = 'font-mono bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-2 py-1 rounded text-sm border border-gray-300 dark:border-gray-700';
+  const textClass = 'text-sm leading-relaxed';
+
+
+
+  // Disable lint because these are used by the Tabs component
+  // eslint-disable-next-line no-unused-vars
+  const Tab = ({ children, title = '', icon = '', iconColor = '' }) => <div>{children}</div>;
+
+  const Tabs = ({ children }) => {
+    const baseTabClass = 'bg-inherit border-0 font-semibold text-sm cursor-pointer mr-4 pb-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300';
+    const activeTabClass = 'text-gray-700 -mb-1 border-b-1 border-gray-600 dark:text-white dark:border-white';
+
+    return (
+      <div>
+        <header>
+          <nav className="border-b border-gray-200 dark:border-gray-700 mb-4">
+            {children?.map((tab, index) => {
+              const isActive = activeTab === index;
+              return (
+                <button
+                  key={tab.props.title}
+                  className={`${baseTabClass} ${isActive ? activeTabClass : ''}`}
+                  onClick={() => setActiveTab(index)}
+                >
+                  {tab.props.icon && (
+                    <i className={`fa-duotone fa-solid ${tab.props.icon} text-${tab.props.iconColor} mr-2`}></i>
+                  )}
+                  {tab.props.title}
+                </button>
+              );
+            })}
+          </nav>
+        </header>
+        <section>{children && children[activeTab]}</section>
+      </div>
+    );
+  };
+
+  const Card = ({ children, spacing = 'space-y-6' }) => (
+    <div className={cardClass}>
+      <div className={`${spacing} text-gray-600 dark:text-gray-300`}>
+        {children}
+      </div>
+    </div>
+  );
+
+  const SectionHeading = ({ children }) => (
+    <h4 className={headingClass}>{children}</h4>
+  );
+
+  const CodeBlock = ({ children, className = '' }) => (
+    <pre className={`${codeBlockClass} ${className}`}>
+      <code>{children}</code>
+    </pre>
+  );
+
+  const InlineCode = ({ children }) => (
+    <code className={inlineCodeClass}>{children}</code>
+  );
+
+  const Paragraph = ({ children, className = '' }) => (
+    <p className={`${textClass} ${className}`}>{children}</p>
+  );
+
+  const InstallationLink = ({ href, imgSrc, alt }) => (
+    <a className="inline-block transition-opacity hover:opacity-80 mb-2" href={href}>
+      <img src={imgSrc} alt={alt} className="h-8" />
+    </a>
+  );
+
+
+  const cursorConfig = encodeToBase64({ url });
+  const safeName = encodeURIComponent(name);
+  const safeCursorConfig = encodeURIComponent(cursorConfig);
+
+  return (
+    <div className="font-sans">
+      <Tabs>
+        <Tab title="Cursor">
+          <Card>
+            <div>
+              <SectionHeading>Installation Link</SectionHeading>
+              <InstallationLink
+                href={`cursor://anysphere.cursor-deeplink/mcp/install?name=${safeName}&config=${safeCursorConfig}`}
+                imgSrc="https://cursor.com/deeplink/mcp-install-dark.svg"
+                alt="Add to Cursor"
+              />
+            </div>
+            <div>
+              <SectionHeading>Manual Installation</SectionHeading>
+              <Paragraph className="mb-4">
+                Add the following to your <InlineCode>mcp.json</InlineCode> file:
+              </Paragraph>
+              <CodeBlock>
+                {JSON.stringify({
+                  mcpServers: {
+                    [name || '"undefined"']: {
+                      url
+                    }
+                  }
+                }, null, 2)}
+              </CodeBlock>
+            </div>
+          </Card>
+        </Tab>
+
+        <Tab title="VSCode">
+          <Card>
+            <div>
+              <SectionHeading>Installation Link</SectionHeading>
+              <InstallationLink
+                href={`https://insiders.vscode.dev/redirect?url=vscode:mcp/install?${encodeURIComponent(JSON.stringify({ type: 'http', name, url }))}`}
+                imgSrc="https://img.shields.io/badge/VS_Code-Install_Server-0098FF?style=for-the-badge&logo=visual-studio-code&logoColor=white"
+                alt="Install in VS Code"
+              />
+            </div>
+            <div>
+              <SectionHeading>Manual Installation</SectionHeading>
+              <Paragraph className="mb-4">Open a terminal and run the following command:</Paragraph>
+              <CodeBlock>
+                {`code --add-mcp '${JSON.stringify({ type: 'http', name, url })}'`}
+              </CodeBlock>
+              <Paragraph className="mt-4">
+                Then, from inside VS Code, open the <InlineCode>.vscode/mcp.json</InlineCode> file and click &quot;Start server&quot;.
+              </Paragraph>
+            </div>
+          </Card>
+        </Tab>
+
+        <Tab title="Claude Code">
+          <Card spacing="space-y-4">
+            <Paragraph>Open a terminal and run the following command:</Paragraph>
+            <CodeBlock>
+              {`claude mcp add --transport http ${name} ${url}`}
+            </CodeBlock>
+            <Paragraph className="mt-4">
+              From within Claude Code, you can use the <InlineCode>/mcp</InlineCode> command to get more information about the server.
+            </Paragraph>
+          </Card>
+        </Tab>
+
+        <Tab title="Claude Desktop">
+          <Card spacing="space-y-4">
+            <Paragraph>
+              Open Claude Desktop and navigate to <span className="font-semibold">Settings &gt; Connectors &gt; Add Custom Connector</span>.
+            </Paragraph>
+            <Paragraph className="mt-4">
+              Enter the name as <InlineCode>{name}</InlineCode> and the remote MCP server URL as <InlineCode>{url}</InlineCode>.
+            </Paragraph>
+          </Card>
+        </Tab>
+
+        <Tab title="Windsurf">
+          <Card spacing="space-y-4">
+            <Paragraph>Copy the following JSON to your Windsurf MCP config file:</Paragraph>
+            <CodeBlock className="mt-4">
+              {JSON.stringify({
+                mcpServers: {
+                  [name]: {
+                    serverUrl: url
+                  }
+                }
+              }, null, 2)}
+            </CodeBlock>
+          </Card>
+        </Tab>
+
+        <Tab title="ChatGPT">
+          <Card spacing="space-y-4">
+            <p className="italic text-gray-600 dark:text-gray-400 leading-relaxed text-sm">
+              Note: In Team, Enterprise, and Edu workspaces, only workspace owners and admins have permission
+            </p>
+            <ul className="list-disc pl-6 space-y-3 mt-2">
+              <li className="leading-relaxed">
+                Navigate to <strong className="text-gray-800 dark:text-white">Settings &gt; Connectors</strong>
+              </li>
+              <li className="leading-relaxed">
+                Add a custom connector with the server URL: <InlineCode>{url}</InlineCode>
+              </li>
+              <li className="leading-relaxed">It should then be visible in the Composer &gt; Deep research tool</li>
+              <li className="leading-relaxed">You may need to add the server as a source</li>
+            </ul>
+            <p className="italic font-semibold mt-4 text-gray-800 dark:text-white leading-relaxed">
+              Connectors can only be used with Deep Research
+            </p>
+          </Card>
+        </Tab>
+
+        <Tab title="Gemini CLI">
+          <Card spacing="space-y-4">
+            <Paragraph>
+              Add the following JSON to your Gemini CLI configuration file (<InlineCode>~/.gemini/settings.json</InlineCode>):
+            </Paragraph>
+            <CodeBlock className="mt-4">
+              {JSON.stringify({
+                mcpServers: {
+                  [name]: {
+                    httpUrl: url,
+                    headers: {
+                      Accept: 'application/json, text/event-stream'
+                    }
+                  }
+                }
+              }, null, 2)}
+            </CodeBlock>
+          </Card>
+        </Tab>
+
+        <Tab title="Codex">
+          <Card spacing="space-y-4">
+            <SectionHeading>Manual installation</SectionHeading>
+            <Paragraph>
+              Requirements: <InlineCode>Docker</InlineCode>
+            </Paragraph>
+            <Paragraph className="mt-4">
+              Add the following to your codex config file (<InlineCode>~/.codex/config.toml</InlineCode>):
+            </Paragraph>
+            <CodeBlock className="mt-4">
+              {`[mcp_servers.${name}]
+command = "docker"
+args = ["run", "--rm", "-t", "ghcr.io/sparfenyuk/mcp-proxy:v0.3.2-alpine", "${url}", "--transport=streamablehttp"]`}
+            </CodeBlock>
+            <p className="font-semibold mt-4 text-sm text-gray-800 dark:text-white leading-relaxed">
+              Note: Codex does not support MCP servers with OAuth2 authentication.
+            </p>
+          </Card>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+<McpInstallInstructions name="Name for MCP server" url="https://your-mcp-url.readme.io/mcp" />

components/MCPInstructions/readme.md

@@ -0,0 +1,20 @@
+# `<MCPInstructions />`
+
+## Overview
+
+Display instructions for using an MCP server across various MCP clients.
+
+<img alt="Display instructions for using an MCP server across various MCP clients" src="mcp-instructions.png" width="800" />
+
+## Usage
+
+```mdx
+<MCPInstructions name="Name for MCP server" url="https://your-mcp-url.readme.io/mcp">
+```
+
+## Props
+
+| Prop   | Type   | Description                 |
+| ------ | ------ | --------------------------- |
+| `name` | string | The name of the MCP server. |
+| `url`  | string | The URL of the MCP server.  |