Best MCP Servers for React + Firebase in 2026

React + Firebase is a deliberately simple stack -- Firebase handles auth, database, storage, and hosting while React handles the UI. But the simplicity hides real pain points: the Firebase SDK went through a major rewrite (v8 namespaced to v9 modular), AI assistants constantly mix up the two syntaxes, auth flow testing requires a running browser, and the frontend-heavy nature means you spend most of your time building UI components. These five MCP servers address each friction point directly. For a detailed comparison of Firebase vs Supabase as a backend, see Supabase MCP vs Firebase MCP.

graph LR
    A[Your Editor] --> B[AI Assistant]
    B --> C[Magic MCP]
    B --> D[Context7 MCP]
    B --> E[Playwright MCP]
    B --> F[Figma MCP]
    B --> G[GitHub MCP]
    C --> H[UI Components]
    D --> I[Firebase / React Docs]
    E --> J[Browser]
    F --> K[Figma Files]
    G --> L[GitHub Actions]

Magic MCP (21st.dev) -- Components That Match Your Firebase App's Needs

Author: 21st.dev | Tools: 4 | Requires: 21st.dev API key

Four tools: component builder, component search, component refiner, and logo search. Everything generates React + Tailwind CSS. Firebase handles the backend, so your development time is overwhelmingly spent on the frontend -- auth forms, data tables, real-time chat interfaces, file upload widgets, dashboards.

Why use it

• Generate a complete dashboard layout with sidebar, header, data grid, and notifications in one step, then wire it to Firestore
• Refine functional but unpolished components -- fix spacing, add loading states, improve scroll behavior -- without touching Firebase logic
• Search 21st.dev's library for existing components before building from scratch
• Get production-ready responsive behavior and accessibility out of the box

Configuration

{
  "mcpServers": {
    "magic": {
      "command": "npx",
      "args": ["-y", "@21st-dev/magic"],
      "env": {
        "TWENTY_FIRST_API_KEY": "your-api-key"
      }
    }
  }
}

Get your API key from 21st.dev.

Context7 MCP -- Ending the Firebase v8 vs v9 Confusion

Author: Upstash | Tools: 2 | Setup: Zero-config (npx)

Two tools that fetch live documentation for any library. This server solves the single biggest pain point in AI-assisted Firebase development: the constant confusion between the v8 namespaced API and the v9/v10 modular API. Every Firebase service (Firestore, Auth, Storage, Cloud Functions) has two completely different API surfaces.

Why use it

• Get collection(db, 'messages') with getDocs (v9) instead of firebase.firestore().collection('users').get() (v8)
• Use onAuthStateChanged(auth, callback) instead of firebase.auth().onAuthStateChanged()
• Handle React 18/19 patterns correctly -- concurrent features, use hook, strict mode double-rendering with auth listeners
• Get current docs for any npm package in your stack, not just Firebase

Configuration

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp"]
    }
  }
}

No API key required.

Playwright MCP -- Testing Auth Flows and Real-Time Interactions

Author: Microsoft | Tools: 20 | Setup: Zero-config (npx)

Twenty tools for full browser automation: navigation, accessibility snapshots, clicking, typing, form filling, tab management, file uploads, dialog handling, screenshots, and JavaScript evaluation. Firebase apps rely heavily on client-side behavior that is difficult to test without a real browser. For a comparison with the alternative, see Playwright vs Puppeteer MCP. For setup details, see the Playwright MCP guide.

Why use it

• Walk through an entire sign-up flow (email/password, verification prompt, dashboard redirect, Firestore document creation) and report what happens
• Open two browser tabs, log in as different users, and verify Firestore real-time updates propagate correctly
• Catch race conditions between account creation and Firestore document creation in real time
• Report console errors during auth state transitions

Configuration

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp"]
    }
  }
}

No API keys. Launches a local browser on demand.

Figma MCP -- Design Fidelity for a Frontend-Heavy Stack

Author: Community | Tools: 8 | Requires: Figma access token

Tools to access Figma files and extract structured design data: color tokens, typography scales, spacing values, component properties, auto-layout settings, and layer hierarchy. When your backend is a managed service, product quality is determined almost entirely by UI quality.

Why use it

• Read exact padding, heading sizes, input styling, and button colors from a Figma frame and translate them to Tailwind classes
• Extract design tokens (spacing, colors, typography) programmatically instead of clicking through the inspect panel
• Maintain design fidelity across the entire app by referencing Figma specs directly in your editor
• Reduce the back-and-forth between design handoff and implementation

Configuration

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your-figma-token"
      }
    }
  }
}

Generate a personal access token from your Figma account settings.

GitHub MCP -- Version Control and Firebase Hosting Deployments

Author: Anthropic | Tools: 20 | Requires: GitHub personal access token

Twenty tools covering the full GitHub workflow: repositories, pull requests, issues, branches, code search, and GitHub Actions. For Firebase projects, the deployment pipeline through GitHub Actions is particularly important. See the GitHub MCP guide for a detailed walkthrough.

Why use it

• Create PRs that highlight Firestore security rule changes for extra review attention
• Monitor GitHub Actions deployment to Firebase Hosting and pull logs when deploys fail
• Check that new Cloud Functions are properly exported and included in firebase.json
• Search code for all components connected to a specific Firestore collection

Configuration

{
  "mcpServers": {
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "your-github-token"
      }
    }
  }
}

Create a personal access token with repo scope.

For the complete pre-configured stack, visit the React + Firebase Stack. If you are considering Supabase instead of Firebase, see the Supabase vs Firebase MCP comparison and the Next.js + Supabase guide.