Esta página foi traduzida pela API Cloud Translation.

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 de pilha completa que usa o Firestore.

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 Firestore usando o MCP do Firebase

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.

Faça login na sua Conta do Google, participe do Programa para desenvolvedores do Google e abra o Firebase Studio.
No campo Prototipar um app com IA, insira uma descrição do app:
```
An app for a picker wheel that allows custom input.
```
Clique em Melhorar o comando. Revise o comando aprimorado.
Clique em Prototipar com IA.
Revise o blueprint de app sugerido. Clique em Personalizar para editar.
Clique em Salvar.
Quando o blueprint terminar de incorporar suas atualizações, clique em Prototipar este app.
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ê.
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.

No Firebase Studio, clique em Mudar para o Code para abrir a visualização de código.
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
```
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.

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 Firestore usando o MCP do Firebase

Meta 1: adicionar o Firebase ao app

Mude para o Prototyper. Na interface de chat, peça ao agente para criar um projeto do Firebase.
```
Create a Firebase project.
```
Pule esta etapa se você já tiver um projeto do Firebase criado 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.
Peça para o agente usar seu projeto do Firebase no desenvolvimento local.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Verifique se há um arquivo .firebaserc que define seu projeto padrão do Firebase. Esse arquivo informa à Firebase CLI qual projeto do Firebase usar. Se você não encontrar o arquivo, peça de novo especificamente por ele.
Peça ao agente para criar um app da Web no seu projeto do Firebase.
```
Create a web app in my Firebase project.
```
Espere que o agente chame a ferramenta firebase_create_app. Se o agente não fizer isso, tente de novo ou siga estas instruções para concluir a etapa no Console do Firebase.O agente pode chamar a ferramenta firebase_get_sdk_config e criar os arquivos necessários para conectar seu projeto ao web app do Firebase. Se isso não acontecer, peça para ele fazer isso.
```
Add my Firebase SDK configuration to my app.
```
O agente geralmente coloca sua chave de API e outras configurações diretamente em src/lib/firebase.ts. Peça para ele mover esses dados do código do aplicativo para manter o app seguro.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Meta 2: adicionar o Firestore

Mudar para "Código". Na interface de chat, peça ao agente para usar o Firestore no seu app.
```
Use Firestore for user entries. Give anyone read and write access.
```
O agente vai atualizar seu código-fonte para usar o Firestore em vez do armazenamento local para entradas do usuário e criar regras de segurança do Firestore. Ele pode chamar a ferramenta MCP do Firebase firebase_init ou pedir que você execute o comando firebase init no terminal para inicializar o Firestore. De qualquer forma, verifique se o arquivo firestore.rules tem o seguinte conteúdo antes de continuar.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if 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.
No terminal (Shift+Ctrl+C), inicialize o Firestore se o agente não tiver solicitado isso antes.
```
firebase init firestore
```
Siga as instruções na tela e deixe as opções padrão. Não substitua as regras de segurança da etapa anterior.Em seguida, implante as regras de segurança para a instância do banco de dados.
```
firebase deploy --only firestore
```
Isso vai provisionar uma instância de banco de dados do Firestore para você.

Meta 3: faça um teste

Recarregue o app, crie e exclua entradas na roda seletora e confira essas atualizações na página do Firestore no Console do Firebase.

App no Studio e no console

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.