Integrowanie usług Firebase przy użyciu pomocy AI

Uprość konfigurację Firebase w przypadku aplikacji internetowych, korzystając z narzędzi deweloperskich opartych na AI, takich jak Antigravity, Cloud Code, Codex i Cursor. Korzystając z umiejętności agenta Firebase w połączeniu z Firebase CLIserwerem Firebase MCP, możesz przekształcić agenta AI do kodowania w specjalistę od Firebase, który potrafi pisać kod, konfigurować Firebase Security Rules i zarządzać aktywnymi zasobami.

W tym przewodniku znajdziesz informacje o tym, jak za pomocą agenta do kodowania opartego na AI skonfigurować Cloud Firestore, AuthenticationFirebase Hostingaplikacji internetowej. Wkrótce opublikujemy informacje o aplikacjach na iOS, Androida i Fluttera.

Dlaczego warto korzystać z umiejętności i narzędzi agenta Firebase?

Ogólne modele AI często mają problemy z określonymi konfiguracjami projektów lub nieaktualnymi informacjami. Ten zestaw narzędzi wypełnia tę lukę:

  • Umiejętności agenta Firebase: umiejętności zapewniają agentowi do kodowania wiedzę specjalistyczną. Dostarczają one aktualną dokumentację i optymalne przepływy pracy, dzięki czemu agent zna prawidłowy, zalecany przez Firebase sposób strukturyzacji architektury.
  • Serwer MCP Firebase: serwer MCP zapewnia agentowi kodującemu kontekst i dostęp. Ustanawia standardowy protokół, który umożliwia agentowi programowe sprawdzanie aktywnych zasobów projektu, plików lokalnych i konfiguracji.
  • Firebase CLI: interfejs wiersza poleceń daje agentowi do kodowania możliwość działania. Jest to narzędzie wykonawcze, którego agent używa do wykonywania złożonych zadań, takich jak inicjowanie baz danych, zarządzanie konfiguracjami uwierzytelniania użytkowników i wdrażanie kodu w Twoim imieniu.

Korzystanie z umiejętności agenta Firebase wraz z Firebaseinterfejsem CLI i serwerem Firebase MCP zapewnia agentowi AI do kodowania dodatkowe możliwości:

  • Podejmij działanie: nie ograniczaj się do pisania kodu. Agent może inicjować usługi, zarządzać Authentication użytkownikami, wdrażać nowe Firebase Security Rules i pracować bezpośrednio z Twoimi Cloud Firestore danymi.
  • Bądź na bieżąco: korzystaj z oficjalnych promptów uwzględniających wersję, aby przeprowadzić agenta przez zadania konfiguracyjne.
  • Zwiększanie dokładności: dostęp do środowiska i schematów projektu, aby zapewniać bardziej trafne i dokładne informacje.
  • Obniżanie kosztów tokenów: umiejętności agenta wczytują szczegółową dokumentację tylko wtedy, gdy wymaga tego konkretne zadanie, co minimalizuje koszty sesji.

W których usługach Firebase mogą pomóc umiejętności i narzędzia agenta?

Ten przewodnik koncentruje się głównie na tym, jak umiejętności agenta, interfejs Firebase CLI i serwer MCP Firebase współpracują ze sobą, aby pomóc Ci szybko skonfigurować te usługi i funkcje:

  • Cloud Firestore: udostępnianie bazy danych NoSQL.
  • Authentication Skonfiguruj bezpieczne logowanie użytkowników.
  • Firebase Security Rules: generowanie i udoskonalanie Security Rules dla aplikacji.
  • Firebase Hosting: skonfiguruj projekt pod kątem wdrożenia statycznej aplikacji internetowej.

Pełną listę dostępnych funkcji znajdziesz tutaj.

Ogólny przepływ pracy

Poniższe kroki opisują ogólny proces korzystania z umiejętności agenta Firebase do konfigurowania i używania usług Firebase w aplikacji internetowej. W tle umiejętności agenta używają Firebaseinterfejsu CLI i serwera Firebase MCP do wykonywania tych zadań.

Krok 1. Zainstaluj umiejętności agenta Firebase

W większości przypadków możesz zainstalować umiejętności agenta Firebase w wybranym edytorze za pomocą jednego promptu:

Antigravity

Umiejętności agenta Firebase są uwzględnione w jednym z pakietów integracji Build with Google dla Antigravity. Ten pakiet możesz włączyć na poziomie globalnym w 2 miejscach:

  • Podczas wprowadzania: zaznacz pole wyboru stosu Firebase.
  • W ustawieniach: otwórz Ustawienia > Dostosowywanie. W sekcji Build with Google Plugins (Twórz za pomocą wtyczek Google) kliknij Customize (Dostosuj), a następnie Download (Pobierz) w przypadku integracji z Firebase.

