Building and Deploying a Full App with the Codex App, MCP Servers and Skills
Melvin Vivas · X video post · 2026-03-01 · 3:53 · 199 views · Open on X
Topics: AI Dev Tools & Productivity, AI Agents, Tool Use & MCP · Level: beginner
Summary
The video shows a full Codex workflow. It starts from the default Next.js template with an AGENTS.md file and ends with a photo booth app deployed on Vercel in under 30 minutes. Along the way it uses MCP servers (OpenAI Docs, Playwright) and Codex skills (ImageGen, Vercel). It runs a feature as a cloud task while the UI is changed locally, and it switches models depending on the task. The video was reposted by Melvin Vivas from Katia Gil Guzman's X post.
Key points
- Start from a minimal template (default Next.js) and add an AGENTS.md file that tells Codex the tech stack and which skills and MCP servers to use.
- Give one large, detailed first prompt: the feature (capture or upload a photo, then generate 3 stylized images with the image API) plus the look (vintage pixel art, purple/pink/blue palette).
- The OpenAI Developer Docs MCP lets Codex pull current image API docs so the integration works the first time.
- The Playwright MCP lets Codex open the app, check its own work and test the mobile UI.
- Work in parallel: send a bigger feature (share + explore gallery) to a Codex cloud task while you change the UI locally. Codex asks follow-up questions and builds a plan before starting.
- Pick the model for the job: GPT-5.3 Codex with extra-high reasoning to get it right the first time, and the faster Spark model for quick UI changes.
- Look at cloud task results in Codex Web, compare the versions, and apply the best one to your local code.
- Deploy to Vercel with the Vercel skill. The whole thing went from nothing to a live app in under 30 minutes.
Resources mentioned
- Katia Gil Guzman (@kagigz) on X – Codex workflow post · video · x.com · free
The original X post with the video showing how to build and deploy an app with the Codex app. - Katia Gil Guzman · person · x.com · free
The person who made the original Codex workflow video, worth following for Codex tips. - OpenAI Codex · tool · openai.com · paid
OpenAI's coding agent. In the diagram it writes code, fixes review findings and drives the build loop. The creator also used it to make this video.
Also in: An agent bot that installs and drives Codex on its own (Melvin Vivas on X · notes), Asking a Coder bot to install Codex (Melvin Vivas on X · notes), Sign in with ChatGPT: Setting Usage Limits for Each App (Melvin Vivas on X · notes), Codex Cloud Environments Must Be Saved & Published Before Use (Melvin Vivas on X · notes) and 240 more - Next.js · tool · nextjs.org · free · recommended by both Bashiri Smith & Melvin Vivas
Open-source React framework for building full-stack web apps.
Also in: Problem Solving Over Keywords: The AI Skill That Never Expires (Bashiri Smith on Facebook · notes), Is Indie Hacking Dead? How AI Coding Changes the Micro-SaaS Playbook (Melvin Vivas on X · notes) - AGENTS.md · docs · agents.md · free
Instruction file format that gives coding agents project context such as the tech stack, skills and MCP servers.
Also in: Claude Code Now Reads AGENTS.md When CLAUDE.md Is Missing (Melvin Vivas on X · notes), Subagents with mixed models: a strong planner and a fast executor (Melvin Vivas on X · notes), Updating Skills and AGENTS.md for Astra with OpenAI's Guidance (Melvin Vivas on X · notes), How to Prompt GPT-6 Astra in Codex: Simpler Instructions, Leaner AGENTS.md (Melvin Vivas on X · notes) and 5 more - OpenAI Developer Docs MCP server · tool · developers.openai.com · free
MCP server that gives agents access to OpenAI's developer documentation. - Playwright MCP · repo · github.com · free
Microsoft's MCP server that lets AI agents control a browser through Playwright for UI testing and automation.
Also in: Parallel Coding Agents with Git Worktrees and Playwright MCP (Melvin Vivas on X · notes) - OpenAI Image API · tool · developers.openai.com · paid
OpenAI's image generation and editing API. - GPT-5.3 Codex · tool · openai.com · paid
OpenAI coding model used here with extra-high reasoning. - Codex Spark model · tool · openai.com · paid
OpenAI model in Codex that the creator finds useful for testing and small changes.
Also in: Use Codex GPT-5.3 Spark for Testing and Small Changes (Melvin Vivas on X · notes) - Codex Web (cloud tasks) · tool · chatgpt.com · check price
Web interface for running Codex cloud tasks and previewing their results. - Vercel · tool · x.com · free · recommended by both Bashiri Smith & Melvin Vivas
Deploy web apps and frontends.
Also in: OpenAI DevDay 2026 Recap: Dots, Agents API, Codex Cloud & Marketplace (Melvin Vivas on X · notes), 7 Habits to Become an AI Engineer: Books, Tooling, Research & Shipping (Bashiri Smith on Facebook · notes), Jev model added to the AIBackends API via Vercel AI Gateway (Melvin Vivas on X · notes), Open models now dominate token volume on Vercel AI Gateway (Melvin Vivas on X · notes) and 7 more - Codex ImageGen skill · tool · github.com · free
Codex skill for image generation work. - Codex Vercel skill · tool · github.com · free
Codex skill for deploying apps to Vercel.
Try this
- Add an AGENTS.md file to your project that lists the tech stack, skills and MCP servers Codex should use.
- Connect the OpenAI Docs and Playwright MCP servers so Codex can look things up and test its own UI.
- Send larger features to Codex cloud tasks while you make UI changes locally.
- Use a high-reasoning model for the first build and a fast model (Spark) for small UI changes.
- Deploy with the Vercel skill.
- An AI photo booth: capture or upload a photo, generate 3 stylized versions with the OpenAI image API in a vintage pixel art style, add download/share, and an explore gallery of shared photos with nicknames.