Build a React app with AI, in three prompts
Copy a prompt, paste it into your AI coding agent, and it does the rest — the project, the pages, and the checks that its styles really work. No experience needed.
One sentence is enough. Steps 2 and 3 are written for it — or leave it empty and replace the bracketed part yourself.
- Free and MIT licensed
- No account, no API key
- Light and dark themes
- Works on every screen size
Before you start
Node.js 22 or newer
An agent that runs commands
An empty folder
Step 1: Set up the app
- React + TypeScript + Vite
- Box Kite installed
- AGENTS.md
- MCP server connected
- A running app
Paste this as the first message. The agent scaffolds a React and TypeScript project with Vite, installs Box Kite, copies the library’s instructions into AGENTS.md where it reads them on every run, and connects the MCP server that answers whether a style it wrote actually works. It finishes by building the app and giving you an address to open.
Set up a new web app in this folder with React, TypeScript, Vite and the Box Kite UI library (@box-kite/react). Run every command yourself, one step at a time; if a command asks a question, take the default. 1. Scaffold. If this folder has no package.json, run `npm create vite@latest . -- --template react-ts --no-interactive`, then `npm install`. If it already holds a React project, keep it and go to step 2. 2. Install the library: `npm install @box-kite/react`. 3. Give yourself its instructions. Copy `node_modules/@box-kite/react/AGENTS.md` to `./AGENTS.md`, and create `CLAUDE.md` containing the single line `@AGENTS.md`. Read AGENTS.md now, before writing any code: this library is newer than your training data, and its numbers do not mean what they mean in libraries with similar prop names. 4. Connect its MCP server, which runs the real styling engine and tells you whether a prop value works. The server is `npx -y @box-kite/mcp` over stdio; add it at project level the way your tool does it — Claude Code: `claude mcp add --scope project box-kite -- npx -y @box-kite/mcp`; Cursor: `.cursor/mcp.json`; VS Code: `.vscode/mcp.json`. If I have to restart you before you can use it, tell me. 5. Remove the template's styling: delete `src/index.css` and `src/App.css` and the lines importing them. Box Kite writes all the CSS itself, so the app needs no stylesheet. 6. Replace `src/App.tsx` with a small welcome page built only from Box Kite components (`<Flex>`, `<H1>`, `<P>`, `<Button>`), wrapped in `<Box.Theme use="global">` so it follows the system's light or dark mode. 7. Check your work: `npm run build` must pass with no errors. Then start `npm run dev` and give me the address to open. Finish with a short summary of what you did, in plain words.
Step 2: Build a landing page
- Hero
- Features
- How it works
- Testimonials
- Pricing
- FAQ
- Light and dark
The page a product is introduced on, with real copy written for what you are building, in a light and a dark theme, on every screen size.
Build a landing page for [describe your product in one sentence]. Read AGENTS.md before you write anything, and use Box Kite for every part of the page: no CSS files, no `style` attribute and no other UI or CSS library. When you are unsure what a prop or a component takes, ask the box-kite MCP server (`get_component`, `get_props`, `check_styles`) instead of guessing. The page, top to bottom: - A header with the product's name and links that scroll to the sections below. - A hero: a headline saying what it is, one sentence on who it is for, a main call-to-action button and a secondary one. - Three or four features, each with an icon (from lucide-react, inside Box Kite's `<Icon>`), a title and a sentence. - How it works, in three steps. - Three short testimonials. - Pricing: three plans, with the middle one highlighted. - Frequently asked questions, as an `<Accordion>`. - A closing call to action, then a footer. Write real, specific copy for this product — no lorem ipsum. Make it look finished: one consistent palette from Box Kite's colour tokens, generous spacing, light and dark themes that both read well, and a layout that works on a phone, a tablet and a desktop. Use the semantic components (`<Header>`, `<Nav>`, `<Main>`, `<Section>`, `<Footer>`, a single `<H1>`) so the page is accessible. When it is done, run `npm run build` and fix every error, then open the page and fix every `[box-kite]` warning in the browser console. Then tell me what you built.
Step 3: Add a product page
- Gallery
- Options and quantity
- Add to cart with a toast
- Tabs
- Shipping and returns
- Related products
The page a product is bought on. Use it after the landing page, or on its own after step 1 — it adds a router if the app has none yet.
Add a product page for [describe your product in one sentence], at its own address in the app (add react-router if there is no router yet), and link to it from the home page.
Read AGENTS.md before you write anything, and use Box Kite for every part of the page: no CSS files, no `style` attribute and no other UI or CSS library. When you are unsure what a prop or a component takes, ask the box-kite MCP server (`get_component`, `get_props`, `check_styles`) instead of guessing.
The page:
- A gallery: one large image with clickable thumbnails under it. Use placeholder photos from https://picsum.photos until I give you real ones.
- The name, a one-line pitch, the price and a star rating.
- The options as a `<RadioGroup>` (a size, a colour or a plan — whatever fits this product) and a quantity.
- A main `<Button>` ("Add to cart", or whatever fits) that confirms with a toast: `<Toaster>` once in the app, `toast.success()` on the press.
- `<Tabs>` for the description, the specifications and the reviews.
- Shipping and returns, as an `<Accordion>`.
- Related products, as a row of cards.
Write realistic content for this product, and keep the look of the rest of the app: both themes, every screen size.
When it is done, run `npm run build` and fix every error, then open the page and fix every `[box-kite]` warning in the browser console. Then tell me the address of the new page.After that
- Keep talking to it in plain words. “Make the hero shorter”, “use green instead of blue”, “add a contact form” — the same rules travel with every request, because they live in
AGENTS.md. - Start from a finished section. Blocks installs a data grid page, a settings form or a dashboard shell into the project, and the Showcase is every component there is to ask for.
- Set up another agent by hand. The Built for AI page has the rules file, the skill and the MCP server for each agent, one command at a time.
Questions
Do I need to know how to code?
No. Each prompt tells the agent which commands to run, which files to write and how to check the result. You read what it did, open the address it gives you, and ask for changes in plain words.
Which AI agent should I use?
Any agent that can run commands in a folder: Claude Code, Cursor, Codex, VS Code with Copilot in agent mode, or Windsurf. A chat in a browser tab cannot do it, because it has no terminal.
What does it cost?
Box Kite and its MCP server are free and MIT licensed. The agent is billed by whoever provides it.
Can I use the prompts in an existing project?
Yes. The setup prompt keeps a React app that is already there and adds Box Kite to it; the landing and product page prompts work on any app the first one has set up.
What if something looks wrong?
Say so and ask the agent to check. A style value Box Kite does not accept writes nothing at all, and the MCP server it connected in step 1 is how it finds out which one it was.
Your app is one paste away
Copy the setup prompt, open an empty folder in your agent, and paste.