Claude Code Integration

Prerequisites

• Claude Code CLI installed
• A React/Next.js project with shadcn/ui initialized
• Tailwind CSS v4

1. Add the CLAUDE.md file

Download the context file to your project root. Claude Code reads CLAUDE.md automatically and gains full knowledge of your components.

curl -o CLAUDE.md https://kit.newth.ai/ai/CLAUDE.md

2. Configure the MCP server

Create or edit .mcp.json in your project root:

{
  "mcpServers": {
    "n3wth-kit": {
      "command": "npx",
      "args": ["-y", "shadcn@latest", "registry:mcp"],
      "env": {
        "REGISTRY_URL": "https://kit.newth.ai/r/registry.json"
      }
    }
  }
}

3. Install components

npx shadcn add https://kit.newth.ai/r/button.json
npx shadcn add https://kit.newth.ai/r/card.json

Or tell Claude Code: "Install the card component from kit.newth.ai". It will run the command for you.

4. Usage examples

Build a settings page using the n3wth design system

Add a pricing section with Card components and semantic colors

Tips

• Commit CLAUDE.md to your repo so everyone gets the same AI context
• Use headless mode: claude -p "..."
• Reference component names directly for unambiguous results