> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# Get started: Web · Playground · Model API Key {#get-started}

These are the setup steps for Midscene on **Web** with **Playground** and a **Model API Key**. To choose another combination, see [all setup paths](/get-started.md#all-setup-paths).

## Install the Chrome extension
1. Install Midscene from the Chrome Web Store:

   [Install the Midscene extension from the Chrome Web Store](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief)

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?](/platforms/web.md#chrome-extension-faq)

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

The configuration below is for Doubao-Seed-2.1 Turbo. Other recommended models:

- [Qwen3.7 Plus](/model-api-setup.md#qwen) (Alibaba)
- [DeepSeek V4.1 Flash](/model-api-setup.md#deepseek) (DeepSeek)
- [Gemini 3.5 Flash](/model-api-setup.md#gemini) (Google)
- [GPT-6 Sol](/model-api-setup.md#gpt) (OpenAI)
- [Kimi K3](/model-api-setup.md#kimi) (Moonshot AI)
- [MiMo V2.6 Pro](/model-api-setup.md#xiaomi-mimo) (Xiaomi)
- [GLM-5V-Turbo](/model-api-setup.md#glm-v) (Zhipu AI)
- [Ling-3.0-flash-VL](/model-api-setup.md#ant-ling) (Ant Group)

**Volcano Engine** ([Get API key](https://console.volcengine.com/ark))

```bash
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"
```

**OpenRouter** ([Get API key](https://openrouter.ai/settings/keys))

```bash
MIDSCENE_MODEL_BASE_URL="https://openrouter.ai/api/v1"
MIDSCENE_MODEL_API_KEY="......"
MIDSCENE_MODEL_NAME="bytedance-seed/seed-2-1-turbo"
MIDSCENE_MODEL_FAMILY="doubao-seed"
```

For other versions and usage notes, see [Doubao Seed series](/model-api-setup.md#doubao-seed-model).

To compare models, see the [Model selection guide](/model-selection.md). For compatible models such as UI-TARS, see [Use a model API key](/model-api-setup.md#supported-models).

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

## Run an action and verify the result
Open [TodoMVC](https://todomvc.com/examples/react/dist/#/) in the current tab and keep the page visible.
1. Select `aiAct` in the side panel, enter the following instruction, and run it:

```text
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:

```text
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:

```text
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](/model-config.md#verify-model-connectivity) and [Common configuration errors](/model-config.md#common-configuration-errors). For extension errors when accessing a page or Ollama, see the [Web FAQ](/platforms/web.md#chrome-extension-faq).

## Next steps
- **Explore more examples**: [Showcases](/showcases.md) includes demo videos and full execution reports across platforms.

- **Write repeatable cases**: [Create a Midscene Test project](/get-started/web-test-api-key.md) 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](/get-started/web-sdk-api-key.md) with the same model.
- **Control this browser from scripts**: [Chrome Bridge](/bridge-mode.md) lets Node.js scripts control your desktop Chrome and reuse its login sessions and cookies.

- **Learn how Midscene works**: [The Basics](/basics.md) explains the vision-based approach and when to use `aiAct`, instant actions, and insight APIs.