Beginner

React + Firebase Stack

Build React apps with Firebase backend. UI components, design integration, testing, and real-time database access.

5 servers31.8K tokens16% of context

Token Budget

31.8K used (15.9%)168.2K remaining

Playwright MCP10.3K (5.1%)

GitHub MCP10.3K (5.1%)

Figma MCP4.1K (2.1%)

Magic MCP (21st.dev)2.1K (1.0%)

Context7 MCP1.0K (0.5%)

Moderate token usage. You will have good room for prompts but watch if adding more servers.

Config

Paste in ~/.claude.json

json

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp"
      ]
    },
    "github-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-github"
      ],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "YOUR_GITHUB_PERSONAL_ACCESS_TOKEN"
      }
    },
    "figma-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "figma-mcp"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_FIGMA_ACCESS_TOKEN"
      }
    },
    "magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@21st-dev/magic"
      ],
      "env": {
        "TWENTY_FIRST_API_KEY": "YOUR_TWENTY_FIRST_API_KEY"
      }
    },
    "context7-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@upstash/context7-mcp"
      ]
    }
  }
}

Included Servers

Magic MCP (21st.dev)

21st.dev

ui-design

Generate professional React and Tailwind UI components using 21st.dev's component library and AI builder from your editor.

4.3k2.3k/wk2.1K tokens(1%)Official5d ago

Generate React components from descriptions. Firebase handles the backend, so your AI time is best spent on polished UI.

Figma MCP

Community

ui-design

Access Figma designs, extract design tokens, inspect layers, and bridge the gap between design and code from your AI editor.

28954/wk4.1K tokens(2%)1y ago

Import design specs directly into your React components. Firebase apps are frontend-heavy — design fidelity matters more here.

Playwright MCP

Microsoft

testing

Automate browser interactions, take screenshots, fill forms, and test web applications using Microsoft Playwright from your AI editor.

27.5k1433.4k/wk10.3K tokens(5%)Officialyesterday

Test your React + Firebase app in a real browser. Verify auth flows, real-time updates, and Firestore interactions end-to-end.

Context7 MCP

Upstash

documentation

Pull up-to-date documentation and code examples for any library directly into your prompt context using the Context7 API.

46.5k213.3k/wk1.0K tokens(0.5%)Official2d ago

Firebase SDK and React both move fast. Current docs prevent mixing up Firebase v8 and v9 modular syntax — a common AI mistake.

GitHub MCP

Anthropic

developer-tools

Access the GitHub API to manage repositories, issues, pull requests, branches, and workflows directly from your AI editor.

79.1k45.9k/wk10.3K tokens(5%)Official3d ago

Version control and CI for your React app. Manage deployments to Firebase Hosting through GitHub Actions workflows.