feat(mcp): add Codex client configuration (#7164)

* feat(mcp): add Codex client configuration

* fix(mcp): keep Codex key creation action

Author: TheodoreSpeaks

apps/docs/content/docs/en/workflows/deployment/mcp.mdx

@@ -112,8 +112,8 @@ Sim generates a ready-to-paste configuration for every supported client. To get
 
 1. Navigate to **Settings → MCP Servers**
 2. Click **Details** on your server
-3. Under **MCP Client**, select your client — **Cursor**, **Claude Code**, **Claude Desktop**, **VS Code**, or **Sim**
-4. Copy the configuration, replacing `$SIM_API_KEY` with your Sim API key
+3. Under **MCP Client**, select your client — **Cursor**, **Codex**, **Claude Code**, **Claude Desktop**, **VS Code**, or **Sim**
+4. Copy the configuration and follow the authentication note below it
 
 <div className="flex justify-center">
   <Image
@@ -142,6 +142,18 @@ Cursor supports direct URL configuration. Add to your Cursor MCP settings (`.cur
 
 Cursor also provides a one-click install button in the server detail view.
 
+### Codex
+
+Add this to your Codex configuration (`~/.codex/config.toml`):
+
+```toml
+[mcp_servers."my-sim-workflows"]
+url = "YOUR_SERVER_URL"
+env_http_headers = { "X-API-Key" = "SIM_API_KEY" }
+```
+
+Set the `SIM_API_KEY` environment variable before starting Codex. The ChatGPT desktop app, Codex CLI, and Codex IDE extension share this configuration.
+
 ### Claude Code
 
 Run this command in your terminal:
@@ -185,7 +197,7 @@ For public servers, omit the `X-API-Key` header and `--header` arguments. Public
 </Callout>
 
 <Callout type="warn">
-`$SIM_API_KEY` is a placeholder. For Claude Desktop and VS Code configs, replace it with your actual API key since these clients don't expand environment variables in JSON config files. Claude Code and Cursor handle variable expansion natively.
+`$SIM_API_KEY` is a placeholder. For Claude Desktop and VS Code configs, replace it with your actual API key since these clients don't expand environment variables in JSON config files. Codex reads `SIM_API_KEY` from the environment, while Claude Code and Cursor handle variable expansion natively.
 </Callout>
 
 ## Server Management
@@ -226,5 +238,3 @@ Workflows execute using the same deployment version as API calls, ensuring consi
   { question: "What naming conventions should I follow for tool names?", answer: "Use lowercase letters, numbers, and underscores only. The name should be descriptive and follow MCP naming conventions, such as search_documents or send_email. This helps AI assistants understand and correctly invoke your tools." },
   { question: "How are workflow inputs mapped to MCP tool parameters?", answer: "Your workflow's input format fields automatically become MCP tool parameters. Each parameter's description defaults to the description set on that input in the Start block, and you can override it per tool in the MCP configuration to help AI assistants understand what values to provide." },
 ]} />
-
-

apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -76,7 +76,7 @@ interface ServerDetailViewProps {
   isDeleting: boolean
 }
 
-type McpClientType = 'sim' | 'cursor' | 'claude-code' | 'claude-desktop' | 'vscode'
+type McpClientType = 'sim' | 'cursor' | 'codex' | 'claude-code' | 'claude-desktop' | 'vscode'
 
 function ServerDetailView({
   canManage,
@@ -278,6 +278,14 @@ function ServerDetailView({
         return `claude mcp add "${safeName}" --url "${mcpServerUrl}" --header "X-API-Key:$SIM_API_KEY"`
       }
 
+      if (client === 'codex') {
+        return [
+          `[mcp_servers."${safeName}"]`,
+          `url = "${mcpServerUrl}"`,
+          ...(isPublic ? [] : ['env_http_headers = { "X-API-Key" = "SIM_API_KEY" }']),
+        ].join('\n')
+      }
+
       if (client === 'cursor') {
         const cursorConfig = isPublic
           ? { url: mcpServerUrl }
@@ -502,6 +510,7 @@ function ServerDetailView({
                     onValueChange={(v) => setActiveConfigTab(v as McpClientType)}
                   >
                     <ButtonGroupItem value='cursor'>Cursor</ButtonGroupItem>
+                    <ButtonGroupItem value='codex'>Codex</ButtonGroupItem>
                     <ButtonGroupItem value='claude-code'>Claude Code</ButtonGroupItem>
                     <ButtonGroupItem value='claude-desktop'>Claude Desktop</ButtonGroupItem>
                     <ButtonGroupItem value='vscode'>VS Code</ButtonGroupItem>
@@ -589,7 +598,13 @@ function ServerDetailView({
                     <div className='relative'>
                       <Code.Viewer
                         code={getConfigSnippet(activeConfigTab, server.isPublic, server.name)}
-                        language={activeConfigTab === 'claude-code' ? 'javascript' : 'json'}
+                        language={
+                          activeConfigTab === 'claude-code'
+                            ? 'bash'
+                            : activeConfigTab === 'codex'
+                              ? 'toml'
+                              : 'json'
+                        }
                         wrapText
                         className='!min-h-0 rounded-sm border border-[var(--border-1)]'
                       />
@@ -606,9 +621,21 @@ function ServerDetailView({
                         </a>
                       )}
                     </div>
+                    {activeConfigTab === 'codex' && server.isPublic && (
+                      <p className='mt-2 text-[var(--text-muted)] text-caption'>
+                        Add this to <span className='font-mono'>~/.codex/config.toml</span>.
+                      </p>
+                    )}
                     {!server.isPublic && (
                       <p className='mt-2 text-[var(--text-muted)] text-caption'>
-                        Replace $SIM_API_KEY with your API key
+                        {activeConfigTab === 'codex' ? (
+                          <>
+                            Add this to <span className='font-mono'>~/.codex/config.toml</span> and
+                            set the SIM_API_KEY environment variable with an existing API key
+                          </>
+                        ) : (
+                          'Replace $SIM_API_KEY with your API key'
+                        )}
                         {canManage && (
                           <>
                             , or{' '}
@@ -621,6 +648,7 @@ function ServerDetailView({
                             </button>
                           </>
                         )}
+                        {activeConfigTab === 'codex' && '.'}
                       </p>
                     )}
                   </div>

apps/sim/content/library/how-to-turn-a-workflow-into-a-reusable-mcp-tool/index.mdx

@@ -19,7 +19,7 @@ faq:
   - q: "Does Sim support MCP as both a client and server?"
     a: "Yes. Sim workflows can call tools on external MCP servers, and deployed Sim workflows can be published as MCP tools for other compatible clients."
   - q: "Can Claude or another assistant call a Sim workflow?"
-    a: "Yes, when the assistant supports MCP connections. Sim provides connection configurations for Claude Desktop, Cursor, VS Code, and Claude Code, while other compatible clients can use the same server details."
+    a: "Yes, when the assistant supports MCP connections. Sim provides connection configurations for Codex, Claude Desktop, Cursor, VS Code, and Claude Code, while other compatible clients can use the same server details."
   - q: "How is a published Sim MCP server authenticated?"
     a: "A Sim MCP server can use API Key access, where clients send an X-API-Key header containing a Sim API key, or Public access without authentication. Tool calls run the live deployment and consume workspace credits like other executions."
   - q: "Is MCP different from a REST API deployment?"
@@ -34,7 +34,7 @@ To turn a workflow into a reusable MCP tool, you build the workflow with clearly
 - Build the workflow and define its Start-block inputs and outputs.
 - Deploy a versioned snapshot of the workflow.
 - Create an MCP server and add the deployed workflow to it as a tool.
-- Connect the server to Claude Desktop, Cursor, VS Code, Claude Code, or another MCP-compatible client.
+- Connect the server to Codex, Claude Desktop, Cursor, VS Code, Claude Code, or another MCP-compatible client.
 - As of August 2026, [n8n](https://docs.n8n.io/advanced-ai/accessing-n8n-mcp-server/), [Gumloop](https://docs.gumloop.com/nodes/mcp), and [Zapier](https://zapier.com/mcp) all support MCP on both sides in some form. What differs is the publishing model: node or instance configuration, a platform control plane, and an action catalog respectively.
 
 ## What does it mean to turn a workflow into a reusable MCP tool?
@@ -54,7 +54,7 @@ Sim turns a deployed workflow into an MCP tool on an MCP server that external as
 1. **Build the workflow.** Create the capability in Sim. Wire the Start trigger, Agent blocks, integrations, data, code, and control logic needed to complete the task. Define clear Start-block inputs and outputs, because those become the tool's parameters and shape how an external assistant calls it.
 2. **Deploy a versioned snapshot.** Deploy when the behavior is ready for external callers. Sim freezes an immutable snapshot as a numbered version and marks one version live. Canvas edits stay in the draft until you publish an update, and promoting an earlier version rolls the live tool back. Every surface—API, chat, and MCP—runs that same live snapshot.
 3. **Create an MCP server and add the workflow as a tool.** In Settings, add an MCP server with a name and an access mode. Then open the deployed workflow, go to the MCP tab in the Deploy view, set the tool name and description, review the parameter descriptions derived from the Start inputs, select one or more MCP servers, and save the tool. One server can host many workflow tools, and a workflow must already be deployed before it can be added.
-4. **Connect an external MCP client.** From the server's details view, copy the ready-made configuration for Cursor, Claude Desktop, VS Code, Claude Code, or another host. Private servers expect an `X-API-Key` header carrying a Sim API key. When the assistant invokes the tool, Sim runs the live snapshot and returns the output over MCP.
+4. **Connect an external MCP client.** From the server's details view, copy the ready-made configuration for Codex, Cursor, Claude Desktop, VS Code, Claude Code, or another host. Private servers expect an `X-API-Key` header carrying a Sim API key. When the assistant invokes the tool, Sim runs the live snapshot and returns the output over MCP.
 
 Sim also works in the opposite direction. A Sim workflow can [connect to external MCP servers](https://docs.sim.ai/mcp) and call their tools. Sim therefore acts as both an MCP client and an MCP server, which lets one workflow consume outside capabilities and publish its own capability for reuse.
 
@@ -109,6 +109,6 @@ Current as of August 2026.
 
 ## Get started
 
-Build a new workflow or open an existing one in [Sim](https://sim.ai). Once the workflow behaves as expected, deploy a versioned snapshot, then create an MCP server and add the workflow to it as a tool by following the [MCP deployment documentation](https://docs.sim.ai/workflows/deployment/mcp). You can then connect the server to Claude Desktop, Cursor, VS Code, Claude Code, or another MCP-compatible client.
+Build a new workflow or open an existing one in [Sim](https://sim.ai). Once the workflow behaves as expected, deploy a versioned snapshot, then create an MCP server and add the workflow to it as a tool by following the [MCP deployment documentation](https://docs.sim.ai/workflows/deployment/mcp). You can then connect the server to Codex, Claude Desktop, Cursor, VS Code, Claude Code, or another MCP-compatible client.
 
 Sim suits developers who want one maintained workflow to provide the same callable capability across every MCP-compatible assistant they use.

apps/sim/lib/compare/data/sim.ts

@@ -752,7 +752,7 @@ export const simProfile: CompetitorProfile = {
       },
       mcpPublishing: {
         value:
-          'Yes: any deployed workflow can be published as a tool on an MCP server (private, API-key protected, or public/no-auth), with ready-to-paste client config generated for Cursor, Claude Code, Claude Desktop, and VS Code',
+          'Yes: any deployed workflow can be published as a tool on an MCP server (private, API-key protected, or public/no-auth), with ready-to-paste client config generated for Codex, Cursor, Claude Code, Claude Desktop, and VS Code',
         shortValue: 'Deployed workflows publish as MCP server tools',
         confidence: 'verified',
         sources: [

packages/emcn/src/components/code/code.tsx

@@ -25,7 +25,7 @@ type PrismModule = typeof import('./prism')
 /**
  * Module-level singleton promise for the lazily-loaded Prism module.
  *
- * Prism (core + the side-effectful JS/Python/JSON/Bash grammar registrations) is kept
+ * Prism (core + the side-effectful JS/Python/JSON/Bash/TOML grammar registrations) is kept
  * out of this module's static import graph so it never lands in bundles that only
  * pull `Code` through the shared `@sim/emcn` barrel. It is loaded once per
  * session on the first highlight and cached here for all subsequent viewers.
@@ -861,7 +861,7 @@ interface CodeViewerProps {
   /** Whether to show line numbers gutter */
   showGutter?: boolean
   /** Language for syntax highlighting (default: 'json') */
-  language?: 'javascript' | 'json' | 'python' | 'bash'
+  language?: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
   /** Visual density for read-only code. */
@@ -951,7 +951,7 @@ type ViewerInnerProps = {
   /** Whether to show line numbers gutter */
   showGutter: boolean
   /** Language for syntax highlighting */
-  language: 'javascript' | 'json' | 'python' | 'bash'
+  language: 'javascript' | 'json' | 'python' | 'bash' | 'toml'
   /** Additional CSS classes for the container */
   className?: string
   /** Visual density for read-only code. */

packages/emcn/src/components/code/prism.ts

@@ -3,6 +3,7 @@ import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-json'
 import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-toml'
 
 /**
  * Prism.js highlighting utilities isolated in a dedicated module.