#Quick Start

The Chrome extension is Midscene's Playground for the web. Without setting up a project, you can try its core interaction, data extraction, and interface-checking capabilities on web pages.

This guide walks you through configuring a model, installing the Chrome extension, and running your first natural-language instruction. After validating an instruction, you can integrate it into automation code through the Agent APIs. At the end, you will also find getting-started guides for Android, iOS, HarmonyOS, and desktop platforms.

#Configure a model

Before using the Chrome extension, prepare a multimodal model with UI localization capabilities.

The following example uses qwen3.7-plus through Alibaba Cloud:

export MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
export MIDSCENE_MODEL_API_KEY="your-api-key"
export MIDSCENE_MODEL_NAME="qwen3.7-plus"
export MIDSCENE_MODEL_FAMILY="qwen3"

Replace your-api-key with your API Key.

To use another model, such as Doubao, GLM, Gemini, or GPT-5, see Supported models and setup.

For all configuration options, see Model configuration.

After installing the Chrome extension, paste this configuration into its settings.

#Install the Chrome extension

1. Use the button below to install Midscene from the Chrome Web Store:

   

2. Open Midscene from the Chrome extensions list. The Midscene sidebar appears on the right side of the browser.

3. Click the settings icon in the sidebar, paste the complete configuration from Configure a model, and save it.

FAQ

#Complete your first task

Open any web page and enter a natural-language instruction in the Midscene sidebar that matches the current page. For example:

• Plan and interact (aiAct): Click the login button.
• Extract structured data (aiQuery): Products on the page, {name: string, price: number}[].
• Check the interface (aiAssert): A navigation bar appears at the top of the page.

When you run the instruction, Midscene understands the current page and either performs the action or returns the result. The following example shows the Chrome extension filling out a GitHub sign-up form:

Prompt: Fill out the GitHub sign-up form and pass validation, but do not submit it.

Midscene generates a complete report for every task so developers can review the operation process. See the report for the demo above: report.html

#Integrate Playground instructions into code

The Chrome extension shares its core capabilities with @midscene/web. After validating natural-language instructions in the Playground, use the corresponding Agent APIs to integrate them into UI test scripts:

// Plan and perform interactions
await agent.aiAct('Click the login button');

// Extract structured data
const products = await agent.aiQuery<Array<{ name: string; price: number }>>(
  'Products on the page, {name: string, price: number}[]',
);

// Check the interface
await agent.aiAssert('A navigation bar appears at the top of the page');

This example only shows the API call pattern. To create an Agent and run a complete browser script, continue with Integrate with Playwright or Integrate with Puppeteer. To learn when to use each API category, read The Basics. For all options, see the API reference.

#Use Midscene on other platforms

Midscene provides the same complete automation capabilities on Android, iOS, HarmonyOS, and desktop, with a dedicated Playground for each platform. Before using a Playground, prepare the device environment for that platform. For example, Android requires adb to be installed and configured. See the following guides for platform requirements, Playground launch instructions, and troubleshooting.