Skip to content

Commit 1be2571

Browse files
anandkumarpatelanandkumarpatel
committed
add MCP info
1 parent db25c6e commit 1be2571

File tree

2 files changed

+222
-0
lines changed

2 files changed

+222
-0
lines changed

‎components/MCPInstructions/MCPInstructions.mdx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
export const McpInstallInstructions = ({ name, url }) => {
2+
// Cursor requires a base64 encoded config object for its deep link
3+
// Using a try/catch fallback for server-side rendering safety regarding 'window'
4+
let cursorConfig = '';
5+
try {
6+
if (typeof window !== 'undefined' && window.btoa) {
7+
cursorConfig = window.btoa(JSON.stringify({ url: url }));
8+
} else if (typeof Buffer !== 'undefined') {
9+
cursorConfig = Buffer.from(JSON.stringify({ url: url })).toString('base64');
10+
}
11+
} catch (e) {
12+
console.error("Failed to define base64 for cursor config", e);
13+
}
14+
15+
// Helper to safely encode URI components for deep links
16+
const safeName = encodeURIComponent(name);
17+
// Ensure the base64 config is safely encoded for the URL query parameter
18+
const safeCursorConfig = encodeURIComponent(cursorConfig);
19+
20+
// Shared Tailwind classes for consistent styling
21+
const detailsClass = "group p-4 border rounded-lg bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 transition-colors duration-200";
22+
// Added [&::-webkit-details-marker]:hidden to remove the default chevron
23+
const summaryClass = "cursor-pointer font-bold flex items-center justify-between list-none [&::-webkit-details-marker]:hidden text-gray-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 rounded";
24+
const chevronClass = "text-gray-400 dark:text-gray-500 transform transition-transform duration-200 group-open:rotate-180";
25+
const contentContainerClass = "mt-4 space-y-4 text-gray-700 dark:text-gray-300";
26+
const h4Class = "font-semibold mb-2 text-gray-900 dark:text-white";
27+
// Updated to be dark by default for better contrast on the dark card
28+
const preClass = "bg-gray-800 text-gray-100 p-3 rounded overflow-x-auto text-sm border border-gray-700";
29+
// Updated to be dark by default for better contrast on the dark card
30+
const inlineCodeClass = "font-mono bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm border border-gray-700";
31+
32+
return (
33+
<div className="space-y-4 font-sans">
34+
{/* Cursor */}
35+
<details className={detailsClass} open>
36+
<summary className={summaryClass}>
37+
<span>Cursor</span>
38+
<span className={chevronClass}>▼</span>
39+
</summary>
40+
<div className={contentContainerClass}>
41+
<div>
42+
<h4 className={h4Class}>Installation Link</h4>
43+
<a className="inline-block transition-opacity hover:opacity-80" href={`cursor://anysphere.cursor-deeplink/mcp/install?name=${safeName}&config=${safeCursorConfig}`}>
44+
<img src="https://cursor.com/deeplink/mcp-install-dark.svg" alt="Add to Cursor" className="h-8" />
45+
</a>
46+
</div>
47+
<div>
48+
<h4 className={h4Class}>Manual Installation</h4>
49+
<p className="mb-2 text-sm">Add the following to your <code className={inlineCodeClass}>mcp.json</code> file:</p>
50+
<pre className={preClass}>
51+
<code>{JSON.stringify({
52+
mcpServers: {
53+
[name || '"undefined"']: {
54+
url: url
55+
}
56+
}
57+
}, null, 2)}</code>
58+
</pre>
59+
</div>
60+
</div>
61+
</details>
62+
63+
{/* VSCode */}
64+
<details className={detailsClass}>
65+
<summary className={summaryClass}>
66+
<span>VSCode</span>
67+
<span className={chevronClass}>▼</span>
68+
</summary>
69+
<div className={contentContainerClass}>
70+
<div>
71+
<h4 className={h4Class}>Installation Link</h4>
72+
<a className="inline-block transition-opacity hover:opacity-80" href={`https://insiders.vscode.dev/redirect?url=vscode:mcp/install?${encodeURIComponent(JSON.stringify({ type: "http", name, url }))}`}>
73+
<img src="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" className="h-8"/>
74+
</a>
75+
</div>
76+
<div>
77+
<h4 className={h4Class}>Manual Installation</h4>
78+
<p className="mb-2 text-sm">Open a terminal and run the following command:</p>
79+
<pre className={preClass}>
80+
<code>code --add-mcp '{JSON.stringify({ type: "http", name, url })}'</code>
81+
</pre>
82+
<p className="mt-3 text-sm">Then, from inside VS Code, open the <code className={inlineCodeClass}>.vscode/mcp.json</code> file and click "Start server".</p>
83+
</div>
84+
</div>
85+
</details>
86+
87+
{/* Claude Code */}
88+
<details className={detailsClass}>
89+
<summary className={summaryClass}>
90+
<span>Claude Code</span>
91+
<span className={chevronClass}>▼</span>
92+
</summary>
93+
<div className={contentContainerClass}>
94+
<p className="text-sm">Open a terminal and run the following command:</p>
95+
<pre className={preClass}>
96+
<code>claude mcp add --transport http {name} {url}</code>
97+
</pre>
98+
<p className="text-sm mt-3">From within Claude Code, you can use the <code className={inlineCodeClass}>/mcp</code> command to get more information about the server.</p>
99+
</div>
100+
</details>
101+
102+
{/* Claude Desktop */}
103+
<details className={detailsClass}>
104+
<summary className={summaryClass}>
105+
<span>Claude Desktop</span>
106+
<span className={chevronClass}>▼</span>
107+
</summary>
108+
<div className={contentContainerClass}>
109+
<p>Open Claude Desktop and navigate to <span className="font-semibold">Settings &gt; Connectors &gt; Add Custom Connector</span>.</p>
110+
<p className="mt-2">Enter the name as <code className={inlineCodeClass}>{name}</code> and the remote MCP server URL as <code className={inlineCodeClass}>{url}</code>.</p>
111+
</div>
112+
</details>
113+
114+
{/* Windsurf */}
115+
<details className={detailsClass}>
116+
<summary className={summaryClass}>
117+
<span>Windsurf</span>
118+
<span className={chevronClass}>▼</span>
119+
</summary>
120+
<div className={contentContainerClass}>
121+
<p className="text-sm">Copy the following JSON to your Windsurf MCP config file:</p>
122+
<pre className={preClass + " mt-2"}>
123+
<code>{JSON.stringify({
124+
mcpServers: {
125+
[name]: {
126+
serverUrl: url
127+
}
128+
}
129+
}, null, 2)}</code>
130+
</pre>
131+
</div>
132+
</details>
133+
134+
{/* ChatGPT */}
135+
<details className={detailsClass}>
136+
<summary className={summaryClass}>
137+
<span>ChatGPT</span>
138+
<span className={chevronClass}>▼</span>
139+
</summary>
140+
<div className={contentContainerClass + " text-sm"}>
141+
<p className="italic text-gray-600 dark:text-gray-400">Note: In Team, Enterprise, and Edu workspaces, only workspace owners and admins have permission</p>
142+
<ul className="list-disc pl-5 space-y-2 mt-2">
143+
<li>Navigate to <strong className="text-gray-900 dark:text-white">Settings &gt; Connectors</strong></li>
144+
<li>Add a custom connector with the server URL: <code className={inlineCodeClass}>{url}</code></li>
145+
<li>It should then be visible in the Composer &gt; Deep research tool</li>
146+
<li>You may need to add the server as a source</li>
147+
</ul>
148+
<p className="italic font-semibold mt-3 text-gray-900 dark:text-white">Connectors can only be used with Deep Research</p>
149+
</div>
150+
</details>
151+
152+
{/* Gemini CLI */}
153+
<details className={detailsClass}>
154+
<summary className={summaryClass}>
155+
<span>Gemini CLI</span>
156+
<span className={chevronClass}>▼</span>
157+
</summary>
158+
<div className={contentContainerClass}>
159+
<p className="text-sm">Add the following JSON to your Gemini CLI configuration file (<code className={inlineCodeClass}>~/.gemini/settings.json</code>):</p>
160+
<pre className={preClass + " mt-2"}>
161+
<code>{JSON.stringify({
162+
mcpServers: {
163+
[name]: {
164+
httpUrl: url,
165+
headers: {
166+
Accept: "application/json, text/event-stream"
167+
}
168+
}
169+
}
170+
}, null, 2)}</code>
171+
</pre>
172+
</div>
173+
</details>
174+
175+
{/* Codex */}
176+
<details className={detailsClass}>
177+
<summary className={summaryClass}>
178+
<span>Codex</span>
179+
<span className={chevronClass}>▼</span>
180+
</summary>
181+
<div className={contentContainerClass}>
182+
<h4 className={h4Class}>Manual installation</h4>
183+
<p className="text-sm">Requirements: <span className={inlineCodeClass}>Docker</span></p>
184+
<p className="text-sm mt-3">Add the following to your codex config file (<code className={inlineCodeClass}>~/.codex/config.toml</code>):</p>
185+
<pre className={preClass + " mt-2"}>
186+
<code>{`[mcp_servers.${name}]
187+
command = "docker"
188+
args = ["run", "--rm", "-t", "ghcr.io/sparfenyuk/mcp-proxy:v0.3.2-alpine", "${url}", "--transport=streamablehttp"]`}</code>
189+
</pre>
190+
<p className="font-bold mt-3 text-sm text-gray-900 dark:text-white">Note: Codex does not support MCP servers with OAuth2 authentication.</p>
191+
</div>
192+
</details>
193+
194+
<div className="flex items-center justify-end gap-2 mt-6">
195+
<span className="text-xs text-gray-500 dark:text-gray-400">by</span>
196+
<a href="https://hyprmcp.com/" target="_blank" rel="noopener noreferrer" className="hover:opacity-80 transition-opacity">
197+
<img src="https://hyprmcp.com/hyprmcp_20px.svg" alt="Hypr MCP" className="h-5 opacity-80 dark:opacity-100" />
198+
</a>
199+
</div>
200+
</div>
201+
);
202+
};
203+
204+
<McpInstallInstructions name="Name for MCP server" url="https://your-mcp-url.readme.io/mcp" />

‎components/MCPInstructions/readme.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# `<MCPInstructions />`
2+
3+
## Overview
4+
5+
Display instructions for using an MCP server across various MCP clients.
6+
7+
## Usage
8+
9+
```mdx
10+
<MCPInstructions name="Name for MCP server" url="https://your-mcp-url.readme.io/mcp">
11+
```
12+
13+
## Props
14+
15+
| Prop | Type | Description |
16+
| -------- | ------ | --------------------------- |
17+
| `name` | string | The name of the MCP server. |
18+
| `url` | string | The URL of the MCP server. |

0 commit comments

Comments
 (0)