New: Credits are here. One balance for web and MCP. See pricing

    Guides
    codex-cli
    mcp
    openai

    Codex CLI + MCP: How to Connect OpenAI's Agent to External Tools

    MCP servers extend Codex CLI with external tool access. Here's how to install, configure, and use MCP servers for GitHub, Supabase, Figma, Playwright, and more.

    April 30, 20266 min read
    Share:

    MCP (Model Context Protocol) servers extend Codex CLI with external tool access. Instead of the agent working with just your local files, MCP servers connect it to databases, APIs, design tools, and services.

    Quick Answer: Codex CLI uses MCP (Model Context Protocol) servers to connect OpenAI's agent to external tools like databases (Supabase), version control (GitHub), design platforms (Figma), and more, allowing it to interact with and manage various services beyond local files.

    What MCP Servers Add to Codex CLI

    MCP ServerWhat It Adds
    GitHubRead PRs, create issues, manage branches
    SupabaseQuery databases, read schemas, run migrations
    FigmaRead design files, extract components
    PlaywrightRun browser tests, take screenshots
    SlackRead messages, post updates
    Context7Access up-to-date library documentation

    Recommended skills

    Configuring MCP Servers

    Codex CLI reads MCP configuration from your project or home directory config file.

    Global Configuration

    Create or edit ~/.codex/config.json:

    {
      "mcpServers": {
        "github": {
          "command": "npx",
          "args": ["@github/mcp-server"],
          "env": {
            "GITHUB_TOKEN": "ghp_your_token"
          }
        },
        "supabase": {
          "command": "npx",
          "args": ["@supabase/mcp-server"],
          "env": {
            "SUPABASE_URL": "https://your-project.supabase.co",
            "SUPABASE_SERVICE_KEY": "your-key"
          }
        }
      }
    }
    

    Project-Specific Configuration

    Add a .codex/config.json to your project root. Project config overrides global config.

    Popular MCP Server Combinations

    Frontend Development Stack

    {
      "mcpServers": {
        "figma": { "command": "npx", "args": ["@anthropic/mcp-figma"] },
        "context7": { "command": "npx", "args": ["@context7/mcp-server"] },
        "playwright": { "command": "npx", "args": ["@anthropic/mcp-playwright"] }
      }
    }
    

    Figma for design-to-code, Context7 for framework docs, Playwright for testing. Pair with a frontend skill from Agensi for the best output.

    Backend Development Stack

    {
      "mcpServers": {
        "supabase": { "command": "npx", "args": ["@supabase/mcp-server"] },
        "github": { "command": "npx", "args": ["@github/mcp-server"] }
      }
    }
    

    Combining MCP Servers with Skills

    MCP servers provide capabilities. Skills provide conventions. A frontend design skill tells the agent how to write code. The Figma MCP server gives it access to your designs. Together, the agent produces design-accurate code that follows your team's patterns.

    Browse skills that complement MCP servers on Agensi.

    Troubleshooting

    Server not connecting: Check that the npm package is installed and the command path is correct. Try running the command manually.

    Authentication errors: Verify your API tokens have the required permissions.

    Slow responses: MCP servers add network latency. Limit MCP servers to the ones you actively use.

    Frequently Asked Questions