Firebase MCP в Firebase Studio

1. Обзор

В этой лабораторной работе вы попрактикуетесь в использовании агента App Prototyping вместе с сервером Firebase MCP в Firebase Studio для создания полнофункционального веб-приложения, использующего Firestore .

Анимированный GIF-файл финального приложения

Чему вы научитесь

  • Создайте статическое веб-приложение с помощью агента App Prototyping
  • Настройте сервер Firebase MCP
  • Добавить Firestore с помощью Firebase MCP

Что вам понадобится

  • Браузер по вашему выбору, например Google Chrome
  • Учетная запись Google для создания и управления вашим проектом Firebase

2. Создайте свое приложение с помощью агента App Prototyping.

Агент App Prototyping использует Gemini в Firebase для сборки вашего приложения. Даже при использовании одинаковых подсказок результаты могут различаться. Если вы застрянете, мы предоставили набор файлов, которые вы можете добавить в рабочее пространство, чтобы продолжить работу с несколькими контрольными точками в ходе этой практической работы.

  1. Войдите в свою учетную запись Google, присоединитесь к программе разработчиков Google и откройте Firebase Studio .
  2. В поле «Прототип приложения с ИИ» введите описание приложения: 
    An app for a picker wheel that allows custom input.
  3. Нажмите «Улучшить подсказку» . Просмотрите улучшенную подсказку.
  4. Нажмите «Прототип с ИИ» .
  5. Ознакомьтесь с предложенным планом приложения. Нажмите настроить значок для редактирования кода Настройте его, чтобы редактировать.
  6. Нажмите «Сохранить» .
  7. Когда в проект будут внесены все необходимые изменения, нажмите кнопку «Создать прототип этого приложения» . План приложения
  8. Если ваш проект содержит элементы ИИ, агент запросит ключ Gemini Gemini. Добавьте свой собственный ключ API Gemini или нажмите кнопку «Автоматическая генерация» , чтобы сгенерировать ключ API Gemini. Если нажать кнопку «Автоматическая генерация» , Firebase Studio создаст проект Firebase и сгенерирует ключ API Gemini.
  9. Агент прототипирования приложений использует схему для создания первой версии вашего приложения. После завершения предварительный просмотр вашего приложения появится рядом с интерфейсом чата Gemini. Уделите немного времени проверке и тестированию вашего приложения. Если вы обнаружите ошибки, нажмите «Исправить ошибку» в чате, чтобы агент мог исправить их самостоятельно.

3. Настройте Firebase MCP в Firebase Studio

Сервер Firebase MCP расширяет возможности агента App Prototyping, предоставляя инструменты, которые агент может вызывать для настройки, управления и извлечения данных из сервисов Firebase, включая Firebase Authentication, Cloud Firestore и Firebase Data Connect. Вот как это настроить.

  1. В Firebase Studio нажмите значок просмотра кода студии Переключитесь на Код , чтобы открыть представление кода.
  2. В терминале ( Shift + Ctrl + C ) выполните следующую команду, чтобы войти в свою учетную запись Firebase, следуя инструкциям на экране и оставив все параметры по умолчанию: 
    firebase login --no-localhost
  3. В проводнике ( Ctrl+Shift+E ) щёлкните правой кнопкой мыши по папке .idx и выберите «Новый файл» . Назовите файл mcp.json и нажмите Enter .
  4. Добавьте конфигурации сервера в .idx/mcp.json .
    {
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}
    Убедитесь, что вы подключены к серверу Firebase MCP. На панели «Выход» вы увидите похожие записи журнала, где в качестве канала справа будет выбран «Gemini». MCPManager из журналов Gemini

4. Добавьте Firestore с помощью Firebase MCP

Цель 1: добавить Firebase в ваше приложение

  1. Переключитесь на Prototyper . В интерфейсе чата попросите агента создать проект Firebase.
    Create a Firebase project.
    Пропустите этот шаг, если у вас уже есть проект Firebase, созданный с помощью функции автоматической генерации ключа API Gemini. Идентификатор вашего проекта должен отображаться рядом с названием вашего рабочего пространства в левом верхнем углу экрана. Вы также можете попросить агента составить список ваших проектов и указать, какой из них вы хотите использовать.
    List my Firebase projects.
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_list_projects .
  2. Попросите агента использовать ваш проект Firebase для локальной разработки.
    Use `spinsync-3y3c6` as my Firebase project in my local environment.
    Убедитесь, что вы видите файл .firebaserc , который задаёт проект Firebase по умолчанию. Этот файл сообщает Firebase CLI, какой проект Firebase использовать. Если вы не видите этот файл, запросите его ещё раз.
  3. Попросите агента создать веб-приложение в вашем проекте Firebase.
    Create a web app in my Firebase project.
    Ожидайте, что агент вызовет инструмент firebase_create_app . Если агенту это не удастся, повторите попытку или следуйте этим инструкциям в консоли Firebase. Агент может затем вызвать инструмент firebase_get_sdk_config и создать необходимые файлы для подключения вашего проекта к веб-приложению Firebase. Если этого не произойдёт, дайте ему указание сделать это.
    Add my Firebase SDK configuration to my app.
    Агент часто помещает ваш ключ API и другие конфигурации непосредственно в src/lib/firebase.ts . Попросите его перенести их из кода вашего приложения, чтобы обеспечить его безопасность. 
    Secure my code by moving my Firebase config to my `.env` file.

Цель 2: Добавить Firestore

  1. Переключитесь на Code . В интерфейсе чата попросите агента использовать Firestore в вашем приложении.
    Use Firestore for user entries. Give anyone read and write access.
    Ожидайте, что агент обновит ваш исходный код, чтобы использовать Firestore вместо локального хранилища для пользовательских записей, и создаст правила безопасности Firestore. Обратите внимание, что он может вызвать инструмент Firebase MCP firebase_init или запросить команду firebase init в терминале для инициализации Firestore. В любом случае, прежде чем продолжить, убедитесь, что вы видите файл firestore.rules со следующим содержимым.
    rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
    Здесь вы предоставляете всем доступ к вашей базе данных на чтение и запись. За пределами этого codeLab вам всегда следует обеспечивать безопасность своих баз данных. Подробнее об этом читайте в нашей документации .
  2. В терминале ( Shift + Ctrl + C ) инициализируйте Firestore, если агент не предложил вам сделать это ранее.
    firebase init firestore
    Следуйте инструкциям на экране и оставьте параметры по умолчанию. Не перезаписывайте правила безопасности из предыдущего шага. Затем разверните их для своего экземпляра базы данных.
    firebase deploy --only firestore
    Это предоставит вам экземпляр базы данных Firestore.

Цель 3: Протестировать

  1. Перезагрузите приложение, создайте и удалите записи на колесе выбора и просмотрите эти обновления на странице Firestore в консоли Firebase .

Приложение в Studio и Console

5. Заключение

Поздравляем! Вы успешно создали полнофункциональное веб-приложение с помощью агента App Prototyping в Firebase MCP. Вы можете попробовать другие инструменты сервера Firebase MCP и расширить возможности своего приложения.

Узнать больше