VS Code Copilot 浏览器智能体测计算器，Base URL 填 TaoToken 的 API 地址

1. VS Code Copilot 浏览器智能体能做什么为什么要换模型通道VS Code Copilot 里的浏览器智能体Browser Agent是一套让 AI 自己开浏览器、自己点按钮、自己看控制台的工具集。你在 Chat 里说一句「帮我做一个计算器」它会生成 index.html、styles.css、script.js你再说一句「在浏览器里测一下所有运算」它会打开 VS Code 内置浏览器识别页面上的按钮依次点击 5、、3、把结果读回来告诉你哪一步不对。它适合不想手动开浏览器、点按钮、翻控制台的前端开发者也适合刚接触 Web 自动化、想看「AI 自己测自己的代码」是什么样子的新手。我把边界先说清楚这篇不改浏览器智能体的职责。点击、悬停、拖拽、输入、截图、读页面这些动作还是它自己干工具开关也还是 workbench.browser.enableChatTools。本篇只做一件事把它背后那条消耗 Token 的模型通道接到 TaoToken 上先拿到 Key再把 Base URL 填成 https://taotoken.net/api然后回来重跑原文那套「生成计算器 → 打开浏览器点击测试 → 发现除零问题 → 修 script.js」的闭环。为什么值得接这一层因为浏览器智能体的每一个动作都是一次模型往返。它读一次页面结构、决定点哪个按钮、判断结果对不对、分析报错、改代码、再重测这一圈下来调用次数比普通补全多得多。模型通道如果不自己掌控成本、可用模型、失败重试都不好安排。把 Base URL 换到 TaoToken 之后你在 VS Code 里继续用同一套 Chat 交互但请求走的是自己能管理的通道401 和额度问题一眼能定位。还有一个容易被忽略的点浏览器智能体测试出来的 Bug往往不是它自己造的而是它自己写的代码里留下的边界问题。比如除零、小数点精度、连续按运算符的状态残留。这类问题跑一次闭环就能暴露前提是模型通道稳定、不会在第三步测试时突然掉线。所以接下来先解决通道再谈测试。2. TaoToken 前置先把 Key 和 API 地址拿到手2.1 创建 Key 的正确入口打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentbrowser-agent-intro 进入控制台后找到 API Keys 区域新建一个 Key。建议按用途命名比如 vscode-browser-agent这样以后在多个工具里复用时不会混。创建完成后立刻复制多数控制台只完整展示一次。拿到 Key 之后先放在一个地方比如系统环境变量或者密码管理器。后面 VS Code 里要填的是 API Key不是账号密码也不是登录后的 Session填错了会直接 401。2.2 官网地址和 API 地址不是一回事这一步是新手最容易搞混的我把两者列成表格对照用途地址说明打开控制台、创建 Keyhttps://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentbrowser-agent-intro带统计参数浏览器里打开用填进 VS Code 的 Base URLhttps://taotoken.net/api不带 /v1不带 UTM 参数查看接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentbrowser-agent-docutm_campaignrewrite字段、路径、模型名以这里为准注意Base URL 这一栏只填 https://taotoken.net/api。末尾不要加斜杠不要加 /v1也不要把带 utm_source 的那串统计链接贴进去。很多客户端会自己在 Base URL 后面拼 /v1/chat/completions你多写一层 /v1路径就变成了 /api/v1/v1/...结果就是 404 而不是 401报错信息还特别难懂。如果你之前从别的文章里复制过带一串参数的地址记得手动删干净。我自己的习惯是先粘到记事本里把 ? 后面全部砍掉再复制进配置框。3. 可复制配置浏览器工具开关 自定义模型通道3.1 打开浏览器智能体工具开关在 VS Code 里按 Ctrl,macOS 是 Cmd,打开设置搜索 workbench.browser.enableChatTools勾选。或者直接编辑 settings.json加入这一行{ workbench.browser.enableChatTools: true }保存后建议重启一次 VS Code 窗口。这个开关只决定「Chat 能不能调用浏览器工具」跟模型通道无关所以它开不开都不影响你能不能填 Base URL。反过来说通道配好了但这里没开你会在 Chat 里看到智能体只会生成代码不会自己开浏览器这也是常见误解之一。3.2 把 Base URL 和 Key 填进模型通道打开 Chat 视图点模型选择器通常在输入框旁边进入管理模型的入口选择 OpenAI 兼容 / 自定义提供商那一类选项。不同 VS Code 版本这个入口的叫法会有差异但需要你填的核心就两个字段Base URL 和 API Key。Base URL 填https://taotoken.net/apiAPI Key 填你在第 2 步创建的那串。模型名如果有下拉框就选一个没有就按文档里给出的名称填写。填完保存回到 Chat 把模型切换到刚配置的这一个。如果你更习惯用 settings.json 管理思路是一样的把 url 指向同一个地址、key 指向同一个 Key。字段名会随 VS Code 版本变化所以我不建议死记 JSON 结构界面里填一次更稳改完可以打开设置界面的 JSON 视图看看它实际写成了什么下次照抄自己的格式即可。3.3 保存后的三个检查点第一模型下拉里能看到你刚配置的条目并且切换后没有立刻弹错误提示。第二打开 https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentbrowser-agent-keysutm_campaignrewrite 看这个 Key 的状态是启用。第三确认 Base URL 字符串里没有多余空格——从聊天窗口复制地址时经常带一个尾随空格肉眼看不出来但请求会直接失败。这三个检查点花不了一分钟却能省掉后面大段排障时间。尤其是第三个我在不同工具里见过太多次了。4. 验证请求让它自己跑完 53 和 10/04.1 第一步提示词生成计算器新建一个空文件夹用 VS Code 打开它然后在 Chat 里发提示词大意是创建一个计算器包含 0-9 数字键、加减乘除运算键、清除键和等于键用 HTML/CSS/JS 实现设计简洁现代。智能体会开始生成三个文件index.html、styles.css、script.js。生成完先预览确认没问题再点 Keep 保存到工作区。这一步是验证模型通道是否通的第一道关。如果 Key 或 Base URL 有问题这里就会停下来报错而不是等你去点浏览器。看到三个文件正常落到工作区说明请求已经成功走通没有 401。4.2 第二步提示词让它自己开浏览器点按钮接着发在浏览器中打开计算器并测试所有运算是否正常工作。这时智能体应该自动在内置浏览器里打开 index.html读取页面结构识别出各个按钮然后按顺序模拟点击 5、、3、读回结果判断是否为 8。它还会继续遍历减法、乘法、除法。成功的样子是它在 Chat 里给出一个测试汇总比如加法正常、减法正常、乘法正常除法发现了问题。这里的关键不是它报了什么而是整个过程中的模型请求没有中断、没有 401、没有超时重试到放弃。如果通道不稳定你会在点击测试的中途看到请求失败的提示浏览器可能只开了页面却没有后续动作。4.3 第三步故意留一个除零 Bug为了让闭环完整我们主动把除零检查去掉。把 script.js 里的计算函数改成下面这样function calculate() { if (!operator || shouldReset) return; const a parseFloat(previous); const b parseFloat(current); let result; switch (operator) { case : result a b; break; case -: result a - b; break; case *: result a * b; break; case /: result a / b; break; // 这里故意不检查 b 0 } current String(result); previous ; shouldReset true; updateDisplay(); }然后在 Chat 里让它验证除法是否正确发现问题就修。它会去点 10、÷、0、浏览器控制台拿到 Infinity智能体把这个现象和代码对应起来定位到缺少 b 0 的判断然后自动改 script.jscase /: if (b 0) { current Error; operator null; shouldReset true; updateDisplay(); return; } result a / b; break;改完它会重新加载页面再测一次 10 / 0确认显示的是 Error 而不是 Infinity最后汇报已修复。4.4 成功判据整个过程跑完后你应该同时满足四条Chat 全程没有出现 401 或鉴权失败内置浏览器确实被自动打开过控制台里出现过除零导致的异常或 Infinityscript.js 的改动是智能体改的不是你手写的。四条都中说明这套「构建 → 测试 → 调试 → 修复」闭环已经在你的 TaoToken 通道上跑通了。想单独确认模型通道本身是否正常可以打开 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentbrowser-agent-chatutm_campaignrewrite 发一句简单的话能正常返回就说明 Key 和额度没问题剩下的问题就都在 VS Code 配置侧。5. 本篇常见错排查现象可能原因处理方式Chat 报 401Key 复制不完整、被空格污染、Key 已禁用重新创建 Key粘贴后检查首尾字符报 404 或路径不存在Base URL 里多写了 /v1 或末尾斜杠改回 https://taotoken.net/api模型列表为空Base URL 填了带 UTM 的官网链接换成纯 API 地址删掉 ? 之后全部内容智能体只生成代码不点浏览器workbench.browser.enableChatTools 未开启在 settings.json 里设为 true 并重启窗口点击测试到一半中断网络波动或该模型不适合多轮工具调用换一个模型名重试并单开对话重跑修改后页面没变化内置浏览器缓存了旧页面让智能体重新打开 index.html 再测一次踩过的坑里最典型的是地址混用把浏览器里打开的带统计参数链接直接粘进了 Base URL。这个错误不会立刻报出来有时能连上但行为诡异比如模型列表加载不出来。养成「配置框里只放纯 API 地址」的习惯这类问题基本就消失了。另一个容易忽略的是测试提示词太含糊。你说「测一下」智能体可能只点一次加法就结束。把动作说清楚比如要它覆盖加、减、乘、除四类运算并特别验证除以零它才会真正把边界跑一遍。浏览器智能体的能力上限很大程度取决于你把验收标准写得多具体。6. 把这条通道固定下来继续跑你的闭环计算器只是最小样例这套流程换成待办清单、表单校验、分页组件都一样成立。差别只在于你要在提示词里写清楚验收标准以及模型通道要稳到能支撑多轮工具调用。把 Key 和 Base URL 配好之后建议固定一个对话用来做这类端到端测试不要把生成代码、测试、修 Bug 拆到很多个会话里上下文断掉之后智能体要重新理解页面结构反而更费。长期要在 VS Code 里跑编码和 Agent 任务可以看 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentbrowser-agent-planutm_campaignrewrite 里的方案说明接入字段和路径有疑问直接对 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentbrowser-agent-docutm_campaignrewrite 的文档以文档为准比照抄任何文章都可靠。配好之后回到 Chat把「在浏览器中打开计算器并测试所有运算是否正常工作」再发一遍看它自己点完 53、自己发现 10/0、自己改回 script.js这条链路就真正属于你了。