React + Firebase Stack
Build React apps with Firebase backend. UI components, design integration, testing, and real-time database access.
Token Budget
Moderate token usage. You will have good room for prompts but watch if adding more servers.
Config
Paste in ~/.claude.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
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 MCP
Community
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 MCP
Microsoft
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 MCP
Upstash
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 MCP
Anthropic
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.
Recommended Skills
Skills that pair with the servers in this stack. Learn more
For Figma MCP
Official Figma skill to translate designs into production-ready code with pixel-perfect accuracy. Follows a 7-step structured workflow.
npx skillsadd figma/mcp-server-guide/implement-designStructured workflow for Figma-to-code with 1:1 visual fidelity. Uses Figma MCP for design context, screenshots, and assets.
npx skillsadd openai/skills/figma-implement-designFrontend development expertise for React, Next.js, TypeScript. Pairs with Figma MCP to turn designs into production components.
For Playwright MCP
Official Microsoft Playwright CLI skill for browser automation, E2E testing, and web scraping workflows.
npx skillsadd microsoft/playwright-cliTest generation, coverage analysis, and E2E testing patterns. Pairs with Playwright MCP for automated browser testing.
For GitHub MCP
Use gh CLI for all GitHub operations including stacked PR workflows, issue management, and CI/CD automation.
npx skillsadd callstackincubator/agent-skills/githubDebug and fix failing GitHub PR checks in GitHub Actions. Automatically diagnoses CI issues and suggests fixes.
npx skillsadd openai/skills/gh-fix-ciAddress PR review comments using GitHub CLI. Streamlines the code review response workflow.
npx skillsadd openai/skills/gh-address-commentsAutomated code review for TypeScript, JavaScript, Python, Go. Analyzes PRs for complexity, SOLID violations, and code smells.