Codex for frontend
development
An introduction to using Codex for frontend work.
What is Codex?
Codex is OpenAI’s agent for coding and other tasks.
Useful answers, retrieval, and code suggestions.
Interactive work across files, tools, and tasks.
Independent multi-step work with a defined outcome, bounded access, visible progress, and reviewable evidence.
ChatGPT Work and Codex
The same Codex agent, with a different experience for the work.
Create, research, and analyze
Start from projects, documents, connected apps, files, and the web. Produce documents, presentations, analyses, spreadsheets, and other finished work.
Build, debug, review, and ship
Start from codebases, repositories, branches, and development environments. Produce code changes, reviewed diffs, tests, pull requests, and working software.
Choosing a model
Choose the model for the kind of task, then choose reasoning effort for how much exploration and verification it needs.
Sol
Use for the hardest debugging, novel frontend work, and tasks where polish matters most.
Terra
Use for most day-to-day implementation, iteration, review, and maintenance work.
Luna
Use for clear, repeatable tasks when the desired output and checks are already well defined.
Start with Medium
Use Low for a fast, well-defined task. Increase the effort when the work is ambiguous, difficult to diagnose, or needs deeper verification.
Parallelize a complex task
Ultra uses subagents to handle separate parts of a complex task in parallel. Choose it when the work divides into meaningful parts. Most tasks do not need Max or Ultra.
Use it for quick feedback
Turn on Fast mode when the change is well scoped and a short iteration loop matters more than deeper exploration.
Codex surfaces
Use the desktop app as your main workspace, then use Remote to keep an eye on running work from another supported device.
Your control center for everything
Coordinate projects and long-running tasks, run work in parallel, and keep the terminal, browser, diffs, and review next to the conversation.
Stay connected to running work
Start or continue chats, steer active work, approve actions, and review results while the task keeps running on your connected computer.
Plugins and skills
Use plugins to give Codex access to tools and services. Use skills to give it a repeatable way to do a job.
Installable bundles that package skills, authenticated apps, and MCP servers into reusable workflows.
Instructions Codex follows for a specific workflow, such as building a web app, reviewing React, or testing a frontend.
A plugin can bundle authenticated apps, MCP servers, and the skills needed to use them well.
Make Codex work your way
GitHubTriage pull requests, issues, and CI
SlackRead and manage team conversations
NotionUse specs, research, and project context
LinearFind issues, scope, and project status
GmailRead and manage email
Google CalendarCheck schedules and manage events
Useful plugins
Work context and communication
Examples: Google Drive, Gmail, Google Calendar, Slack
Source control and review
Examples: GitHub
Project tracking
Examples: Linear
Hosting providers
Examples: Vercel, Cloudflare, Render, Convex
Service providers
Examples: Supabase, Neon
Builder workflows
Examples: Build Web Apps, Build iOS Apps, Build macOS Apps, Build React Native Apps, Build Web Data Visualizations, Game Studio
Features for front-end work
Open each feature to see what it gives Codex while it works on a running interface.
Open the running page beside the task, navigate it, inspect screenshots, and check the actual behavior.
Expose DOM state, computed styles, console output, network activity, and performance details when available.
Point to a specific visual problem and keep the feedback attached to the interface.
Inspect the diff, comments, checks, and the effect of each change without losing task context.
Run the project, use local tools, read logs, and execute focused tests from the same task.
Generate concept art and production assets, then use them directly in the frontend.
Project setup
Put stable project guidance in the repository so Codex does not have to rediscover it in every task.
Explain how this project works
Point Codex to the important folders, commands, conventions, and constraints it should preserve.
Package repeatable workflows
Add focused instructions for design, copy, testing, deployment, or any task the team performs regularly.
Workshop repository
Clone the repository before the exercises. It contains the setup and starting points used throughout the workshop.
Clone the repo
Skills, the starter project for later, and starter prompts for the workshop.