Jeśli wolisz dostęp na poziomie projektu, uruchom to polecenie w katalogu projektu:

npx skills add firebase/agent-skills --agent=antigravity

Claude Code

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

Codex

npx skills add firebase/agent-skills --agent=codex

Kursor

Umiejętności agenta Firebase możesz zainstalować bezpośrednio w Cursor Marketplace lub uruchamiając w terminalu to polecenie:

npx skills add firebase/agent-skills --agent=cursor

Inni agenci

npx skills add firebase/agent-skills

Krok 2. Połącz się z serwerem Firebase MCP

Wiele umiejętności agenta Firebase wykorzystuje Firebaseinterfejs CLI do wykonywania zadań, ale zalecamy połączenie agenta AI do kodowania z serwerem Firebase MCP. To połączenie zwiększa możliwości agenta w zakresie interakcji ze środowiskiem Firebase, zapewniając głębszą integrację i dostęp.

Metoda wspomagana przez AI

W większości przypadków możesz poprosić agenta AI do kodowania o skonfigurowanie serwera Firebase MCP. Jeśli jednak ma z tym problem lub nie widzisz na liście serwera MCP Firebase, przejdź na metodę ręczną.

Metoda ręczna

Antigravity

Aby skonfigurować Antigravity tak, aby używała serwera MCP Firebase:

  1. Antigravitykliknij menu w panelu Agent > Serwery MCP.
  2. Wybierz Firebase > Zainstaluj.

Spowoduje to automatyczną aktualizację pliku mcp_config.json, który możesz wyświetlić, klikając Zarządzaj serwerami MCP u góry panelu Sklep MCP > Wyświetl surową konfigurację. Plik będzie zawierać te informacje:

