Guide

A UI kit for Codex

Agentic UI Kit gives Codex a catalog of 828 React and Next.js components, 18 app templates and 16 blueprints. Codex searches it through a local MCP server, installs what fits as source files with the shadcn CLI and applies your theme first, so it reuses tested UI before it writes new UI.

Install in two steps

The same install as Docs: install with your coding agent, with what is specific to Codex.

1. In your own terminal, once
Unzip the kit to your home folder and log in with the license key from your purchase. The key stays in your user config and never goes into an agent chat.
Your terminal
```
unzip ~/Downloads/agentic-ui-kit-*.zip -d ~
node ~/agentic-ui-kit/bin/agentic-ui.mjs login
```

2. Paste one prompt into Codex

Open Codex in your Next.js project and paste the prompt. In its step 1, replace detect with codex.

Prompt for Codex

Install Agentic UI Kit in this Next.js project, then build one screen with it.

1. Run: node ~/agentic-ui-kit/bin/agentic-ui.mjs setup --yes --validate --client detect
   If you are one of these agents, pass your own id instead of detect: claude-code, codex, cursor, vscode, gemini, kimi, opencode, amp, devin, antigravity, junie, zed, cline.
   If setup says the license key is missing, stop and ask me to run node ~/agentic-ui-kit/bin/agentic-ui.mjs login in my own terminal. Never ask me for the license key in this chat and never put it on a command line.
2. Run: node ~/agentic-ui-kit/bin/agentic-ui.mjs mcp check
3. Tell me the "next:" step that setup printed for you (approve, trust, reload or restart) so the agentic-ui MCP server loads.
4. Call the MCP tool understand_project. If the agentic-ui MCP tools are not loaded yet, run node .agents/skills/agentic-ui-extend/scripts/context.mjs --cwd . --json instead (in Claude Code the skills are in .claude/skills).
5. Build the screen below. Reuse the catalog first: call find_reusable_ui (or run node .agents/skills/agentic-ui-extend/scripts/find-reusable.mjs --intent "<what you need>" --cwd . --json), install what fits with node ~/agentic-ui-kit/bin/agentic-ui.mjs add <component>, and write only the glue code.
6. Run the project build (for example pnpm build) and fix every error.

Screen: a billing page with plan usage and invoices (replace with the screen you want).

Client id: --client codex
Status: Verified end to end in our recorded runs
Where to paste the prompt: The Codex CLI, IDE extension or app, opened on your project.
MCP config setup writes: .codex/config.toml
After setup: Trust this project and restart Codex (CLI, IDE or app) so it reads .codex/config.toml.
Notes: The sandbox blocks network by default, and setup and agentic-ui add download from the registry. Start Codex with -c sandbox_workspace_write.network_access=true, or approve those commands when Codex asks.
Codex reads AGENTS.md and the skills in .agents/skills.

Setup line for Codex (the prompt's step 1 with its id)

node ~/agentic-ui-kit/bin/agentic-ui.mjs setup --yes --validate --client codex

Start Codex with network access

codex -c sandbox_workspace_write.network_access=true

What Codex does with the MCP tools

Setup registers the agentic-ui server in .codex/config.toml. Codex also reads AGENTS.md and the skills in .agents/skills. When you ask for a screen, it:

calls understand_project to read your project profile, design tokens and config;
calls find_reusable_ui for each part of the screen and gets a reuse, adapt or build-new decision;
checks your theme with resolve_theme and applies it before adding components;
installs what fits with agentic-ui add, writes the glue code and runs your build.

All 9 tools are read-only: see the MCP server.

Example prompt

Once the project is set up, ask for a screen in plain words and tell Codex to reuse the catalog first:

Prompt for Codex

Build a billing page with plan usage and invoices.
Reuse the catalog first: call understand_project, then find_reusable_ui for each part of the screen.
Install what fits with node ~/agentic-ui-kit/bin/agentic-ui.mjs add <component>, write only the glue code, then run the project build and fix every error.

In a recorded run

Hollow Oak Brewing (Craft brewery), built with OpenAI Codex · 3 iterations + QA fix. The first prompt opened with “I run Hollow Oak Brewing, an independent craft brewery.” In that iteration OpenAI Codex made 5 MCP calls in 1 turn (387 s).

See the run, iteration by iteration

Questions

Do I need the MCP server to use the kit with Codex?

It is recommended, not required. Without it, the agent skills fall back to local scripts over the same catalog (context.mjs and find-reusable.mjs), and Codex installs components with the agentic-ui CLI.

Where does setup write the Codex config?

The MCP server goes in .codex/config.toml. Codex also reads AGENTS.md and the skills in .agents/skills. After setup: Trust this project and restart Codex (CLI, IDE or app) so it reads .codex/config.toml.

Does Codex see my license key?

No. You run login once in your own terminal; it stores the key in your user config. The setup prompt tells the agent to stop and ask you if the key is missing, never to ask for it in the chat.

Has the setup been tested with Codex?

Verified end to end in our recorded runs.

Other guides: Claude Code · Cursor