The Creative
MCP Stack

You're going to install four MCP servers for me into Claude Code. After this, I'll have a creative stack that handles video, design, database, and UI components from one chat.

The four MCPs:
1. Remotion (video framework documentation)
2. Google Stitch (UI mockups + landing pages via Google AI)
3. Supabase (database access)
4. Magic by 21st.dev (UI component library)

**Install all four globally.** Every install command below uses the `-s user` flag (or an installer that writes to my global config). Global scope means the MCP is registered to my user account, so it's available in every Claude Code session anywhere on my machine. Without `-s user`, Claude Code only registers the MCP in the current directory's `.mcp.json`, which means the tools disappear the moment I `cd` somewhere else. These are creative-stack tools I want available everywhere.

For each MCP below, do the following:
1. Ask me for any API keys or IDs you need
2. Run the install command yourself using the Bash tool
3. Verify by running `claude mcp list` and checking the server appears
4. If a step fails, tell me exactly what failed and how to fix it before moving on

Do them in order. Stop and ask if anything is unclear.

---

## MCP 1: Remotion

No API key. No account. Just run:

```bash
claude mcp add -s user remotion -- npx -y @remotion/mcp@latest
```

This gives me `remotion-documentation` tools globally. Confirm it shows up in `claude mcp list`.

---

## MCP 2: Google Stitch

Ask me first:
- Do I have a Google Cloud project ID with billing enabled? (If no, send me to https://console.cloud.google.com to create one)
- Do I have a Stitch project on https://stitch.withgoogle.com? (If no, send me to create one)

Once I confirm both, run the Stitch wizard (it handles gcloud login, API enable, and MCP registration in one go):

```bash
npx @_davideast/stitch-mcp init
```

The wizard is interactive. Walk me through it. When it finishes, register Stitch in Claude Code with my project ID:

```bash
claude mcp add -e GOOGLE_CLOUD_PROJECT=MY_PROJECT_ID -s user stitch -- npx -y @_davideast/stitch-mcp proxy
```

Replace `MY_PROJECT_ID` with the actual one I gave you.

---

## MCP 3: Supabase

Ask me first:
- Do I have a Supabase account? (If no, send me to https://supabase.com. Free, no card needed.)
- Do I have a project I want to connect? (If no, walk me through creating one. If yes, ask for the project ref. It's in Settings → General → Reference ID.)

Then install with the hosted HTTP server (uses browser OAuth, no token needed):

```bash
claude mcp add --transport http -s user supabase "https://mcp.supabase.com/mcp?project_ref=MY_PROJECT_REF&read_only=true"
```

Replace `MY_PROJECT_REF` with my actual project ref. The `read_only=true` flag is recommended for safety. Tell me I can drop it later if I want write access.

First time I use Supabase tools, a browser opens to log in and authorize Claude. Tell me to expect that.

---

## MCP 4: Magic by 21st.dev

Ask me first:
- Do I have a 21st.dev account and API key? (If no, send me to https://21st.dev/magic/console to sign up and generate one. Free tier exists.)

Then run the official installer (writes to my global Claude config automatically, so it's available everywhere by default):

```bash
npx @21st-dev/cli@latest install claude --api-key MY_API_KEY
```

Replace `MY_API_KEY` with the actual key.

---

## Final verification

After all four are installed, run:

```bash
claude mcp list
```

I should see all four in the output: `remotion`, `stitch`, `supabase`, and `magic` (or `@21st-dev/magic`). Each one should be marked as user-scope (global). If any show up as local-scope, re-run that install with `-s user` added.

Tell me to fully quit and restart Claude Code so the new tools load.

Then give me one quick test prompt for each MCP I can run to confirm it's working. Keep them short, one sentence each.