1. Onlook 是什么为什么值得折腾 AI 接入Onlook 是一个开源的可视化代码编辑器在 GitHub 上已经积累了 26k Star。它的核心定位很直接把 Figma 式的可视化操作和真实代码文件打通。你在浏览器里选中一个元素、拖动位置、改个颜色改动会同步写回代码文件而不是只停留在设计稿层面。对于长期在「设计稿 → 切图 → 手写样式 → 浏览器调试」这条链路里来回切换的前端来说这种体验确实省事。它基于 Next.js TailwindCSS 构建界面风格接近 Figma支持图层浏览、组件检测、分支实验、检查点回滚、内置终端还能从文本描述或图片生成新应用。AI 方面Onlook 支持多消息队列、图片参考、MCP 协议甚至可以用自己作为工具调用去自动创建分支、迭代修改。项目以 Apache 2.0 协议开源既可以托管使用也可以本地跑。但问题也在这里Onlook 的 AI 能力默认依赖外部模型通道如果你想让它在本地环境里稳定调用模型就得自己配一套统一的 Key 和 API 通道。这篇就围绕这个场景给你一份可以直接复制的config.toml配置骨架以及从拿 Key 到验证生效的完整步骤。适合已经跑起 Onlook、想把它接入自有 AI 通道的开发者。2. 前置准备TaoToken 统一 Key 与 API 通道在动 Onlook 的配置之前先把模型通道准备好。TaoToken 提供统一的 API 入口你只需要一个 Key就能在多个模型之间切换不用为每个模型单独维护一套鉴权和地址。对 Onlook 这种需要频繁调用模型做代码生成和修改的工具来说统一通道能省掉不少切换成本。具体操作路径是这样的先到官网 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册并登录然后进入控制台创建 API Key。控制台地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页面在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。创建好之后把 Key 复制出来后面配置里要用。API 的基础地址是 https://taotoken.net/api 注意这个地址不带任何查询参数配置时直接写这个就行。如果你需要确认模型列表和调用方式可以看接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有针对不同客户端的说明。注意Key 只创建一次就够用不要把它提交到 Git 仓库。建议放在本地.env或者系统的环境变量里配置文件里用占位符引用。如果你后面要长期做编码和 Agent 类任务可以关注一下 Coding Plan https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合高频调用的场景。想先验证模型通不通可以直接用模型对话页面 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentchatutm_campaignrewrite 发一条消息试试。3. Onlook 的 config.toml 配置骨架Onlook 本地运行时模型相关的配置集中在一个config.toml文件里。下面这份骨架你可以直接复制把里面的 Key 和模型名替换成自己的即可。我把它拆成几块来看方便你理解每一项的作用。# Onlook 本地配置骨架 # 模型通道统一走 TaoToken [ai] provider openai-compatible base_url https://taotoken.net/api api_key ${TAOTOKEN_API_KEY} default_model claude-sonnet-4-20250514 fallback_model gpt-4o-mini timeout_seconds 120 max_retries 3 [ai.models] # 这里列出你希望在 Onlook 里可选的模型 available [ claude-sonnet-4-20250514, gpt-4o-mini, deepseek-chat ] [editor] auto_apply true branch_on_edit true checkpoint_enabled true [sandbox] runtime codesandbox port 3000 [logging] level info log_ai_requests true几个关键点说明一下。base_url固定写https://taotoken.net/api不要加多余的路径。api_key用环境变量引用避免明文写死在文件里。default_model是你日常用得最多的模型fallback_model是主模型超时或报错时的兜底。available列表决定了 Onlook 界面里模型下拉框能选哪些按你实际需要的填。auto_apply控制 AI 生成的改动是否自动写入代码文件调试阶段建议先设成false确认没问题再打开。branch_on_edit让每次 AI 编辑自动开分支配合checkpoint_enabled可以随时回滚这两个对可视化编辑场景很实用。环境变量这样设置export TAOTOKEN_API_KEY你的KeyWindows 下用set TAOTOKEN_API_KEY你的Key或者写进系统环境变量。如果你用.env文件确保 Onlook 启动时能读到。4. 启动 Onlook 并验证配置生效配置写好后进入 Onlook 项目目录启动。如果你是用 Bun 管理依赖命令大致是这样bun install bun run dev启动后打开浏览器访问http://localhost:3000。接下来要验证配置是否真的生效分三步走。第一步看启动日志。如果log_ai_requests true生效控制台会打印模型通道的初始化信息包括base_url和默认模型名。如果这里报provider not found或者invalid base_url说明配置块没被正确读取检查config.toml的路径和缩进。第二步在编辑器里发一条 AI 消息。比如选中一个按钮元素在 AI 对话框输入「把这个按钮的主色改成蓝色圆角加大到 12px」。如果配置正确你会看到请求发出后返回修改建议代码文件里对应样式同步更新。这一步能同时验证模型通道和代码同步两条链路。第三步检查请求日志。在终端里能看到类似POST https://taotoken.net/api/v1/chat/completions的记录状态码 200说明请求确实走了 TaoToken 通道。如果状态码是 401多半是 Key 没读到如果是 404检查base_url有没有多写路径。提示验证阶段建议把auto_apply设为false先看 AI 返回的 diff确认无误再手动应用。这样能避免配置错误时把代码改乱。5. 本篇常见错误排查配置过程中最容易踩的坑集中在几个地方我按出现频率排一下。Key 读取失败。表现是请求返回 401日志里提示api_key is empty。原因通常是环境变量没导出或者config.toml里写的是${TAOTOKEN_API_KEY}但启动进程读不到。解决办法是在启动命令前显式带上变量比如TAOTOKEN_API_KEYxxx bun run dev或者确认.env文件在项目根目录且被加载。base_url 写错。有人会写成https://taotoken.net/api/v1多加了/v1。TaoToken 的基础地址就是https://taotoken.net/api客户端会自动补全路径。多写会导致 404。改回来即可。模型名不存在。available列表里填了一个通道不支持的模型名请求会返回model not found。解决办法是先用模型对话页面确认可用模型再填进配置。不要凭记忆写模型名。配置块没生效。Onlook 读取config.toml有固定路径如果你把文件放在别处启动时不会报错但配置不生效。确认文件在项目根目录或者按文档指定的位置放置。改完配置后需要重启 dev server热更新不一定能重载 TOML。超时和重试。默认timeout_seconds 120如果模型响应慢可以适当调大。max_retries 3表示失败重试三次调试阶段可以设成 1方便快速看到错误。6. 接入后的下一步配置跑通之后Onlook 的可视化编辑和 AI 协作就能串起来了。你可以直接在页面上选中元素让 AI 改样式也可以让它根据描述生成新组件改动实时同步到代码文件。分支和检查点功能配合使用实验性改动不会污染主分支。如果你主要做长期编码和 Agent 类任务建议把 Coding Plan 用起来高频调用下更划算。日常验证模型通不通模型对话页面是最快的入口。Key 管理和接入细节都在控制台和文档里遇到问题先查文档再排查配置。这套配置骨架的核心思路是把模型通道统一到一个入口Onlook 只负责可视化编辑和代码同步两者解耦之后换模型、调参数都不用动编辑器本身。你可以先按上面的步骤跑一遍确认请求日志里出现 200 响应再逐步打开自动应用和分支功能。