StackMCP

React + Firebase Stack for VS Code

Beginner5 servers31.8K tokens

Configuration

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

Where to save

Paste the config above into:

.vscode/settings.json → mcp section

Environment Variables

Replace the YOUR_ placeholders with your actual values.

TWENTY_FIRST_API_KEYrequired

21st.dev API key

Used by: Magic MCP (21st.dev)

FIGMA_ACCESS_TOKENrequired

Figma personal access token

Used by: Figma MCP

GITHUB_PERSONAL_ACCESS_TOKENrequired

GitHub personal access token

Used by: GitHub MCP

What’s in this stack

Magic MCP (21st.dev)4 tools

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

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

Figma MCP8 tools

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

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

Playwright MCP20 tools

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

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

Context7 MCP2 tools

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

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

GitHub MCP20 tools

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

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

Other editors

Claude CodeCursorWindsurfClaude DesktopContinue