Integrar serviços do Firebase usando a assistência de IA

Simplifique a configuração do Firebase para apps da Web usando ferramentas de desenvolvimento com tecnologia de IA, como Antigravity, Claude Code, Codex e Cursor. Ao usar as habilidades do agente do Firebase com a Firebase CLI 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 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, Firebase 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 agentes de programação de IA geralmente têm dificuldades com configurações específicas de projetos ou informações desatualizadas. Esse kit de ferramentas preenche essa lacuna combinando instruções especializadas (habilidades do agente) com dois tipos complementares de ferramentas de execução de agente (CLI e servidor MCP):

  • Habilidades do agente do Firebase: forneça ao agente de programação conhecimento e fluxos de trabalho do domínio. Como a camada de instrução, as habilidades orientam o agente sobre as práticas recomendadas para trabalhar com o Firebase, incluindo a escrita de código. As habilidades também ensinam ao agente quando e como usar a Firebase CLI e o servidor MCP do Firebase.
  • Ferramentas de execução de agente:
    • Firebase CLI (ferramentas de linha de comando): fornece ferramentas para ciclo de vida do projeto e tarefas de ambiente. O agente pode executar comandos da CLI em um ambiente de terminal para configurar serviços em um projeto do Firebase, implantar sites completos ou recursos de back-end, iniciar emuladores locais e muito mais.
    • Servidor MCP do Firebase (ferramentas e recursos programáticos): fornece ferramentas para inspeção em tempo real e operações de dados. Por meio de chamadas de ferramentas estruturadas, o agente pode consultar e atualizar Cloud Firestore documentos de maneira programática, gerenciar Firebase Authentication usuários, validar Security Rules, extrair registros ou documentação diretamente no contexto, e muito mais.

O uso das habilidades do agente do Firebase com a Firebase CLI e o servidor MCP do Firebase oferece ao seu agente de programação de IA mais habilidades:

  • Entre em ação: faça mais do que apenas escrever código. Seu agente pode inicializar serviços, gerenciar Firebase Authentication usuários, implantar novas Firebase Security Rules, e trabalhar diretamente com seus dados Cloud Firestore.
  • Manter-se atualizado: use comandos oficiais e com reconhecimento de versão para orientar o agente nas tarefas de configuração.
  • Melhorar a precisão: acesse o ambiente e os esquemas do projeto para oferecer ajuda mais relevante e precisa.
  • Reduzir os custos de token: as habilidades do agente carregam a documentação detalhada apenas quando uma tarefa específica exige isso, o que minimiza a sobrecarga da sessão.

Serviços do Firebase aplicáveis

Este guia se concentra principalmente em como as habilidades do agente, a Firebase CLI e o servidor MCP do Firebase funcionam juntos para ajudar você a configurar rapidamente esses serviços e recursos:

  • Cloud Firestore: provisione um banco de dados NoSQL.
  • Firebase 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 implantação de apps da Web estáticos.

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 as 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

  • Opção 1: acesso global

    As habilidades do agente do Firebase estão incluídas no plug-in Firebase no Antigravity Marketplace (e como um pacote de integração do Build with Google). Instale o plug-in usando uma das seguintes opções:

    • No Antigravity Marketplace: clique em Customizações, selecione a guia Marketplace e clique em + no card do plug-in Firebase.
    • Na Antigravity CLI: execute /plugin install firebase@agent-marketplace (ou execute /plugin e instale o Firebase na guia Descobrir). Os plug-ins instalados em Antigravity também são sincronizados automaticamente com Antigravity CLI.
    • Durante a integração: selecione a caixa de seleção da pilha do Firebase.
  • Opção 2: acesso para envolvidos no projeto

    Execute o comando a seguir no diretório do projeto:

    npx skills add firebase/agent-skills --agent=antigravity
    

Claude Code

