MCP do Firebase no Firebase Studio

1. Visão geral

Neste codelab, você vai praticar o uso do agente de prototipagem de apps com o servidor MCP do Firebase no Firebase Studio para criar um app da Web full-stack que usa o Firebase Realtime Database.

GIF animado do app final

O que você vai aprender

  • Gerar um web app estático usando o agente de prototipagem de apps
  • Configurar o servidor MCP do Firebase
  • Adicionar o Firebase Realtime Database usando o Firebase MCP

Pré-requisitos

  • Um navegador da sua escolha, como o Google Chrome
  • Uma Conta do Google para a criação e o gerenciamento do seu projeto do Firebase

2. Gerar seu app usando o agente de prototipagem de apps

O agente de prototipagem de apps usa o Gemini no Firebase para criar seu app. Mesmo usando comandos idênticos, os resultados podem variar. Se você tiver dificuldades, fornecemos um conjunto de arquivos que podem ser adicionados ao seu espaço de trabalho para retomar o laboratório em vários pontos de verificação ao longo deste codelab.

  1. Faça login na sua Conta do Google, participe do Programa para desenvolvedores do Google e abra o Firebase Studio.
  2. No campo Prototipar um app com IA, insira uma descrição do app:
    An app for a picker wheel that allows custom input.
  3. Clique em Melhorar o comando. Revise o comando aprimorado.
  4. Clique em Prototipar com IA.
  5. Revise o blueprint de app sugerido. Clique em personalizar o ícone para a edição do codiconPersonalizar para editar.
  6. Clique em Salvar.
  7. Quando o blueprint terminar de incorporar suas atualizações, clique em Prototipar este app.Blueprint do app
  8. Se o blueprint tiver elementos de IA, o agente vai pedir uma chave do Gemini. Adicione sua própria chave da API Gemini ou clique em Gerar automaticamente para gerar uma chave da API Gemini. Se você clicar em Gerar automaticamente, o Firebase Studio vai criar um projeto do Firebase e gerar uma chave da API Gemini para você.
  9. O agente de prototipagem de apps usa o blueprint para criar uma primeira versão do app. Quando isso é feito, a prévia do app aparece ao lado de uma interface de chat do Gemini. Revise e teste o app. Se encontrar erros, clique em Corrigir erro no chat para permitir que o agente corrija os próprios erros.

3. Configurar o MCP do Firebase no Firebase Studio

O servidor MCP do Firebase amplia os recursos do agente de prototipagem de apps, oferecendo ferramentas que ele pode chamar para configurar, gerenciar e extrair dados dos serviços do Firebase, incluindo o Firebase Authentication, o Cloud Firestore e o Firebase Data Connect. Veja como configurar.

  1. No Firebase Studio, clique em Ícone de visualização de código do StudioMudar para o Code para abrir a visualização de código.
  2. No terminal (Shift+Ctrl+C), execute o seguinte comando para fazer login na sua conta do Firebase. Siga as instruções na tela e deixe todas as opções padrão:
    firebase login --no-localhost
  3. No Explorer (Ctrl+Shift+E), clique com o botão direito do mouse na pasta .idx e selecione Novo arquivo. Nomeie o arquivo como mcp.json e pressione Enter.
  4. Adicione as configurações do servidor a .idx/mcp.json.
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    Verifique se você está conectado ao servidor MCP do Firebase. Você vai ver entradas de registro semelhantes no painel "Saída", com "Gemini" selecionado como o canal certo.MCPManager dos registros do Gemini

4. Adicionar o Firebase Realtime Database usando o Firebase MCP

Meta 1: adicionar o Firebase ao app

  1. Mude para o Prototyper. Na interface de chat, peça para o agente criar um projeto.
    Create a Firebase project for my app.
    O agente vai chamar a ferramenta MCP do Firebase firebase_create_project.Pule esta etapa se você já tiver criado um projeto do Firebase ao usar a opção de geração automática para receber uma chave da API Gemini. O ID do projeto vai aparecer ao lado do nome do espaço de trabalho no canto superior esquerdo da tela. Como alternativa, peça ao agente para listar seus projetos e anote o que você quer usar.
    List my Firebase projects
    Espere que o agente chame a ferramenta MCP do Firebase firebase_list_projects.
  2. Peça ao agente para se conectar a esse projeto.
    Connect my app to my project `spinsync-3y3c6`.
    Verifique se há um arquivo .firebaserc que define seu projeto ativo. Caso contrário, peça para o agente atualizar seu ambiente do Firebase.
    Update my Firebase environment to use this project.
    Espere que o agente chame a ferramenta MCP do Firebase firebase_update_environment . No entanto, é possível que o agente faça isso sem chamar a ferramenta.Por fim, verifique se o ambiente do Firebase tem o projeto ativo correto e você como usuário autenticado.
    Show me my current Firebase environment.
    Espere que o agente chame a ferramenta MCP do Firebase firebase_get_environment.
  3. Peça ao agente para criar um app da Web no seu projeto do Firebase.
    Create a web app in my active Firebase project.
    Espere que o agente chame a ferramenta firebase_create_app e retorne o ID do app. Se o agente não fizer isso, tente de novo clicando em ou siga estas instruções para concluir a etapa no Console do Firebase.
    Use the App ID to get the SDK configuration and add to my app.
    Espere que o agente chame a ferramenta firebase_get_sdk_config e atualize seu código com a configuração do Firebase.Se a chave de API e outras configurações aparecerem em src/lib/firebase.ts depois que o agente declarar a conclusão da tarefa, peça para ele movê-las para manter seu app seguro.
    Secure my code by moving my Firebase config to the `.env` file.

Objetivo 2: adicionar o Firebase Realtime Database

  1. Fique ou mude para o Prototyper. Na interface de chat, peça ao agente para configurar o Firebase Realtime Database no seu projeto.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    Espere que o agente chame a ferramenta MCP do Firebase firebase_init e crie regras de segurança em database.rules.json como parte das mudanças no arquivo ao final desta conversa.
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    Aqui, você dá a todos acesso de leitura e gravação ao seu banco de dados. Fora deste codelab, você sempre precisa proteger seus bancos de dados. Saiba mais sobre esse assunto na nossa documentação.
  2. Mudar para "Código". No terminal (Shift+Ctrl+C), inicialize o Firebase Realtime Database.
    firebase init database
    Siga as instruções na tela e deixe as opções padrão.Em seguida, implante as regras de segurança para a instância do banco de dados.
    firebase deploy --only database
  3. Mude para o Prototyper. Peça ao agente para usar sua instância de banco de dados padrão para entradas do usuário.
    Use my default Realtime Database instance for user entries.
    O agente vai atualizar o restante do código-fonte para conectar o app à instância do banco de dados.

Meta 3: faça um teste

  1. Crie algumas novas entradas para a roda seletora e veja como elas aparecem na página do Firebase Realtime Database no Console do Firebase.

Firebase Realtime Database no console do Firebase

5. Conclusão

Parabéns! Você criou um web app de pilha completa usando o agente de prototipagem de apps com o Firebase MCP. Teste outras ferramentas oferecidas pelo servidor MCP do Firebase e expanda as funcionalidades do seu app.

Saiba mais