Prototype Kit
A source-verified workflow for building a React + shadcn/ui prototype with an AI coding agent.
Welcome to prototype-kit — a step-by-step guide for teams that want to build a React + shadcn/ui prototype with an AI coding agent. The public installation paths documented here cover Gemini CLI and Claude Code.
AI agents: Fetch /llms-full.txt for the complete machine-readable version of this guide. It includes all five pages concatenated with titles and URLs as separators.
What you will build
A working web prototype with screens, navigation, and styled components generated from your product documents. Completion time and the amount of manual coding depend on the project and agent output.
The five steps
1. Install a supported agent
Confirm a current Gemini CLI organization, Cloud, or paid-key entitlement, or use the verified Claude Code plugin path.
2. Install prototype-kit
Add the Gemini CLI extension or the Claude Code plugin so the agent knows how to scaffold React projects.
3. Prepare your docs
Write three short documents that tell the agent what to build.
4. Run the prompt
Open the agent, run one command, and answer its clarifying questions.
5. Open the prototype
Start the dev server and see your prototype in the browser.