Firebase MCP в Firebase Studio

1. Обзор

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

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

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

  • Создайте статическое веб-приложение с помощью агента App Prototyping
  • Настройте сервер Firebase MCP
  • Добавьте базу данных Firebase Realtime с помощью 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. Добавьте базу данных Firebase Realtime с помощью Firebase MCP

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

  1. Переключитесь на Prototyper . В интерфейсе чата попросите агента создать проект.
    Create a Firebase project for my app.
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_create_project . Пропустите этот шаг, если у вас уже есть проект Firebase, созданный с помощью функции автоматической генерации для получения ключа API Gemini. Идентификатор вашего проекта должен отображаться рядом с именем рабочей области в левом верхнем углу экрана. В качестве альтернативы, попросите агента составить список ваших проектов и укажите проект, который вы хотите использовать.
    List my Firebase projects
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_list_projects .
  2. Попросите агента подключиться к этому проекту.
    Connect my app to my project `spinsync-3y3c6`.
    Убедитесь, что вы видите файл .firebaserc , который определяет ваш активный проект. Если нет, попросите агента обновить вашу среду Firebase.
    Update my Firebase environment to use this project.
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_update_environment . Однако агент может сделать это и без вызова инструмента. Наконец, убедитесь, что в вашей среде Firebase активен правильный проект, а вы являетесь аутентифицированным пользователем.
    Show me my current Firebase environment.
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_get_environment .
  3. Попросите агента создать веб-приложение в вашем проекте Firebase.
    Create a web app in my active Firebase project.
    Ожидайте, что агент вызовет инструмент firebase_create_app и вернет идентификатор приложения. Если агенту это не удастся, повторите попытку, нажав кнопку , или следуйте этим инструкциям в консоли Firebase, чтобы завершить этот шаг.
    Use the App ID to get the SDK configuration and add to my app.
    Ожидайте, что агент вызовет инструмент firebase_get_sdk_config и обновит ваш код с учетом вашей конфигурации Firebase. Если ваш ключ API и другие конфигурации появятся в src/lib/firebase.ts после того, как агент объявит о завершении задачи, попросите его переместить их, чтобы обеспечить безопасность вашего приложения. 
    Secure my code by moving my Firebase config to the `.env` file.

Цель 2: Добавить базу данных Firebase Realtime

  1. Оставайтесь или переключитесь на Prototyper . В интерфейсе чата попросите агента настроить базу данных Firebase Realtime в вашем проекте.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    Ожидайте, что агент вызовет инструмент Firebase MCP firebase_init и создаст правила безопасности в database.rules.json как часть изменений файла в конце этого этапа разговора.
    {
    "rules": {
        ".read": true,
        ".write": true
    }
}
    Здесь вы предоставляете всем доступ к вашей базе данных на чтение и запись. За пределами этой CodeLab вам всегда следует обеспечивать безопасность своих баз данных. Подробнее об этом читайте в нашей документации .
  2. Перейдите в режим кода . В терминале ( Shift + Ctrl + C ) инициализируйте базу данных Firebase Realtime.
    firebase init database
    Следуйте инструкциям на экране и оставьте параметры по умолчанию. Затем разверните правила безопасности для вашего экземпляра базы данных. 
    firebase deploy --only database
  3. Переключитесь на Prototyper . Попросите агента использовать экземпляр базы данных по умолчанию для записей пользователей.
    Use my default Realtime Database instance for user entries.
    Ожидайте, что агент обновит остальную часть исходного кода, чтобы подключить ваше приложение к экземпляру базы данных.

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

  1. Создайте несколько новых записей для колеса выбора и наблюдайте, как они появляются на странице Firebase Realtime Database в Firebase Console .

База данных Firebase Realtime в консоли Firebase

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

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

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