diff --git a/components/MCPInstructions/MCPInstructions.mdx b/components/MCPInstructions/MCPInstructions.mdx
new file mode 100644
index 0000000..636ec59
--- /dev/null
+++ b/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 = '' }) => {children}
;
+
+ 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 (
+
+
+
+ {children?.map((tab, index) => {
+ const isActive = activeTab === index;
+ return (
+ setActiveTab(index)}
+ >
+ {tab.props.icon && (
+
+ );
+ })}
+
+
+ {children && children[activeTab]}
+
+ );
+ };
+
+ const Card = ({ children, spacing = 'space-y-6' }) => (
+
+ );
+
+ const SectionHeading = ({ children }) => (
+ {children}
+ );
+
+ const CodeBlock = ({ children, className = '' }) => (
+
+ {children}
+
+ );
+
+ const InlineCode = ({ children }) => (
+ {children}
+ );
+
+ const Paragraph = ({ children, className = '' }) => (
+ {children}
+ );
+
+ const InstallationLink = ({ href, imgSrc, alt }) => (
+
+
+ );
+
+
+ const cursorConfig = encodeToBase64({ url });
+ const safeName = encodeURIComponent(name);
+ const safeCursorConfig = encodeURIComponent(cursorConfig);
+
+ return (
+
+
+
+
+
+ Installation Link
+
+
+
Manual Installation
+
+ Add the following to your mcp.json file:
+
+
+ {JSON.stringify({
+ mcpServers: {
+ [name || '"undefined"']: {
+ url
+ }
+ }
+ }, null, 2)}
+
+
+
+
+
+
+
+ Installation Link
+
+
+
Manual Installation
+
Open a terminal and run the following command:
+
+ {`code --add-mcp '${JSON.stringify({ type: 'http', name, url })}'`}
+
+
+ Then, from inside VS Code, open the .vscode/mcp.json file and click "Start server".
+
+
+
+
+
+
+ Open a terminal and run the following command:
+
+ {`claude mcp add --transport http ${name} ${url}`}
+
+
+ From within Claude Code, you can use the /mcp command to get more information about the server.
+
+
+
+
+
+
+
+ Open Claude Desktop and navigate to Settings > Connectors > Add Custom Connector .
+
+
+ Enter the name as {name} and the remote MCP server URL as {url} .
+
+
+
+
+
+
+ Copy the following JSON to your Windsurf MCP config file:
+
+ {JSON.stringify({
+ mcpServers: {
+ [name]: {
+ serverUrl: url
+ }
+ }
+ }, null, 2)}
+
+
+
+
+
+
+
+ Note: In Team, Enterprise, and Edu workspaces, only workspace owners and admins have permission
+
+
+
+ Navigate to Settings > Connectors
+
+
+ Add a custom connector with the server URL: {url}
+
+ It should then be visible in the Composer > Deep research tool
+ You may need to add the server as a source
+
+
+ Connectors can only be used with Deep Research
+
+
+
+
+
+
+
+ Add the following JSON to your Gemini CLI configuration file (~/.gemini/settings.json ):
+
+
+ {JSON.stringify({
+ mcpServers: {
+ [name]: {
+ httpUrl: url,
+ headers: {
+ Accept: 'application/json, text/event-stream'
+ }
+ }
+ }
+ }, null, 2)}
+
+
+
+
+
+
+ Manual installation
+
+ Requirements: Docker
+
+
+ Add the following to your codex config file (~/.codex/config.toml ):
+
+
+ {`[mcp_servers.${name}]
+command = "docker"
+args = ["run", "--rm", "-t", "ghcr.io/sparfenyuk/mcp-proxy:v0.3.2-alpine", "${url}", "--transport=streamablehttp"]`}
+
+
+ Note: Codex does not support MCP servers with OAuth2 authentication.
+
+
+
+
+
+```
+
+## Props
+
+| Prop | Type | Description |
+| ------ | ------ | --------------------------- |
+| `name` | string | The name of the MCP server. |
+| `url` | string | The URL of the MCP server. |
+
+## Usage
+
+```mdx
+