Codex mcp instructions (#719)
* Add Codex MCP configuration instructions - Added Codex as a supported IDE in the MCP configuration UI - Removed Augment (duplicate of Cursor configuration) - Positioned Codex between Gemini and Cursor in the tab order - Added platform-specific configuration support for Windows vs Linux/macOS - Includes step-by-step instructions for installing mcp-remote and configuring Codex - Shows appropriate TOML configuration based on detected platform 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * Finalizing Codex instructions --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Cole Medin
GitHub
parent
e9c08d2fe9
commit
035f90e721
@ -19,6 +19,7 @@ const ideConfigurations: Record<
|
||||
steps: string[];
|
||||
configGenerator: (config: McpServerConfig) => string;
|
||||
supportsOneClick?: boolean;
|
||||
platformSpecific?: boolean;
|
||||
}
|
||||
> = {
|
||||
claudecode: {
|
||||
@ -56,6 +57,42 @@ const ideConfigurations: Record<
|
||||
2,
|
||||
),
|
||||
},
|
||||
codex: {
|
||||
title: "Codex Configuration",
|
||||
steps: [
|
||||
"Step 1: Install mcp-remote globally: npm install -g mcp-remote",
|
||||
"Step 2: Add configuration to ~/.codex/config.toml",
|
||||
"Step 3: Find your exact mcp-remote path by running: npm root -g",
|
||||
"Step 4: Replace the path in the configuration with your actual path + /mcp-remote/dist/proxy.js",
|
||||
],
|
||||
configGenerator: (config) => {
|
||||
const isWindows = navigator.platform.toLowerCase().includes("win");
|
||||
|
||||
if (isWindows) {
|
||||
return `[mcp_servers.archon]
|
||||
command = 'node'
|
||||
args = [
|
||||
'C:/Users/YOUR_USERNAME/AppData/Roaming/npm/node_modules/mcp-remote/dist/proxy.js',
|
||||
'http://${config.host}:${config.port}/mcp'
|
||||
]
|
||||
env = {
|
||||
APPDATA = 'C:\\Users\\YOUR_USERNAME\\AppData\\Roaming',
|
||||
LOCALAPPDATA = 'C:\\Users\\YOUR_USERNAME\\AppData\\Local',
|
||||
SystemRoot = 'C:\\WINDOWS',
|
||||
COMSPEC = 'C:\\WINDOWS\\system32\\cmd.exe'
|
||||
}`;
|
||||
} else {
|
||||
return `[mcp_servers.archon]
|
||||
command = 'node'
|
||||
args = [
|
||||
'/usr/local/lib/node_modules/mcp-remote/dist/proxy.js',
|
||||
'http://${config.host}:${config.port}/mcp'
|
||||
]
|
||||
env = { }`;
|
||||
}
|
||||
},
|
||||
platformSpecific: true,
|
||||
},
|
||||
cursor: {
|
||||
title: "Cursor Configuration",
|
||||
steps: [
|
||||
@ -144,27 +181,6 @@ const ideConfigurations: Record<
|
||||
2,
|
||||
),
|
||||
},
|
||||
augment: {
|
||||
title: "Augment Configuration",
|
||||
steps: [
|
||||
"Open Augment settings",
|
||||
"Navigate to Extensions > MCP",
|
||||
"Add the configuration shown below",
|
||||
"Reload configuration",
|
||||
],
|
||||
configGenerator: (config) =>
|
||||
JSON.stringify(
|
||||
{
|
||||
mcpServers: {
|
||||
archon: {
|
||||
url: `http://${config.host}:${config.port}/mcp`,
|
||||
},
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const McpConfigSection: React.FC<McpConfigSectionProps> = ({ config, status, className }) => {
|
||||
@ -240,14 +256,14 @@ export const McpConfigSection: React.FC<McpConfigSectionProps> = ({ config, stat
|
||||
value={selectedIDE}
|
||||
onValueChange={(value) => setSelectedIDE(value as SupportedIDE)}
|
||||
>
|
||||
<TabsList className="grid grid-cols-4 lg:grid-cols-7 w-full">
|
||||
<TabsList className="grid grid-cols-3 lg:grid-cols-7 w-full">
|
||||
<TabsTrigger value="claudecode">Claude Code</TabsTrigger>
|
||||
<TabsTrigger value="gemini">Gemini</TabsTrigger>
|
||||
<TabsTrigger value="codex">Codex</TabsTrigger>
|
||||
<TabsTrigger value="cursor">Cursor</TabsTrigger>
|
||||
<TabsTrigger value="windsurf">Windsurf</TabsTrigger>
|
||||
<TabsTrigger value="cline">Cline</TabsTrigger>
|
||||
<TabsTrigger value="kiro">Kiro</TabsTrigger>
|
||||
<TabsTrigger value="augment">Augment</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value={selectedIDE} className="mt-6 space-y-4">
|
||||
@ -255,10 +271,32 @@ export const McpConfigSection: React.FC<McpConfigSectionProps> = ({ config, stat
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-gray-800 dark:text-white mb-3">{selectedConfig.title}</h4>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-600 dark:text-zinc-400">
|
||||
{selectedConfig.steps.map((step) => (
|
||||
<li key={step}>{step}</li>
|
||||
))}
|
||||
{selectedConfig.steps.map((step) => {
|
||||
// Highlight npm install command for Codex
|
||||
if (selectedIDE === "codex" && step.includes("npm install -g mcp-remote")) {
|
||||
const parts = step.split("npm install -g mcp-remote");
|
||||
return (
|
||||
<li key={step}>
|
||||
{parts[0]}
|
||||
<code className="font-mono font-semibold bg-zinc-800 text-cyan-400 px-1.5 py-0.5 rounded">
|
||||
npm install -g mcp-remote
|
||||
</code>
|
||||
{parts[1]}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
return <li key={step}>{step}</li>;
|
||||
})}
|
||||
</ol>
|
||||
{/* macOS note for Codex */}
|
||||
{selectedIDE === "codex" && (
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-zinc-400 italic">
|
||||
Note: On macOS with Homebrew on Apple Silicon, the path might be{" "}
|
||||
<code className="text-xs font-mono bg-zinc-800 px-1 rounded">
|
||||
/opt/homebrew/lib/node_modules/mcp-remote/dist/proxy.js
|
||||
</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Special Commands for Claude Code */}
|
||||
@ -280,10 +318,28 @@ export const McpConfigSection: React.FC<McpConfigSectionProps> = ({ config, stat
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Platform-specific note for Codex */}
|
||||
{selectedIDE === "codex" && (
|
||||
<div className={cn("p-3 rounded-lg", glassmorphism.background.yellow, glassmorphism.border.yellow)}>
|
||||
<p className="text-sm text-yellow-700 dark:text-yellow-300">
|
||||
<span className="font-semibold">Platform Note:</span> The configuration below shows{" "}
|
||||
{navigator.platform.toLowerCase().includes("win") ? "Windows" : "Linux/macOS"} format. Adjust paths
|
||||
according to your system. This setup is complex right now because Codex has some bugs with MCP currently.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Configuration Display */}
|
||||
<div className={cn("relative rounded-lg p-4", glassmorphism.background.subtle, glassmorphism.border.default)}>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Configuration</span>
|
||||
<span className="text-xs font-medium text-zinc-500 dark:text-zinc-400">
|
||||
Configuration
|
||||
{selectedIDE === "codex" && (
|
||||
<span className="ml-2 text-xs text-yellow-600 dark:text-yellow-400">
|
||||
({navigator.platform.toLowerCase().includes("win") ? "Windows" : "Linux/macOS"})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<Button variant="outline" size="sm" onClick={handleCopyConfig}>
|
||||
<Copy className="w-3 h-3 mr-1" />
|
||||
Copy
|
||||
|
||||
@ -28,7 +28,7 @@ export interface McpSessionInfo {
|
||||
}
|
||||
|
||||
// we actually support all ides and mcp clients
|
||||
export type SupportedIDE = "windsurf" | "cursor" | "claudecode" | "cline" | "kiro" | "augment" | "gemini";
|
||||
export type SupportedIDE = "windsurf" | "cursor" | "claudecode" | "cline" | "kiro" | "codex" | "gemini";
|
||||
|
||||
export interface IdeConfiguration {
|
||||
ide: SupportedIDE;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user