Claude Code integration
Set up an Untitled UI React with Claude Code in seconds. Our starter kits include providers, routing, and everything you need to get started.
Prerequisites
In order to quickly kickstart your project with Untitled UI and Claude Code, you need to have Claude Code installed in your machine.
Please refer to the Claude Code documentation to install it if you haven't already.
Start using Untitled UI with Claude
We have prepared starter kits that you can use with Claude Code so that you can get started with Untitled UI in seconds. First, choose your framework:
Next.js starter kit – Untitled UI
Click to open Next.js starter kit.
Vite starter kit – Untitled UI
Click to open Vite starter kit.
Then, clone the chosen starter kit in your local machine:
git clone https://github.com/untitleduico/untitledui-nextjs-starter-kit
Once you have the starter kit in your local machine, you can start using Untitled UI with Claude Code by just running the following command in the project directory:
claude
And now you should be able to freely prompt Claude Code to continue developing your project.
CLAUDE.md instructions
Our starter kits include a CLAUDE.md file that provides Claude Code with context about the Untitled UI component library. This file is automatically read by Claude Code when you start a session.
If you want to add Untitled UI instructions to an existing project, download the AGENT.md file and save it as CLAUDE.md in your project root:
curl -o CLAUDE.md https://www.untitledui.com/react/AGENT.md
Or download it manually: AGENT.md
MCP integration
Looking to connect Claude Code to the Untitled UI component library via MCP (Model Context Protocol)? Check out our MCP integration guide for setup instructions.
FAQs
Please refer to our frequently asked questions page for more.
We have starter kits for Next.js and Vite. Clone one with git clone https://github.com/untitleduico/untitledui-nextjs-starter-kit or git clone https://github.com/untitleduico/untitledui-vite-starter-kit, then run claude in the project directory.
It gives Claude Code context about the Untitled UI component library. Claude Code reads it automatically when you start a session in the project, so you don't have to explain the library in your prompts.
Download our AGENT.md file and save it as CLAUDE.md in your project root: curl -o CLAUDE.md https://www.untitledui.com/react/AGENT.md.
Yes, once you connect the Untitled UI MCP server with claude mcp add --transport http untitledui https://www.untitledui.com/react/api/mcp. Claude Code can then search the library and run the CLI command that installs a component. See the MCP integration guide for details.
Add the MCP server without any headers and Claude Code will prompt you to log in through your browser the first time you request a PRO component. If you prefer an API key, add --header "Authorization: Bearer YOUR_API_KEY" to the claude mcp add command instead.