Firebase MCP в Firebase Studio

1. Обзор

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

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

Что вы узнаете

  • Создайте статическое веб-приложение с помощью агента прототипирования приложений.
  • Connect to a Firebase project
  • Set up the Firebase MCP server
  • Добавьте Firestore с помощью Firebase MCP.

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

  • A browser of your choice, such as Google Chrome
  • Учетная запись Google для создания и управления вашим проектом Firebase.

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

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

  1. Войдите в свой аккаунт Google, присоединитесь к программе Google Developer Program и откройте Firebase Studio .
  2. В поле «Создайте прототип приложения с использованием ИИ» введите описание приложения: 
    An app for a picker wheel that allows custom input.
  3. Нажмите «Улучшить подсказку» . Просмотрите улучшенную подсказку.
  4. Click Prototype with AI .
  5. Review the suggested App Blueprint. Click customize icon for the codicon edit Customize to edit it.
  6. Нажмите « Сохранить ».
  7. После завершения внесения ваших изменений в проект, нажмите « Создать прототип этого приложения» . Blueprint for the app
  8. Если ваш шаблон содержит элементы ИИ, агент запросит у вас ключ Gemini. Добавьте свой собственный ключ API Gemini или нажмите «Автоматическая генерация» , чтобы сгенерировать ключ API Gemini. Если вы нажмете «Автоматическая генерация» , Firebase Studio создаст проект Firebase и сгенерирует для вас ключ API Gemini.
  9. Агент прототипирования приложений использует созданный шаблон для разработки первой версии вашего приложения. После завершения предварительный просмотр вашего приложения появится рядом с интерфейсом чата Gemini. Уделите немного времени проверке и тестированию вашего приложения. Если вы обнаружите ошибки, нажмите «Исправить ошибку» в чате, чтобы позволить агенту исправить свои ошибки.

3. (Optional) Get the code

Если у вас возникнут трудности, воспользуйтесь примерами файлов , чтобы более точно следовать инструкциям в примере приложения.

  1. Download the files in the folder .
  2. In Firebase Studio, click значок просмотра кода Switch to Code to open Code view.
  3. Перетащите загруженные файлы в панель Проводника Firebase Studio. Разрешите этим файлам заменить все существующие файлы.
  4. В терминале ( Shift + Ctrl + C ) выполните следующую команду для установки пакетов. 
    npm install
  5. Откройте панель «Управление версиями» в Firebase Studio, введите сообщение с описанием изменения кода, например, «импортирован код из GitHub», а затем нажмите «Зафиксировать» .
  6. Нажмите «Переключиться на прототип» , чтобы продолжить выполнение практического задания, используя примерную версию приложения.

4. Подключитесь к проекту Firebase.

Поздравляем! Ваше приложение работает локально. Чтобы добавить бэкэнд, вам нужно будет подключить его к проекту Firebase.

  1. Попросите агента прототипирования приложения подключиться к проекту Firebase.
    Connect to a Firebase project.
    Ожидайте, что агент создаст новый проект или подключится к существующему (если вы ранее использовали опцию автоматической генерации ключа API Gemini, ваш проект должен появиться рядом с названием вашей рабочей области в верхнем левом углу экрана), затем сгенерирует необходимую конфигурацию Firebase и интегрирует ее в ваше приложение через src/lib/firebase.ts (как показано).
    import { initializeApp, getApp, getApps } from 'firebase/app';

const firebaseConfig = {
  "projectId": "foo-bar-baz",
  "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
  "storageBucket": "foo-bar-baz.firebasestorage.app",
  "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
  "authDomain": "foo-bar-baz.firebaseapp.com",
  "measurementId": "",
  "messagingSenderId": "630673270654"
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

export default app;
    Если вышеуказанная подсказка не поможет выполнить задачу с первого раза, не стесняйтесь обратиться к агенту еще раз. При необходимости разбейте задачу на этапы. 
    Create a new Firebase project.

5. Set up Firebase MCP in Firebase Studio

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

  1. Нажмите studio code view icon Switch to Code to open the Code view.
  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 from Gemini logs

6. Add Firestore using Firebase MCP

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

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

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

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

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

  1. Вы также можете общаться с Firestore, чтобы запрашивать данные из вашей базы данных.
    List my Firestore collections.
    Ожидается, что Gemini вызовет инструмент Firebase MCP firestore_list_collections .

Пообщайтесь с Firestore

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

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

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