Execute estes comandos no terminal:

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

  • Opção 1: terminal do Codex

    Execute estes comandos no terminal:

    codex plugin marketplace add firebase/agent-skills
    codex plugin add firebase@firebase
    
  • Opção 2: app Codex

    1. Conclua as seguintes tarefas uma vez:

      1. Registre-se pelo terminal:

        codex plugin marketplace add firebase/agent-skills
        
      2. Reinicie o app Codex.

      3. Abra Plug-ins.

      4. Selecione o marketplace/fonte do Firebase.

      5. Abra Firebase e clique em + Instalar.

    2. Inicie uma nova tarefa.

    3. Digite @Firebase para selecionar o plug-in ou peça ao Codex para realizar uma tarefa do Firebase.

Cursor

  • Opção 1: instale o plug-in diretamente no Cursor Marketplace.

  • Opção 2:execute o comando a seguir no terminal:

    npx skills add firebase/agent-skills --agent=cursor
    

Outros agentes

Execute o comando a seguir no terminal:

npx skills add firebase/agent-skills

Etapa 2: conectar-se ao servidor MCP do Firebase

Embora muitas habilidades do agente do Firebase usem a Firebase CLI para tarefas, também é recomendável conectar seu agente de programação de IA ao servidor MCP do Firebase. Essa conexão melhora a capacidade do 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 se o servidor MCP do Firebase não estiver listado, mude para o método manual.

Método manual

Antigravity

Para configurar Antigravity para usar o servidor MCP do Firebase:

  1. No Antigravity, clique no menu no painel do agente > Servidores MCP.
  2. 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"]
    }
  }
}

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:

    1. Adicione o marketplace do Firebase para plug-ins do Claude:

      claude plugin marketplace add firebase/firebase-tools
    2. Instale o plug-in do Claude para Firebase:

      claude plugin install firebase@firebase
    3. Verifique 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:

    1. Execute o comando a seguir na pasta do app:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Verifique a instalação:

      claude mcp list

      Ela 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"]
    }
  }
}

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:

Instalar o servidor MCP

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"]
  }
}

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
    }
  }
}

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, Firebase Authentication e Firebase Hosting.

  1. Peça ao agente para configurar um serviço. Por exemplo, você pode usar comandos como estes:

    • Configure Cloud Firestore como o banco de dados desse 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 Firebase Hosting e implante o app na produção.
  2. Analise todas as informações e siga as etapas guiadas que o agente pode fornecer, como:

    1. Planos: seu agente propõe uma estratégia com base na sua base de código existente.
    2. Conexões: seu agente vincula o código local a um projeto do Firebase ou ajuda você a criar um novo projeto do Firebase.
    3. Inicializa recursos: seu agente adiciona as bibliotecas e a configuração necessárias do Firebase à sua base de código.
    4. 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 banco de dados) ou firebase.json (para informar à CLI do Firebase quais serviços implantar e como configurá-los).
    5. Executa: seu agente orienta você nas etapas adicionais de configuração ou implantação.

Dicas gerais para solicitar 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 o projeto, comandos de linguagem natural claros e específicos geram os melhores resultados. Evite solicitações vagas.

  • Vago: "Corrija o erro do banco de dados."
  • Específico: "Estou recebendo um erro de 'permissão negada' ao tentar gravar na coleção 'users' em Cloud Firestore. Analise minhas firestore.rules e sugira uma correção que permita que usuários autenticados gravem 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 todos os erros de terminal ou registros do console de volta no chat.
  • Peça ajustes: "Esse código usa o SDK v8 mais antigo. Reescreva-o usando o SDK modular do Firebase v9."
  • Solicite explicações: "Explique como essas 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 nomeadas ou serviços com nomes incorretos).

  • Analise o código: sempre leia o código gerado, especialmente Firebase Security Rules e os 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 enviá-las.

Use a conexão MCP

Como o servidor MCP do Firebase oferece ao agente visibilidade direta na estrutura do projeto, você pode referenciar arquivos específicos para receber conselhos de implementação personalizados.

  • Exemplo: "Analise meu arquivo src/web/index.html e mostre onde adicionar o script de inicialização padrão do Firebase."

Próximas etapas