Adding Playwright and Supabase MCP's to new Codex CLI and IDE Extension (Tutorial)

In this tutorial, I'll walk you through setting up Playwright for browser automation and Supabase for database integration in both Codex CLI and the new IDE extension. What you'll learn: Setting up Playwright MCP for visual UI testing and browser automation Configuring Supabase MCP for database operations (with read-only safety) Converting standard JSON configs to TOML format for Codex Getting Supabase project references and access tokens Installing the Chrome extension for Playwright integration Security best practices (read-only mode to prevent database disasters!) ⚠️ Important Notes: Requires Chrome extension installation for Playwright browser control Use read-only mode for Supabase in production environments Configuration uses TOML format, not standard MCP JSON Both CLI and IDE extension share the same config file Get your Supabase project ref from your dashboard settings 🔧 Setup Files Location: ~/.codex/config.toml ⌚ TIMESTAMPS: 00:16 - What is MCP? Quick explanation 01:15 - Setting up Playwright MCP server 02:23 - Converting JSON to TOML format 03:08 - Installing Chrome extension for Playwright 03:26 - Setting up Supabase MCP server 04:02 - Read-only warning (protect your database!) 04:26 - Getting your Supabase project reference 04:41 - Creating personal access tokens 05:39 - Codex vs Claude Code performance discussion 🔗 RELEVANT LINKS: Book a call with me → https://yedatechs.com/#container06 Sponsorship inquiries → hi@yedatechs.com Playwright MCP GitHub → https://github.com/microsoft/playwright-mcp/blob/main/extension/README.md Supabase MCP Documentation → https://supabase.com/docs/guides/getting-started/mcp #Codex #OpenAI #Playwright #Supabase #MCPServers #BrowserAutomation #DatabaseIntegration #AITools #CodingWorkflow #DeveloperTools #WebTesting #Firebase #MCPSetup #2025Tech #AIProductivity