Try Gemini in Firebase within Firebase Studio

Gemini in Firebase within Firebase Studio offers AI assistance to streamline your coding workflow—inline within your code editor and using chat. Gemini in Firebase can provide code suggestions, generate code, explain code concepts, update project files, run terminal commands, and interpret command output.

Without any setup, you can start using Gemini in Firebase right away:

Be aware that inline code completion and codebase indexing are on by default. Learn how to adjust their settings.

Gemini in Firebase is available when you're in Code view. You can use it with apps that you start in Firebase Studio, apps that you import into Firebase Studio, and apps built by the App Prototyping agent.

Chat with Gemini in Firebase

Firebase Studio facilitates your development workflows with AI-assisted chat.

Get started with chat

  1. Open a workspace in Firebase Studio.

  2. Click sparkGemini at the bottom of the workspace.

  3. Start chatting with Gemini.

  4. (Optional) Send a multimodal prompt to Gemini by clicking Attach icon Attach and select one of the following options:

    • Drawing: Use the drawing tools to design your intended design, then type your prompt and click Send.
    • Image: Upload an image, add your prompt, then click Send.
    • File: Select a file from your workspace to use as context, add your prompt, then click Send.
  5. (Optional) Add your own Gemini API key and choose a different Gemini model. Learn more at Bring your own key: Use other Gemini models in chat.

  6. (Optional) Customize how Gemini in Firebase helps you by adjusting its settings and adding AI rules files. Learn more.

In the chat panel, you can ask Gemini questions and get code suggestions. Gemini can even update your project configuration files and code and can run terminal commands for you, directly within your workspace. Gemini might ask if it can do any of the following for you:

  • Modify files: Gemini can add a feature, fix a bug, or refactor code. When Gemini proposes changes to a file, you'll see two options:
    • Update File: Directly update the file with Gemini's proposed changes.
    • Review Changes: Open the proposed changes in another window for review before applying them.
  • Run terminal commands: Gemini can run commands like installing dependencies or starting a development server. It might propose these commands itself, or you can ask Gemini to run them. After Gemini proposes a command, the Run Terminal Command button appears. Click it to execute the command in a terminal within Firebase Studio. Gemini will run the command and interpret the results for you in the chat window, and will help determine next steps.

Complete complex tasks with chat

Gemini in Firebase can help you complete complex development tasks, like:

  • Documenting your code: Gemini can automatically generate documentation in the appropriate format for your code when you ask it to "Write my docs."
  • Writing test cases: Gemini can automatically update and generate unit tests. If you ask Gemini to "write my tests," Gemini finds an existing unit test file and can add missing tests to the file. If it doesn't find existing unit test files, it creates the unit test for you to review, iterate on, and accept—you can even ask Gemini to run it!
  • Managing dependencies: You can ask Gemini to detect missing dependencies in your code and resolve them directly from the chat interface.
  • Refactoring code: You can ask Gemini to refactor code on your behalf, for example, extracting a function, or renaming a variable across multiple files. Gemini will generate a list of proposed changes and, after reviewing and applying changes, you can ask Gemini to update and execute unit tests to verify the refactor and ensure tests continue to pass.
  • Generating and running Docker workflows: If you've enabled Docker in your workspace, you can quickly containerize your application by asking Gemini to create a Dockerfile (for example, "Create a Dockerfile for my app"). After Gemini generates the Dockerfile, it can build and run the container for you.
  • Run unit and integration tests: You can initiate test execution by asking Gemini to run specific test suites (for example, "Run my unit tests" or "Run integration tests"). Gemini will execute the appropriate command for your project (for example, npm test or a specific test runner command) and will display the test results within the chat interface.

Use slash commands in chat

You can guide the output Gemini in Firebase chat provides by using slash commands, shortcuts prefaced with a forward slash (/). Enter / at the beginning of your Gemini chat prompt and select the action you want from the list of available slash commands.

For a full list of slash commands, type / in chat.

For example, /generate followed by a short description of what you want is a prompt shortcut to generate code snippets.

Here's an example of the return for running /generate css for a black background:

body {
  background-color: black;
}

/* This CSS code sets the background color of the <body> element to black. This will make the background of the entire web page black. */

Manage chat history

You can keep different topics separate in your Gemini in Firebase chats by starting different threads. You can then refer back to earlier threads based on topic.

To start a new chat:

  1. Click New Chat in the chat header bar.

  2. Enter your prompt.

To switch to another chat thread:

  1. Click Recent chats in the chat header bar.

  2. Select the chat thread you want to access.

  3. Continue that chat thread or refer back to previous chats with Gemini.

To delete a chat thread:

  1. Select the chat thread you want to delete from Recent chats in the chat header bar.

  2. Click Delete chat in the chat header bar. Confirm that you want to delete the chat thread from chat history.

View code citations in chat

To help you verify the code suggestions, Firebase Studio shares information about the original source and associated licenses. You can see a complete log of code citations from the chat window by clicking the License Log icon in the chat header bar.

License log icon in the chat header
bar

To learn more about Google code citations, see Generative Code Assistance.

Get inline help from Gemini in Firebase

Firebase Studio boosts your productivity with AI-assisted code suggestions from Gemini.

Be aware that code completion is turned on by default. Learn how to adjust its settings.

Get code suggestions from Gemini in Firebase

Gemini generates complete blocks of possible code inline. To use the Gemini inline code assistance, follow these steps:

  1. Open a workspace in Firebase Studio.

  2. Go to the file or line of code you want help with and press Ctrl+I (Cmd+I on MacOS).

  3. Enter a description of what you want and Gemini generates a suggestion. You can also use actions as shortcuts to guide the suggestions. For example, enter /fixError for help fixing errors in inline code.

  4. Choose to do any of the following options:

    • To keep the generated code, click Accept.
    • To paste the suggestion somewhere else or move it to a new file, select the corresponding option from the drop-down menu on the Discard button.
    • To generate a new suggestion, click Regenerate.
    • To remove the suggestion completely, click Discard.
  5. (Optional) Customize how Gemini in Firebase helps you by adjusting its settings and adding AI rules files. Learn more.

View Gemini in Firebase commands inline

  1. To view Gemini commands inline for specific code, select and right-click the code you want help with.

  2. Select sparkGemini from the menu and then select the action you want to perform.

Use Gemini-suggested code completion

To help you write code, Firebase Studio provides AI code completion that predicts and autofills code in any open file as soon as you begin to type.

Be aware that code completion is turned on by default.

To toggle code completion on or off, adjust your code completion settings using one of the following methods:

  • If you use a settings.json file, set "IDX.aI.enableInlineCompletion" to true or false.

  • To update settings in the Firebase Studio workspace:

    1. Click Gear icon Manage (located at the bottom left of the workspace), then choose Settings, or press Ctrl+, (Cmd+, on Mac).

      If you're using the App Prototyping agent in Prototyper view, click Code switch icon Switch to Code to open Code view.

    2. Select the Workspace tab, then search for the Firebase Studio > AI > Enable Inline Completion setting.

    3. To turn off code completion, deselect the Enable inline code completion as you type option.