Develop
Claude Code
Optional — connect Claude Code and the Nuxt / Supabase MCP servers so you can build features by chatting with your editor.
Install Claude Code
Install the CLI
npm install -g @anthropic-ai/claude-code
Open Claude Code in Your Project
cd my-app
claude
Replace my-app with your app's folder name. On first launch, press Enter to accept the first option.
Connect MCP Servers
Three MCPs to add: Nuxt, Nuxt UI, and Supabase.
Add Nuxt MCP
claude mcp add --transport http nuxt-remote https://nuxt.com/mcp
Add Nuxt UI MCP
claude mcp add --transport http nuxt-ui-remote https://ui.nuxt.com/mcp
Add Supabase MCP
- Open your project in the Supabase dashboard
- Click the green Connect button (top toolbar)
- Select MCP
- Set the client to Claude Code
- Copy the command under Step 1 — Add MCP server and paste it into your terminal. It looks like:
claude mcp add --scope project --transport http supabase "https://mcp.supabase.com/mcp?project_ref=YOUR_REF"
Install Agent Skills
npx skills add supabase/agent-skills
When the prompts appear, press spacebar to toggle on Postgres best practices and Supabase best practices. Make sure Claude Code is selected. Press Enter until it finishes.
Authenticate the Supabase MCP
In Claude Code:
- Type
/mcpand press Enter - Select Supabase → Enter
- Select authenticate → Enter
- Complete the flow in your browser
Verify
Ask Claude:
List all tables in my Supabase database.
You should see profiles, teams, team_members, and the others from the initial migration.
Next Steps
- Cloudflare — deploy to production
- Examples — pattern walkthroughs for real features