# Building Chrome Extension Agents

{% embed url="<https://youtu.be/JlDqei_-THY>" %}

This guide shows you how to create and deploy an AI agent designed to work within the MindStudio Chrome extension. You’ll learn how to configure the run mode, use webpage content as input, and set up a working summarizer agent from scratch.

## Installing the Chrome Extension

1. Visit [mindstudio.ai](https://mindstudio.ai) and click **Install Chrome Extension**.
2. You’ll be taken to the Chrome Web Store where you can click **Add to Chrome**.
3. After installation, click the MindStudio icon in your browser toolbar.
4. Sign in or create an account — you’ll receive $5 in free credits to explore agents.
5. Open the sidebar extension, browse the agent store, and run agents directly from your browser.

You can pin favorite agents to access them quickly and view useful metrics like average runtime and cost before triggering them.

## Running a Pre-Built Agent

1. Open a site like *theverge.com*.
2. Launch the MindStudio extension.
3. Choose an agent (e.g., TLDDR summarizer), view its details, and click **Run**.
4. The agent will summarize the page or video transcript instantly.
5. You can pin agents to your extension for one-click access.

## Creating a Chrome Extension Agent

To create your own agent:

1. Go to your MindStudio workspace and click **Create New Agent**.
2. You'll be directed to the **AI Editor**.
3. Switch to the **Automations** tab to view the canvas.

Each workflow includes a:

* **Start block** (triggers the agent)
* **End block** (marks completion)
* Additional logic in between

## Configuring the Run Mode

1. Click on the **Start block**.
2. Change the **Run Mode** to **Browser Extension**.
3. This exposes **launch variables** such as:
   * `page_url`
   * `metadata`
   * `page_content` (full text of the current page)
   * `user_selection`
   * `html`

For summarizing content, use the `page_content` variable.

## Building the Summarizer

1. Click the **+** button to add a **Generate Text** block.
2. In the prompt field, write:

   ```
   cssCopyEditSummarize all text on the page:
   <content>{{ page_content }}</content>
   ```
3. Choose a model (default: Claude 3.5 Haiku) or select from 50+ available options.
4. Save your changes.

## Finalizing and Publishing

1. Click the **root folder** in the left Explorer.
2. Rename the project (e.g., *Web Page Summarizer*).
3. Add a short description.
4. Click **Publish**.

## Using the Agent in Chrome

1. Refresh your current webpage.
2. Open the MindStudio extension and navigate to **My Agents**.
3. Find your newly published agent and click **Run**.
4. The summarizer will display results instantly.

## Debugging and Insight

Use the **Debugger** tab in MindStudio to:

* View step-by-step execution
* See input/output details
* Track runtime and cost metrics

This helps verify your agent is functioning as expected and offers insight into performance.

## Exploring and Remixing Agents

You can explore the agent store to:

* Browse public agents
* View performance details
* Duplicate any agent via the three-dot menu to inspect or customize it

Some agents are simple and rely on strong prompts, while others are more complex workflows.

## Next Steps

You now have a working AI agent deployed in your browser. Continue experimenting by:

* Creating new Chrome agents with different purposes
* Enhancing prompts with formatting or logic
* Exploring and remixing agents in the store


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://university.mindstudio.ai/1-core-building-principles/building-chrome-extension-agents.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.