Master Gemini CLI: Add Context for Smarter AI Coding

Learn to Guide Gemini CLI with Contextual Information

Unlock the full potential of the Gemini CLI by learning how to effectively manage context. This guide will walk you through understanding what context is, why it’s crucial for AI decision-making, and practical methods for incorporating it into your coding sessions. You’ll learn to provide specific files, code snippets, and even images to ensure Gemini understands your requests precisely, leading to more accurate and efficient code generation and modification.

What is AI Context?

In the realm of Artificial Intelligence, context refers to the surrounding information provided alongside a prompt. This information helps the AI model gain a broader understanding of the task at hand, enabling it to make more informed decisions. Without context, an AI might struggle to interpret ambiguous requests, much like a person would be confused in a conversation without prior understanding of the topic.

For example, a prompt like “make the paragraph text bigger” might leave Gemini guessing which paragraph you mean. However, by providing the specific file containing the paragraph, you give Gemini the necessary context to perform the action accurately.

How to Add Context to Gemini CLI

There are several ways to provide context to the Gemini CLI, ranging from manual file inclusion to implicit context derived from your open files.

1. Manually Adding Files or Folders

   You can explicitly add files or folders to your prompt’s context by using the ‘@’ symbol followed by the file or folder path. For instance, typing @homepage-component will trigger a fuzzy search for files matching that name. Once selected, the file path is added to your chat input, signaling to Gemini where to focus its attention.

   Example: If you want to modify a paragraph in index.js, you could type @index.js before your prompt.

2. Implicit Context with Open Files (Requires Extension)

   If you have the Gemini CLI companion extension installed in VS Code, simply opening a file will automatically add its content as context. You’ll see a notification like “1 file open” above your chat input, indicating that Gemini is aware of and using this file.

   Tip: This is a highly efficient way to provide context, especially when working on a specific file. Ensure the Gemini CLI companion extension is installed and enabled.

3. Selecting Specific Code Sections

   With the Gemini CLI companion extension, you can go a step further by selecting a specific section of code within an open file. This precisely tells Gemini which part of the code you are referencing, further reducing ambiguity.

   Expert Note: If you haven’t installed the Gemini CLI companion extension, navigate to your extensions in VS Code, search for “Gemini CLI companion,” and install it.

4. Adding Images as Context (Multimodality)

   Modern Gemini models are multimodal, meaning they can understand and process various media types, including images. You can provide an image as a design reference for Gemini to mimic.

   Example: To style a UI element like a pill based on an image, you would add a prompt like, “Style the pill to look like the one in the following image,” followed by @pill.png (assuming pill.png is in your project root).

   Warning: Image processing accuracy can vary, especially with older Gemini versions. Gemini 3 generally offers better results for image-based tasks.

Implementing a Feature with Context: Example

Let’s walk through an example of implementing a tag input feature with pills, demonstrating the use of context.

1. Set Up Your Branch

   Before making any changes, create and switch to a new Git branch. This is a best practice when working with AI coding assistants.

   Command: git checkout -b Gemini/taginput

2. Craft Your Prompt

   Write a detailed prompt describing the desired feature. For our example, we want to transform a comma-separated tag input into a pill-based display with delete functionality.

   Prompt: “Can you update the tags input field to show a pill of the tag below the input whenever a user adds a comma. This should also clear the input field so a user can easily add another tag. Users should be able to delete the tag by clicking on a cross icon on the tag itself. Do not allow multiple tags. Users should be allowed to add a max of five tags in total.”

3. Add Context to the Prompt

   To ensure Gemini targets the correct part of your codebase, add the relevant file as context. Using the ‘@’ symbol, specify the file containing the form.

   Example: Prepend @create-page.js (or the actual file name) to your prompt.

   Combined Input: @create-page.js Can you update the tags input field...

   Alternatively: If the Gemini CLI companion extension is active, simply having create-page.js open in your editor will provide this context implicitly.

4. Add Image Context for Styling

   To style the pills according to a specific design, add the image file as context.

   Prompt Addition: Add Please style the pill to look like the pill from the following image: @pill.png to your existing prompt.

5. Send the Prompt and Review

   Send the combined prompt and context to Gemini. Once Gemini completes the task, review the generated code for errors or unexpected behavior.

6. Fixing Errors with Context

   If Gemini introduces an error (e.g., a type error), you can provide context for fixing it. Keep the relevant code highlighted or open, and in the Gemini panel, describe the error.

   Error Fixing Prompt: “There is a type error here.”

   Gemini can then analyze the highlighted code and the error message to provide a corrected solution.

7. Test the Implementation

   After Gemini makes corrections, examine the code changes. Test the feature in your browser by adding tags, deleting them, attempting duplicates, and exceeding the maximum tag limit to ensure it functions as expected.

Managing Context Window Size

The Gemini CLI maintains a context window that stores conversation history and explicitly added files. As your session grows, this window can fill up.

• Context Window Limit: Gemini models have a large context window (e.g., 1 million tokens), meaning you can work on multiple features within a single session without typically exceeding the limit.
• Consequences of a Full Window: If the context window fills, older information may be dropped, leading to less predictable AI behavior and potential loss of focus on important details.
• Viewing Context Percentage: You can enable a setting to display the remaining context percentage in the CLI footer. Run the settings command, navigate to workspace settings, and change the hide context window percentage value to false.

Commands for Context Management

1. /compress Command

   This command analyzes the entire session history and compresses it into a concise summary, which then occupies the context window. This significantly frees up space while retaining a condensed version of the conversation.

   Usage: Type /compress in the chat input.

2. /clear Command

   This command completely clears the context window without creating a summary. Use this command with caution, as all previous context will be lost.

   Usage: Type /clear in the chat input.

By effectively managing context, you can ensure that the Gemini CLI operates with the most relevant information, leading to more accurate code generation and a smoother development workflow.

Source: Gemini CLI Tutorial #5 – Managing Context (YouTube)