Create browser-based games | Codex use cases
Need
Backend stack
Default options
Fastify , WebSockets, Postgres , and Redis
Why it's needed
A strong default when the game needs persistence, matchmaking, leaderboards, or pub/sub.
use-cases/browser-games.md +7 −115
11name: Create browser-based games# Create browser-based games | Codex use cases
2tagline: Define a game plan and let Codex build and test it in a live browser.
3summary: Use Codex to turn a game brief into first a well-defined plan, and then
4 a real browser-based game. Use imagegen to generate visual assets, and let
5 Codex test the game in a live browser to iterate on controls and UI.
6skills:
7 - token: $playwright
8 url: https://github.com/openai/skills/tree/main/skills/.curated/playwright-interactive
9 description: Play the game in a live browser, inspect the current state, and
10 iterate on controls, timing, and UI feel against the real build.
11 - token: $imagegen
12 description: Generate concept art, sprites, backgrounds, and UI assets, then
13 keep the prompts reusable for later asset batches.
14 - token: $openai-docs
15 url: https://github.com/openai/skills/tree/main/skills/.curated/openai-docs
16 description: Pull current official guidance before wiring OpenAI-powered
17 features into the game.
18bestFor:
19 - Building a browser-based game from scratch
20 - Game builds where controls, visuals, and deployment all need repeated
21 testing and tuning
22starterPrompt:
23 title: Plan the Game Before You Build It
24 body: >-
25 Use $playwright-interactive, $imagegen, and $openai-docs to plan and build a
26 browser game in this repo.
27 2
283 Implement PLAN.md, and log your work under `.logs/`.Need
29relatedLinks:
30 - label: Custom instructions with AGENTS.md
31 url: /codex/guides/agents-md
32 - label: Codex skills
33 url: /codex/skills
34techStack:
35 - need: Web game stack
36 goodDefault: "[Next.js](https://nextjs.org/) with [Phaser](https://phaser.io/)
37 or [PixiJS](https://pixijs.com/)"
38 why: A practical default for browser-based game UI plus the rendering layer.
39 - need: Backend stack
40 goodDefault: "[Fastify](https://fastify.dev/), WebSockets,
41 [Postgres](https://www.postgresql.org/), and [Redis](https://redis.io/)"
42 why: A strong default when the game needs persistence, matchmaking,
43 leaderboards, or pub/sub.
44 4
455## IntroductionBackend stack
46 6
477Building a game is one of the clearest examples of where Codex helps with more than code generation. A real game usually needs a written concept, a rendering layer, frontend shell work, backend state, asset production, and constant visual tuningDefault options
48 8
499This use case works best when Codex starts by writing down exactly what the game should do, then iterates using Playwright interactive to test the game in a live browser.[Fastify](https://fastify.dev/) , WebSockets, [Postgres](https://www.postgresql.org/) , and [Redis](https://redis.io/)
50 10
5111## Start with the game planWhy it's needed
52 12
5313Before Codex scaffolds anything, ask it to create a `PLAN.md` that defines the game in concrete terms:A strong default when the game needs persistence, matchmaking, leaderboards, or pub/sub.
54 14
55- the player goal
56- the main loop
57- inputs and controls
58- win and fail states
59- progression or difficulty
60- visual direction
61- the stack and hosting assumptions
62- the milestone order
63
64That plan matters because “build a game” is too vague on its own. Codex needs to know how to implement each part of the game, and often refer to the implementation details as it builds.
65
66You can activate plan mode with the `/plan` slash command.
67Take the output and save it to a `PLAN.md` file.
68
69## Guide Codex's behavior with AGENTS.md
70
71To make sure Codex follows the plan, verifies its work and uses the right tools, define an `AGENTS.md` that looks like this:
72
73```text
74# Game name
75
76<Type of game>
77
78Tech Stack:
79
80- NextJS for frontend (hosted on Vercel)
81- <insert technology> for rendering
82- Fastify for backend, websockets (hosted on <hosting platform>)
83- Postgres for database (hosted on <hosting platform>)
84- Redis for caching and pub/sub (hosted on <hosting platform>)
85- OpenAI for generative AI features
86
87Tips:
88
89- Use build and test commands to verify your work as soon as you complete a feature or task
90- Use the PLAN.md file to guide your work when building new features
91- Log your work under .logs (create new log files as you see fit) to record your thought process and decisions, and reference them when iterating on features
92- Use playwright to test the visual output of your work, and iterate if it doesn't look right or fit the vibe
93- Use imagegen to generate visual assets for your work, and every time you generate a collection of assets, save the prompts you used to be able to continue generating more of the same assets later (create files in .prompts)
94- Use Context7 MCP to fetch <rendering framework> docs
95```
96
97This allows Codex to run independently for a long time, and use the relevant skills as needed.
98
99## Leverage skills
100
101Add the skills mentioned in the AGENTS.md file:
102
103- Imagegen so Codex can generate visual assets for the game as needed
104- Playwright interactive so Codex can test the game in a live browser
105- OpenAI docs so Codex can fetch the latest OpenAI API documentation
106- Optionally, you can add the Context7 MCP server to fetch the latest docs for the rendering framework
107
108Learn more about how to add skills in the [skills documentation](https://developers.openai.com/codex/skills).
109
110**Tip**: Ask Codex to save prompts for image generation in a file so that
111 visual assets are all consistent. Give directions on the style of assets you
112 want to generate, and let Codex come up with detailed reusable prompts.
113
114## Let Codex work and iterate
115
116Codex will generate a first version of the game based on the initial plan.
117
118If you have a lot of image assets that need to be generated, this first version can take a while, sometimes several hours. Since Codex can test its work and try the game in a live browser, it can go on for a long time without any input.
119
120The more defined the plan, the better the final output after the first iteration.
121
122As you test it out, iterate as needed by providing screenshots, asking for gameplay changes or updates to visual assets, until you are happy with the result.