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

  1. Open your project in the Supabase dashboard
  2. Click the green Connect button (top toolbar)
  3. Select MCP
  4. Set the client to Claude Code
  5. 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:

  1. Type /mcp and press Enter
  2. Select Supabase → Enter
  3. Select authenticate → Enter
  4. 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