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

# 开始使用：Web · Playground · 模型 API Key {#get-started}

本页是在 **Web** 上使用 **Playground**、通过**模型 API Key** 接入模型的配置步骤。如需其他组合，请查看[全部配置路径](/zh/get-started.md#all-setup-paths)。

## 安装 Chrome 插件
1. 从 Chrome Web Store 安装 Midscene：

   [从 Chrome Web Store 安装 Midscene 插件](https://chromewebstore.google.com/detail/midscene/gbldofcpkknbggpkmbdaefngejllnief)

2. 在 Chrome 的扩展列表中打开 **Midscene**，浏览器右侧会出现 Midscene 侧边栏。
如果无法访问 Chrome Web Store，请参阅[可以手动安装 Chrome 插件吗？](/zh/platforms/web.md#chrome-extension-faq)

## 配置模型
在下方选择一个模型，它的配置包含四项。点击**获取 API Key**到服务商创建 API Key，再用它替换 `MIDSCENE_MODEL_API_KEY` 中的 `......`。

下方是 Doubao-Seed-2.1 Turbo 的配置。其他推荐模型：

- [Qwen3.7 Plus](/zh/model-api-setup.md#qwen) (阿里巴巴)
- [DeepSeek V4.1 Flash](/zh/model-api-setup.md#deepseek) (深度求索)
- [Gemini 3.5 Flash](/zh/model-api-setup.md#gemini) (Google)
- [GPT-6 Sol](/zh/model-api-setup.md#gpt) (OpenAI)
- [Kimi K3](/zh/model-api-setup.md#kimi) (月之暗面)
- [MiMo V2.6 Pro](/zh/model-api-setup.md#xiaomi-mimo) (小米)
- [GLM-5V-Turbo](/zh/model-api-setup.md#glm-v) (智谱)
- [Ling-3.0-flash-VL](/zh/model-api-setup.md#ant-ling) (蚂蚁集团)

**火山引擎** ([获取 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** ([获取 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"
```

其他版本与使用说明请参阅[豆包 Seed 系列](/zh/model-api-setup.md#doubao-seed-model)。

各模型的差异请参阅[模型选择指南](/zh/model-selection.md)。UI-TARS 等兼容模型请参阅[使用模型 API Key](/zh/model-api-setup.md#支持的模型)。

在 Midscene 侧边栏中点击设置图标，粘贴配置并保存。

## 执行操作并验证结果
在当前标签页中打开 [TodoMVC](https://todomvc.com/examples/react/dist/#/)，并保持页面可见。
1. 在插件侧边栏中选择 `aiAct`，输入以下指令并运行：

```text
添加一个名为“体验 Midscene”的待办事项，然后将它标记为已完成。
```

2. 待页面中出现已勾选完成的待办事项后，切换到 `aiAssert`，输入以下断言并运行：

```text
列表中存在名为“体验 Midscene”的待办事项，且它已被标记为完成。
```

3. 确认断言执行通过，并在结果面板中查看各步骤的截图与执行过程。

4. （可选）切换到 `aiQuery`，输入以下查询并运行：

```text
列表中可见的待办事项，返回 {name: string, completed: boolean}[]。
```

结果会包含待办事项名称及其完成状态。`aiQuery` 用于从当前界面提取数据，不会修改页面。

如果执行失败，请先查看失败步骤和错误信息。模型请求报错请参考[验证模型连接](/zh/model-config.md#verify-model-connectivity)和[常见配置错误](/zh/model-config.md#common-configuration-errors)；插件访问页面或 Ollama 时出错，请查看 [Web 常见问题](/zh/platforms/web.md#chrome-extension-faq)。

## 下一步
- **查看更多案例**：[案例展示](/zh/showcases.md)收录了各平台的演示视频和完整执行报告。

- **编写可重复运行的用例**：使用相同的平台和模型[创建 Midscene Test 项目](/zh/get-started/web-test-api-key.md)。用例是 YAML 文件，可以在本地或 CI 中运行。

- **接入 Playwright Test**：使用相同的模型，[在 Playwright 测试中调用 Midscene](/zh/get-started/web-sdk-api-key.md)。
- **用脚本控制当前浏览器**：[Chrome Bridge](/zh/bridge-mode.md) 让 Node.js 脚本控制桌面 Chrome，并复用其中的登录状态和 Cookie。

- **了解 Midscene 的工作方式**：[基本概念](/zh/basics.md)介绍了基于视觉的方案，以及 `aiAct`、即时操作和洞察类 API 的适用场景。