Erste Schritte mit dem App-Prototyping-Kundenservicemitarbeiter

Firebase Studio bietet eine webbasierte Benutzeroberfläche, mit der Sie mithilfe von multimodalen Prompts wie natürlicher Sprache, Bildern und Zeichentools schnell Prototypen für KI-gestützte Web-Apps erstellen und generieren können. Der Agent unterstützt Next.js-Apps. Weitere Plattformen und Frameworks sind in Planung.

Der App-Prototyping-Agent ist ein optimierter No-Code-Entwicklungsablauf, bei dem mithilfe generativer KI eine Full-Stack-Web-App mit KI entwickelt, getestet, iteriert und veröffentlicht wird. Sie beschreiben Ihre App-Idee in natürlicher Sprache mit einem optionalen Bild und der Agent generiert einen App-Entwurf, Code und eine Webvorschau. Zur Unterstützung bei der Entwicklung und Veröffentlichung Ihrer Full-Stack-App kann Firebase Studio die folgenden Dienste automatisch für Sie bereitstellen:

  • Wenn Ihre App KI verwendet:Firebase Studio fügt Ihrer App die Gemini-Entwickler-API hinzu und nutzt die Vorteile von Genkit-Abläufen, um mit Gemini zu arbeiten. Sie können Ihren eigenen Gemini API-Schlüssel verwenden oder Firebase Studio ein Firebase-Projekt und einen Gemini API-Schlüssel für Sie bereitstellen lassen.
  • Wenn Sie Ihre App im Web veröffentlichen möchten:Firebase Studio erstellt ein Projekt und bietet eine schnelle Möglichkeit, Ihre App mit Firebase App Hosting zu veröffentlichen.

Sie können die App mit natürlicher Sprache, Bildern und Zeichentools optimieren, Code direkt bearbeiten, Änderungen rückgängig machen, die App veröffentlichen und ihre Leistung im Blick behalten – und das alles in Firebase Studio.

Jetzt starten

So starten Sie mit der App Prototyping agent:

  1. Melden Sie sich in Ihrem Google-Konto an und öffnen Sie Firebase Studio.

  2. Beschreiben Sie Ihre App-Idee im Feld Prototyp einer App mit KI erstellen in natürlicher Sprache.

    Optional kannst du deinem Prompt ein Bild hinzufügen. Das kann ein Diagramm des idealen Nutzerflusses Ihrer App oder ein Farbschema sein, an das Sie sich halten möchten.Firebase Studio Bilder dürfen maximal 3 MiB groß sein.

  3. Klicken Sie auf Mit KI einen Prototyp erstellen.

    Der App-Prototyping-Agent gibt einen App-Entwurf zurück, der einen vorgeschlagenen App-Namen, Hauptfunktionen und Stilrichtlinien enthält.

  4. Sehen Sie sich den Blueprint an. Sie können Gemini um Verbesserungen und Änderungen bitten und den Blueprint direkt bearbeiten:

    • Klicken Sie auf Anpassen und bearbeiten Sie den Blueprint direkt. Nehmen Sie die gewünschten Änderungen vor und klicken Sie auf Speichern.

    • Fügen Sie im Chatfeld im Feld Beschreiben… Erläuterungen und Kontext hinzu. Sie können auch zusätzliche Bilder hochladen.

  5. Wenn Sie den Blueprint genehmigt haben, klicken Sie auf Prototyp für diese App erstellen.

    Gemini generiert Code aus dem Blueprint und gibt eine Webvorschau zur Überprüfung zurück.

  6. Wenn Ihre App KI verwendet, werden Sie aufgefordert, einen Gemini API-Schlüssel hinzuzufügen oder zu generieren. Wenn Sie auf Automatisch generieren klicken, wird ein Firebase Studio-Schlüssel und ein Firebase-Projekt für Sie bereitgestellt.Gemini API

Nachdem Sie Ihre erste App erstellt haben, haben Sie folgende Möglichkeiten:

  • App ansehen und damit interagieren:Nach Abschluss der Codegenerierung wird eine Vorschau Ihrer App angezeigt. Sie können direkt mit der Vorschau interagieren, um sie zu testen. Weitere Informationen

  • Mit natürlicher Sprache testen und iterieren:Testen Sie Ihre App gründlich und arbeiten Sie mit der App Prototyping agent, um den Code und den Blueprint so lange zu iterieren, bis Sie zufrieden sind.

  • Direkt im Code Fehler beheben und iterieren:Klicken Sie auf Symbol für Code-Umschalter Zu Code wechseln, um die Ansicht Code zu öffnen. Dort sehen Sie alle Dateien Ihrer App und können den Code direkt ändern. Sie können jederzeit zu Prototyper mode at any time. wechseln.

    In der Code-Ansicht stehen Ihnen außerdem die folgenden hilfreichen Funktionen zur Verfügung:

    • Integrierte Debugging- und Berichtsfunktionen von Firebase Studio zum Prüfen, Debuggen und Überwachen Ihrer App.

    • KI-Unterstützung mit Gemini in Firebase entweder inline in Ihrem Code oder über einen interaktiven Chat (beides standardmäßig verfügbar). Im interaktiven Chat können Probleme diagnostiziert, Lösungen angeboten und Tools ausgeführt werden, mit denen Sie Ihre App schneller beheben können. Klicken Sie unten im Arbeitsbereich auf SparkGemini, um auf den Chat zuzugreifen.

  • App mit Firebase App Hosting veröffentlichen:Klicken Sie auf Veröffentlichen, um Ihre App bei App Hosting zu veröffentlichen.

    Für

  • Apps und KI-Funktionen beobachten und optimieren:Beobachten Sie die Leistung und Nutzung Ihrer Webanwendung mithilfe der Beobachtbarkeit in App Hosting und Ihre generativen KI-Abläufe mithilfe der Firebase-Telemetrie in Genkit. Weitere Informationen finden Sie unter Web-Apps überwachen.

Nächste Schritte