{
  "mcpServers": {
    "firebase-mcp-server": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Firebase Studio

Aby skonfigurować Firebase Studio do korzystania z serwera Firebase MCP, zmień lub utwórz plik konfiguracyjny: .idx/mcp.json.

Jeśli plik jeszcze nie istnieje, utwórz go, klikając prawym przyciskiem myszy katalog nadrzędny i wybierając Nowy plik. Dodaj do pliku te wiersze:

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Claude

Claude Code

  • Opcja 1. Instalacja za pomocą wtyczki (zalecane)

    Najłatwiejszym sposobem skonfigurowania serwera Firebase MCP w Claude Code jest zainstalowanie oficjalnej wtyczki Firebase:

    1. Dodaj Marketplace Firebase z wtyczkami Claude:

      claude plugin marketplace add firebase/firebase-tools
    2. Zainstaluj wtyczkę Claude do Firebase:

      claude plugin install firebase@firebase
    3. Sprawdź instalację:

      claude plugin marketplace list
  • Opcja 2. Ręczne skonfigurowanie serwera MCP

    Możesz też ręcznie skonfigurować serwer MCP Firebase:

    1. W folderze aplikacji uruchom to polecenie:

      claude mcp add firebase npx -- -y firebase-tools@latest mcp
    2. Sprawdź instalację:

      claude mcp list

      Powinny się w nim znajdować:

      firebase: npx -y firebase-tools@latest mcp - ✓ Connected
      

Claude Desktop

Aby skonfigurować Claude Desktop do korzystania z serwera MCP Firebase, zmień plik claude_desktop_config.json. Możesz otworzyć lub utworzyć ten plik w menu Claude > Ustawienia. Kliknij kolejno kartę DeweloperEdytuj konfigurację.

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Cline

Aby skonfigurować Cline tak, aby używał serwera MCP Firebase, edytuj plik cline_mcp_settings.json. Możesz otworzyć lub utworzyć ten plik, klikając ikonę serwerów MCP u góry panelu Cline, a następnie klikając przycisk Skonfiguruj serwery MCP.

{
  "mcpServers": {
    "firebase": {
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"],
      "disabled": false
    }
  }
}

Kursor

Opcja 1. Wtyczka Marketplace (zalecana)

Zainstaluj wtyczkę Firebase z Cursor Marketplace. Spowoduje to automatyczne skonfigurowanie serwera MCP i udostępnienie umiejętności agenta Firebase.

Opcja 2. Konfiguracja MCP jednym kliknięciem

Jeśli chcesz dodać serwer MCP tylko do konfiguracji globalnej, kliknij ten przycisk:

Instalowanie serwera MCP

Opcja 3. Konfiguracja ręczna

Jeśli wolisz skonfigurować serwer dla konkretnego projektu lub chcesz ręcznie edytować ustawienia, zaktualizuj plik mcp.json:

  • W przypadku konkretnego projektu edytuj .cursor/mcp.json
  • W przypadku wszystkich projektów (globalnych) edytuj ~/.cursor/mcp.json
"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

VS Code Copilot

Aby skonfigurować jeden projekt, otwórz do edycji plik .vscode/mcp.json w obszarze roboczym:

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

Aby serwer był dostępny w każdym otwieranym projekcie, zmień ustawienia użytkownika, na przykład:

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

Windsurfing

Aby skonfigurować edytor Windsurf, zmodyfikuj plik~/.codeium/windsurf/mcp_config.json:

"mcpServers": {
  "firebase": {
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

Krok 3. Zainicjuj usługi Firebase

Po skonfigurowaniu umiejętności i narzędzi agenta możesz używać języka naturalnego, aby agent AI do kodowania skonfigurował Cloud Firestore, AuthenticationFirebase Hosting.

  1. Poproś agenta o skonfigurowanie usługi. Możesz na przykład używać takich promptów:

    • Skonfiguruj Cloud Firestore jako bazę danych tej aplikacji.
    • Utwórz stronę logowania za pomocą Authentication i zaktualizuj Security Rules, aby zapewnić, że tylko autoryzowani użytkownicy mogą odczytywać i zapisywać własne dane.
    • Skonfiguruj Firebase Hosting i wdroż aplikację w wersji produkcyjnej.
  2. Zapoznaj się z informacjami i wykonaj wszystkie czynności, które może Ci zaproponować agent, np.:

    1. Plany: agent proponuje strategię na podstawie istniejącej bazy kodu.
    2. Łączy: agent łączy Twój kod lokalny z istniejącym projektem w Firebase lub pomaga Ci utworzyć nowy projekt w Firebase.
    3. Inicjuje zasoby: agent dodaje do bazy kodu wymagane biblioteki i konfigurację Firebase.
    4. Aktualizuje pliki: agent tworzy i aktualizuje wszystkie niezbędne pliki, takie jak firestore.rules (aby określić, kto może odczytywać, zapisywać lub wysyłać zapytania dotyczące danych w bazie danych) lub firebase.json (aby poinformować Firebase CLI, które usługi wdrożyć i jak je skonfigurować).
    5. Wykonuje: pracownik przeprowadzi Cię przez dodatkowe czynności konfiguracyjne lub wdrożeniowe.

Ogólne wskazówki dotyczące promptów dla asystenta kodowania AI

Aby w pełni wykorzystać możliwości agenta AI do kodowania, zwłaszcza podczas pracy z wielopłaszczyznowymi integracjami, takimi jak Firebase, traktuj interakcję jako współpracę, a nie jednorazowe polecenie.

Podawaj konkretne informacje i kontekst

Serwer MCP Firebase dostarcza agentowi wiele informacji o Twoim projekcie, ale najlepsze wyniki uzyskasz, używając jasnych i konkretnych promptów w języku naturalnym. Unikaj niejasnych próśb.

  • Niejasne: „Napraw błąd bazy danych”.
  • Szczegółowe: „Podczas próby zapisu w kolekcji „users” w Cloud Firestore pojawia się błąd „permission denied”. Sprawdź moje firestore.rules i zaproponuj rozwiązanie, które umożliwi uwierzytelnionym użytkownikom zapisywanie zmian w ich własnym dokumencie”.

Iteruj i doprecyzuj

Agenty AI do kodowania rzadko generują idealny kod za pierwszym razem w przypadku złożonych zadań. Jeśli odpowiedź nie jest do końca trafna, kontynuuj rozmowę:

  • Podaj komunikaty o błędach: wklej do czatu wszelkie błędy terminala lub dzienniki konsoli.
  • Poproś o wprowadzenie zmian: „Ten kod korzysta ze starszego pakietu SDK w wersji 8. Przepisz go za pomocą modułowego pakietu SDK Firebase w wersji 9."
  • Poproś o wyjaśnienia: „Wyjaśnij, jak te Firebase Security Rules chronią dane użytkowników”.

Sprawdź przed wykonaniem

Agenty AI do kodowania są potężne, ale mogą popełniać błędy lub „halucynować” (wymyślać nieprawidłowo nazwane funkcje lub usługi).

  • Sprawdź kod: przed wdrożeniem w środowisku produkcyjnym zawsze przeczytaj wygenerowany kod, zwłaszcza Firebase Security Rulesi pliki konfiguracyjne (np. firebase.json).
  • Testuj lokalnie: w miarę możliwości poproś agenta o pomoc w lokalnym testowaniu zmian przed ich wprowadzeniem.

Używanie połączenia MCP

Serwer MCP Firebase zapewnia agentowi bezpośredni wgląd w strukturę projektu, dzięki czemu możesz odwoływać się do konkretnych plików, aby uzyskać dostosowane porady dotyczące implementacji.

  • Przykład: „Spójrz na mój plik src/web/index.html i pokaż mi, gdzie dodać standardowy skrypt inicjowania Firebase”.

Dalsze kroki