#Get started: Web · Playground · Model API Key

These are the setup steps for Midscene on Web with Playground and a Model API Key. To choose another combination, change the answers below or see all setup paths.

Step 1

#Install the Chrome extension

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

If you cannot access the Chrome Web Store, see Can I install the Chrome extension manually?

Step 2

#Configure a model

Choose a model below. Its configuration has four values. Open Get API key to create a key with the provider, then replace ...... in MIDSCENE_MODEL_API_KEY with it.

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_API_KEY="......"
MIDSCENE_MODEL_NAME="doubao-seed-2-1-turbo-260628"
MIDSCENE_MODEL_FAMILY="doubao-seed"

For other versions and usage notes, see Doubao Seed series.

To compare models, see the Model selection guide. For compatible models such as UI-TARS, see Use a model API key.

In the Midscene sidebar, click the settings icon, paste the configuration, and save.

Step 3

#Run an action and verify the result

Open TodoMVC in the current tab and keep the page visible.

1. Select aiAct in the side panel, enter the following instruction, and run it:

Add a todo named "Try Midscene", then mark it as completed.

2. Once the completed todo item appears on the page, switch to aiAssert, enter the following assertion, and run it:

The list contains a todo named "Try Midscene", and it is marked as completed.

3. Confirm that the assertion passes and inspect the step-by-step screenshots in the results panel.

4. (Optional) Switch to aiQuery, enter the following query, and run it:

Return the visible todo items as {name: string, completed: boolean}[].

The result contains each todo item's name and completion status. aiQuery extracts data from the current UI without changing the page.

If execution fails, inspect the failed step and error message. For model request errors, see Verify model connectivity and Common configuration errors. For extension errors when accessing a page or Ollama, see the Web FAQ.

Step 4

#Next steps

• Explore more examples: Showcases includes demo videos and full execution reports across platforms.

• Write repeatable cases: Create a Midscene Test project with the same platform and model. Cases are YAML files that you can run locally or in CI.

• Add to Playwright Test: Call Midscene from your Playwright tests with the same model.
• Control this browser from scripts: Chrome Bridge lets Node.js scripts control your desktop Chrome and reuse its login sessions and cookies.

• Learn how Midscene works: The Basics explains the vision-based approach and when to use aiAct, instant actions, and insight APIs.

Want to try another platform or way to use Midscene? Back to top to change your selections.