Building Chrome Extension Agents

Learn how to install the MindStudio Chrome extension and build your first AI agent specifically for use within it.

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 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