Simplifique a configuração do Firebase para web apps usando ferramentas de desenvolvimento com tecnologia de IA, como Antigravity, Claude Code, Codex e Cursor. Ao usar as habilidades do agente do Firebase em conjunto com a CLI do Firebase e o servidor MCP do Firebase, você pode transformar seu agente de programação de IA em um especialista do Firebase que pode escrever código, configurar o Firebase Security Rules e gerenciar recursos ativos.
Este guia aborda o uso de um agente de programação de IA para ajudar a configurar Cloud Firestore, Authentication e Firebase Hosting para um app da Web. Em breve, vamos disponibilizar informações sobre apps iOS, Android e Flutter.
Por que usar as habilidades e ferramentas do agente do Firebase?
Os modelos de IA gerais costumam ter dificuldades com configurações específicas de projetos ou informações desatualizadas. Este kit de ferramentas resolve esse problema:
- Habilidades do agente do Firebase: as habilidades fornecem ao agente de programação experiência no domínio. Eles fornecem documentação atualizada e fluxos de trabalho ideais para que o agente saiba a maneira correta e recomendada pelo Firebase de estruturar sua arquitetura.
- Servidor MCP do Firebase: o servidor MCP dá ao agente de programação contexto e acesso. Ele estabelece um protocolo padrão para que o agente inspecione programaticamente os recursos ativos do projeto, os arquivos locais e as configurações.
- CLI Firebase: a interface de linha de comando dá ao agente de programação poder de ação. É a ferramenta de execução que o agente usa para realizar tarefas pesadas, como inicializar bancos de dados, gerenciar configurações de autenticação de usuários e implantar código em seu nome.
Usar as habilidades do agente do Firebase com a CLI Firebase e o servidor MCP do Firebase dá ao seu agente de programação de IA mais recursos:
- Entre em ação: faça mais do que apenas escrever código. Seu agente pode inicializar serviços, gerenciar usuários do Authentication, implantar novos Firebase Security Rules e trabalhar diretamente com seus dados do Cloud Firestore.
- Fique por dentro das novidades: use comandos oficiais e com reconhecimento de versão para orientar seu agente nas tarefas de configuração.
- Melhorar a precisão: acesse o ambiente e os esquemas do seu projeto para oferecer ajuda mais relevante e precisa.
- Reduzir os custos de token: as habilidades do agente carregam documentação detalhada apenas quando uma tarefa específica exige isso, o que minimiza a sobrecarga da sessão.
Quais serviços do Firebase podem ser usados com as habilidades e ferramentas do agente?
Este guia se concentra principalmente em como as habilidades do agente, a CLI Firebase e o servidor MCP do Firebase trabalham juntos para ajudar você a configurar rapidamente estes serviços e recursos:
- Cloud Firestore: provisione um banco de dados NoSQL.
- Authentication: configure o login seguro do usuário.
- Firebase Security Rules: gere e refine Security Rules para seu app.
- Firebase Hosting: configure seu projeto para a implantação de um app da Web estático.
Para uma lista completa do que está disponível, consulte a lista completa de habilidades do agente do Firebase.
Fluxo de trabalho geral
As etapas a seguir descrevem um fluxo de trabalho generalizado para usar as habilidades do agente do Firebase para configurar e usar os serviços do Firebase em um app da Web. Nos bastidores, as habilidades do agente usam a CLI Firebase e o servidor MCP do Firebase para concluir essas tarefas.
Etapa 1: instalar habilidades do agente do Firebase
Na maioria dos casos, é possível instalar as habilidades do agente do Firebase no editor de sua preferência com um único comando:
Antigravity
As habilidades do agente do Firebase estão incluídas como um dos pacotes de integração do Build with Google para Antigravity. É possível ativar esse pacote para acesso global em dois pontos:
- Durante a integração: marque a caixa de seleção da pilha do Firebase.
- Nas configurações: acesse Configurações > Personalizações. Em Build with Google Plugins, clique em Customize e em Download para a integração com o Firebase.
Se você preferir o acesso para envolvidos no projeto, execute o seguinte comando no diretório do projeto:
npx skills add firebase/agent-skills --agent=antigravity
Claude Code
claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase
Codex
npx skills add firebase/agent-skills --agent=codex
Cursor
É possível instalar habilidades do agente do Firebase diretamente no Cursor Marketplace ou executando o seguinte comando no terminal:
npx skills add firebase/agent-skills --agent=cursor
Outros agentes
npx skills add firebase/agent-skills
Etapa 2: conectar-se ao servidor do MCP do Firebase
Embora muitas habilidades do agente do Firebase usem a CLI Firebase para tarefas, é recomendável conectar seu agente de programação de IA ao servidor MCP do Firebase. Essa conexão aumenta a capacidade do seu agente de interagir com o ambiente do Firebase, oferecendo integração e acesso mais profundos.
Método assistido por IA
Na maioria dos casos, você pode pedir ao seu agente de programação de IA para configurar o servidor MCP do Firebase. No entanto, se ele tiver dificuldades ou não aparecer na lista, mude para o método manual.
Método manual
Antigravity
Para configurar o Antigravity para usar o servidor MCP do Firebase:
- Em Antigravity, clique no menu no painel do agente > Servidores MCP.
- Selecione Firebase > Instalar.
Isso atualiza automaticamente o arquivo mcp_config.json, que pode ser acessado clicando em Gerenciar servidores MCP na parte de cima do painel da loja do MCP > Ver configuração bruta, com o seguinte conteúdo:
{
"mcpServers": {
"firebase-mcp-server": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Firebase Studio
Para configurar o Firebase Studio para usar o servidor MCP do Firebase, edite ou
crie os arquivos de configuração: .idx/mcp.json
Se o arquivo ainda não existir, crie-o clicando com o botão direito do mouse no diretório principal e selecionando Novo arquivo. Adicione o seguinte conteúdo ao arquivo:
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Claude
Claude Code
Opção 1: instalar usando um plug-in (recomendado)
A maneira mais fácil de configurar o servidor MCP do Firebase no Claude Code é instalar o plug-in oficial do Firebase:
Adicione o marketplace do Firebase para plug-ins do Claude:
claude plugin marketplace add firebase/firebase-toolsInstale o plug-in do Claude para Firebase:
claude plugin install firebase@firebaseVerifique a instalação:
claude plugin marketplace list
Opção 2: configurar o servidor MCP manualmente
Como alternativa, você pode configurar manualmente o servidor MCP do Firebase:
Execute o comando a seguir na pasta do app:
claude mcp add firebase npx -- -y firebase-tools@latest mcpVerifique a instalação:
claude mcp listEla vai ser:
firebase: npx -y firebase-tools@latest mcp - ✓ Connected
Claude Desktop
Para configurar o Claude Desktop para usar o servidor MCP, do Firebase edite o
arquivo claude_desktop_config.json. Você pode abrir ou criar esse arquivo no
menu Claude > Configurações. Selecione a guia Desenvolvedor e clique em
Editar configuração.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Cline
Para configurar o Cline para usar o servidor MCP do Firebase, edite o
arquivo cline_mcp_settings.json. Você pode abrir ou criar esse arquivo clicando no
ícone Servidores MCP na parte superior do painel Cline e clicando no
botão Configurar servidores MCP.
{
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"],
"disabled": false
}
}
}
Cursor
Opção 1: plug-in do Marketplace (recomendado)
Instale o plug-in do Firebase no Cursor Marketplace. Isso configura automaticamente o servidor MCP e dá acesso às habilidades do agente do Firebase.
Opção 2: configuração do MCP com um clique
Se você quiser adicionar o servidor MCP apenas à sua configuração global, clique no botão a seguir:
Opção 3: configuração manual
Se preferir configurar o servidor para um projeto específico ou editar
as configurações manualmente, atualize o arquivo mcp.json:
- Para um projeto específico: edite
.cursor/mcp.json. - Para todos os projetos (global): edite
~/.cursor/mcp.json.
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
VS Code Copilot
Para configurar um único projeto, edite o arquivo .vscode/mcp.json em seu
espaço de trabalho:
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Para tornar o servidor disponível em todos os projetos que abrir, edite as configurações do usuário, por exemplo:
"mcp": {
"servers": {
"firebase": {
"type": "stdio",
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
}
Windsurf
Para configurar o Windsurf Editor, edite o arquivo
~/.codeium/windsurf/mcp_config.json:
"mcpServers": {
"firebase": {
"command": "npx",
"args": ["-y", "firebase-tools@latest", "mcp"]
}
}
Etapa 3: inicializar os serviços do Firebase
Com as habilidades e ferramentas do agente configuradas, agora você pode usar a linguagem natural para que seu agente de programação de IA configure Cloud Firestore, Authentication e Firebase Hosting.
Peça para o agente configurar um serviço. Por exemplo, você pode usar comandos como estes:
- Configure o Cloud Firestore como o banco de dados deste app.
- Crie uma página de login usando Authentication e atualize Security Rules para garantir que apenas usuários autorizados possam ler e gravar os próprios dados.
- Configure o Firebase Hosting e implante o app na produção.
Revise as informações e siga as etapas guiadas que o agente pode fornecer, como:
- Planos: o agente propõe uma estratégia com base na sua base de código atual.
- Conecta: seu agente vincula seu código local a um projeto do Firebase ou ajuda você a criar um novo.
- Inicializa recursos: o agente adiciona as bibliotecas e a configuração necessárias do Firebase à sua base de código.
- Atualiza arquivos: seu agente cria e atualiza todos os arquivos necessários,
como
firestore.rules(para definir quem pode ler, gravar ou consultar dados no seu banco de dados) oufirebase.json(para informar à CLI Firebase quais serviços implantar e como configurá-los). - Executa: o agente orienta você nas etapas de configuração ou implantação adicionais.
Dicas gerais para dar comandos a um agente de programação de IA
Para aproveitar ao máximo seu agente de programação de IA, especialmente ao trabalhar com integrações multifacetadas como o Firebase, trate a interação como uma colaboração em vez de um comando único.
Seja específico e dê contexto
Embora o servidor MCP do Firebase forneça ao agente um contexto significativo sobre seu projeto, comandos claros e específicos em linguagem natural geram os melhores resultados. Evite solicitações vagas.
- Vago: "Corrija o erro do banco de dados."
- Específico: "Recebo um erro de 'permissão negada' ao tentar gravar na
coleção 'users' em Cloud Firestore. Analise meu
firestore.rulese sugira uma correção que permita aos usuários autenticados gravar no próprio documento."
Itere e aprimore
Os agentes de programação de IA raramente geram código perfeito na primeira tentativa para tarefas complexas. Se uma resposta não estiver totalmente correta, continue a conversa:
- Forneça mensagens de erro: cole no chat erros de terminal ou registros do console.
- Pedir ajustes: "Esse código usa o SDK v8 mais antigo. Reescreva usando o SDK modular v9 do Firebase."
- Pedir explicações: "Explique como esses Firebase Security Rules protegem os dados do usuário".
Verifique antes de executar
Os agentes de programação de IA são poderosos, mas podem cometer erros ou "alucinar" (inventar funções ou serviços com nomes incorretos).
- Revise o código: sempre leia o código gerado, especialmente Firebase Security Rules e arquivos de configuração (como
firebase.json), antes de implantar na produção. - Teste localmente: sempre que possível, peça ao agente para ajudar você a testar mudanças localmente antes de colocá-las em produção.
Usar a conexão do MCP
Como o servidor MCP do Firebase oferece ao seu agente visibilidade direta da estrutura do projeto, é possível fazer referência a arquivos específicos para receber conselhos de implementação personalizados.
- Exemplo: "Analise meu arquivo
src/web/index.htmle mostre onde adicionar o script de inicialização padrão do Firebase".
Próximas etapas
- Confira uma lista completa de todas as habilidades disponíveis do agente do Firebase.
- Confira uma lista completa de todos os comandos, ferramentas e recursos disponíveis que o servidor MCP do Firebase oferece.
- Saiba mais sobre as ferramentas fornecidas pela CLI Firebase.