CodeBuddy 写 Kuikly 页面，模型调用记到 TaoToken 这边-开发者社区

1. CodeBuddy + Kuikly + TaoToken：把页面生成和调用日志接到一起

我最近在做一个类似 DSH Mobile 的 Kuikly 多端工程：共享层放在commonMain，Android、iOS、鸿蒙只保留宿主和系统桥接。页面层用 CodeBuddy 配合 KuiklyUI-AI 规则生成，模型供应商切到 TaoToken（官网入口：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_setup）。这样做的直接收益有两个：一是 CodeBuddy 生成页面时不再四处找模型配置，二是每次页面生成的模型调用都能在 TaoToken 侧留下记录。

在 CodeBuddy 的模型设置里，步骤很短：先去 TaoToken 官网获取 Key，Base URL 填https://taotoken.net/api，API Key 填YOUR_API_KEY，模型名从控制台复制当前可用的 ID。注意 Base URL 是工具配置项，不要在后面拼 UTM 参数；UTM 只用于网页入口，不用于 API 请求。保存后新建一个 CodeBuddy 会话，让它读取工程里的 KuiklyUI-AI 规则，再生成一个带@Page注解的 DSH Mobile 页面。可复现产出也很明确：一份落在工程commonMain里的 Kotlin 页面代码，以及一份可以在 CodeBuddy 和 TaoToken 之间对齐的模型调用日志。

如果 CodeBuddy 支持环境变量，可以先用下面这种方式做本地验证：

export CODEBUDDY_BASE_URL="https://taotoken.net/api" export CODEBUDDY_API_KEY="YOUR_API_KEY" export CODEBUDDY_MODEL="your-model-id"

如果只有图形界面，就把三个值分别填到“自定义供应商”“OpenAI 兼容接口”或类似位置。这里最容易出错的是把 Base URL 写成官网首页，或者把 Key 填成登录密码。工具配置只认 API Base URL 和 API Key，不认网页登录态。

2. 让 CodeBuddy 读懂 KuiklyUI-AI：规则、Skills 和工程上下文

KuiklyUI-AI 的价值不在于“多一个提示词模板”，而在于它把 Kuikly DSL、Kuikly Compose DSL、组件使用、Module 扩展、网络请求、响应式状态、协程和多端资源这些工程约定整理成了编程助手可读取的规则。CodeBuddy 如果没有这些规则，很容易按 Android Compose 或 Flutter 的习惯去猜 API；一旦规则进上下文，生成结果会更接近 Kuikly 工程本身。

我一般先把规则文件放在独立目录，例如：

project/ commonMain/ kotlin/ com/example/dshmobile/ pages/ modules/ protocol/ androidApp/ iosApp/ ohosApp/ ai-rules/ kuikly-ui.md kuikly-module.md kuikly-network.md

然后在 CodeBuddy 里用@引用规则文件和关键协议文件，提示词可以写成：

请先读取 ai-rules/kuikly-ui.md、ai-rules/kuikly-module.md 和 commonMain/kotlin/com/example/dshmobile/protocol/DshHostProtocol.kt。 按 Kuikly DSL 生成 SessionListPage，要求： 1. 使用 @Page 注解，页面路由名 session_list； 2. 页面状态使用 Kuikly 响应式状态，不要直接持有平台对象； 3. 列表数据来自 DshHostProtocol，不在页面里直接发 HTTP； 4. 输出完整 Kotlin 文件、改动文件清单和需要在三端验证的点。

这段提示词的重点不是让 CodeBuddy 一次性写完整个 App，而是把“页面职责、协议边界、平台差异”提前说清楚。页面可以生成，协议模型可以生成，状态机骨架也可以生成；但 WebSocket 桥接、扫码权限、SSH 隧道和真机行为仍然需要人检查。CodeBuddy 负责把重复劳动压下去，人负责判断交互和平台差异。

生成完成后，我会做三件事验收：

页面是否真的用了 Kuikly DSL，而不是套 Android View。
网络调用是否经过DshHostProtocol，而不是散落在页面里。
是否留下 TODO 或假设，尤其是平台 API、权限、生命周期相关部分。

这三步比单纯看代码能不能编译更重要。跨端项目里，能编译不代表三端行为一致。

3. 三个可复现页面：会话列表、流式 Markdown、审批卡

DSH Mobile 这类移动端控制面板，页面并不复杂，但状态更新频繁。我选三个页面作为 CodeBuddy + KuiklyUI-AI 的可复现实验：会话列表、流式 Markdown、审批卡。

3.1 会话列表：先生成可替换的骨架

会话列表适合交给 CodeBuddy 生成骨架。提示词里明确数据结构和状态来源，让它输出页面类、列表项组件和空状态。

@Page("session_list") class SessionListPage : BasePager() { private val sessions by observableList<SessionItem>() private val loading by observable(false) override fun createBody(): View? { return VStack { NavBar(title = "Sessions") if (loading) { LoadingView() } else { List { sessions.forEach { item -> ListItem { Text(item.title) Text(item.updatedAt) } } } } } } }

这段代码的目标不是直接上线，而是让 CodeBuddy 把列表页结构、响应式状态和组件引用先落进工程。接下来人再补协议字段、点击事件和重连后的刷新逻辑。CodeBuddy 生成页面代码后，模型调用日志会记录到 TaoToken；如果列表字段对不上，日志里也能看到它当时读到了哪些上下文、用了哪个模型。

3.2 流式 Markdown：不要让每个 chunk 都重建整页

聊天正文是持续变化的 Markdown。模型每吐出一段内容，代码块、列表、引用和链接都要跟着刷新。从零做解析器、AST 映射、代码高亮和三端样式成本很高，所以原文里直接用了 KuiklyMarkdown 组件。我这里不重复实现解析，而是让 CodeBuddy 生成接入层。

我给的提示词是：

基于 KuiklyMarkdown 生成一个 MarkdownStreamView。 要求： 1. 已结束的 Block 不重建； 2. 尾部内容持续更新； 3. 代码块未闭合时，在解析副本里补闭合标记； 4. 页面刷新按 16ms 合帧，避免每个小 chunk 都触发 UI； 5. 输出 Kotlin 代码和状态更新说明。

生成出来的接入层大致会围绕“稳定前半段 + 更新尾部”来做：

private val blocks by observableList<MdBlock>() private val buffer = StringBuilder() fun onChunk(chunk: String) { buffer.append(chunk) scheduleFrame(16) { val renderCopy = buffer.toString() markdownView.updateTail(renderCopy) } }

这里的关键不是代码多复杂，而是边界清楚：解析交给组件，页面只处理流式策略。CodeBuddy 可以生成状态更新骨架，但合帧间隔、代码块闭合补偿、长回答滚动行为仍要在真机上验证。

3.3 审批卡：动作要经过协议层

审批卡是移动端接住 Agent 任务的关键页面。Agent 跑长任务时，经常需要人点一下允许或拒绝。页面本身可以简单，但动作不能绕过协议层。

@Page("approval_card") class ApprovalCardPage : BasePager() { private val submitting by observable(false) fun onApprove(id: String) { submitting = true hostRpc.callApproval(id = id, approved = true) } fun onReject(id: String) { submitting = true hostRpc.callApproval(id = id, approved = false) } }

具体 RPC 方法名要以你锁定的 DSH 版本为准，不要凭记忆写。CodeBuddy 在这里适合生成 UI 状态和调用骨架，真实方法名、参数结构、错误码应该从协议文件或已验证的 tag 里读取。这样生成出来的页面代码不会把“猜测的 API”固化进工程。

4. 模型调用日志：从 CodeBuddy 到 TaoToken 怎么对齐

把 CodeBuddy 的模型供应商切到 TaoToken 后，日志对齐是调试里最值钱的部分。一次页面生成至少留下两类信息：

CodeBuddy 侧：你发起的任务、引用的文件、生成的代码、可能的本地日志。
TaoToken 侧：请求时间、模型 ID、Token 用量、耗时、状态码、错误信息。

我通常先用一个最小请求确认 Base URL 和 Key 没问题。下面只是 OpenAI 兼容形态的探活示例，实际路径以你控制台展示的模型接口为准：

curl -sS https://taotoken.net/api/v1/chat/completions \ -H "Authorization: Bearer YOUR_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "model": "your-model-id", "messages": [ {"role": "user", "content": "只回复 pong"} ], "stream": false }'

如果能正常返回，再回到 CodeBuddy 里生成页面。生成失败时按这个顺序排查：

CodeBuddy 日志里请求是否发到了https://taotoken.net/api。
Key 是否复制完整，是否有多余空格。
模型 ID 是否和控制台一致。
返回 401、403、404 还是 429，不同错误对应不同处理。
流式生成中断时，是网络问题、模型输出限制，还是客户端超时。

TaoToken 的调用记录可以帮助你判断“是 CodeBuddy 没发出去，还是发出去了但被拒绝”。如果只有本地日志，你很难区分是工程上下文问题还是供应商配置问题。把调用统一记到 TaoToken 后，页面生成、协议补全、错误提示这几类任务都能在同一个地方看用量和错误。

5. 跨端桥接不是页面问题：WebSocket、扫码、SSH 的生成边界

CodeBuddy 能生成页面，但跨端项目真正费时间的是系统能力。WebSocket、扫码、SSH、本地存储这些部分，不能让页面直接持有平台对象。我的做法是在commonMain定义统一 Module 接口，把连接、发消息、收消息、断开这些业务语义固定下来，三端各接各的系统实现。

interface DshTransportModule { fun connect(endpoint: String) fun send(frame: String) fun observeEvents(onEvent: (String) -> Unit) fun close() }

Android 侧可能是 OkHttp，iOS 侧可能是 NSURLSession，鸿蒙侧可能是 NetworkKit；但聊天页、事件处理、业务状态只面对同一个DshTransportModule。SSH 隧道和扫码配对也是同一套拆法：平台差异下沉，共享层保持业务统一。

事件流也要分清楚。会话内正在发生的事，比如模型输出、工具调用、审批、提问、后台任务，走一条下行流；电脑这侧的全局变化，比如会话增删、运行状态、工作区变更、Host 错误，走另一条下行流。两条流分开，页面可以按不同生命周期消费。队列和任务快照这类数据，收到新快照时直接覆盖本地状态，不要假设它们一定是增量事件。宽类型字段要保留未知字段，解析失败时降级，不能让整条事件流一起中断。

移动网络一定会断。锁屏、切后台、进隧道、Wi-Fi 和蜂窝切换都可能让连接失效。重连时我按四步恢复：先重新建立隧道，再补漏掉的事件，然后请求一次历史对齐聊天记录，最后用最新快照覆盖队列和任务状态。每次连接带世代号，旧连接迟到的响应直接丢弃。Agent 如果还在电脑上跑，重连后只恢复观察和控制，不要把用户的 Prompt 再发一次。

DSH 默认监听127.0.0.1:3080，这个默认值应该保留。能访问这个端口的客户端，可能通过 Agent 和工具获得很高的本机操作权限。移动端更合适的方式是 SSH 本地端口转发，或者扫码 Relay。SSH 模式在手机上建立 loopback 映射，认证在 SSH 层完成，DSH 仍然只看到本机回环请求。扫码模式则通过电脑端插件和 App 同时连接 Relay，经密封隧道转发流量。二维码里最敏感的部分不放在查询串中，正常 HTTP 请求不会把它带给 Relay。整个过程中，Relay 不需要直接访问 3080，电脑也不需要把 DSH 服务开到局域网或公网。

这些桥接代码可以部分交给 CodeBuddy 生成骨架，但密钥、权限、防火墙和真机行为必须人工确认。尤其是扫码超时，先检查手机能否访问电脑的 health 地址、PUBLIC_RELAY_URL是否还是当前局域网地址、Relay 是否监听了手机可达接口、防火墙是否允许对应端口。电脑换 Wi-Fi 后地址通常会变，需要更新配置、重启 DSH、重新扫码。

6. 统一供应商配置：CodeBuddy、Claude Code、Codex、CC Switch

如果你不只用一个编程工具，最好把供应商配置统一到 TaoToken。CodeBuddy 已经在前面配置过：Base URL 填https://taotoken.net/api，Key 填YOUR_API_KEY。Claude Code 使用settings.json和ANTHROPIC_*环境变量，不要把它和 Codex 的配置混在一起。

Claude Code 示例：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY", "ANTHROPIC_MODEL": "your-model-id" } }

Codex 使用config.toml，不要套ANTHROPIC_*。下面是一个 OpenAI 兼容风格的配置骨架，字段名以你本地 Codex 版本为准：

model = "your-model-id" model_provider = "taotoken" [model_providers.taotoken] name = "TaoToken" base_url = "https://taotoken.net/api" env_key = "TAOTOKEN_API_KEY" wire_api = "responses"

然后在本机设置：

export TAOTOKEN_API_KEY="YOUR_API_KEY"

CC Switch 这类切换工具可以按“三件套”理解：Base URL、API Key、模型 ID。新增供应商时分别填：

Base URL：https://taotoken.net/api
API Key：YOUR_API_KEY
模型 ID：从 TaoToken 控制台复制，不要凭猜。

这里再强调一次：Claude Code 走ANTHROPIC_*，Codex 走config.toml和它自己的环境变量。把两者混填，常见结果就是 401 或模型不存在。TaoToken 官网入口可以放在书签里，方便以后换 Key 或查用量：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_tools。

7. 排障清单：Base URL、模型名、401、流式中断、重连

下面这份清单是我在 CodeBuddy + Kuikly 页面生成里最常查的。建议直接放到工程 README 或团队文档里。

Base URL 错误：工具里填https://taotoken.net/api，不要填官网首页，也不要带 UTM。客户端要求/v1时按其规则自动拼接。
401：Key 复制不完整、有多余空格、环境变量没生效，或者把网页登录态当成了 API Key。
404：模型 ID 不存在，或该模型未在当前账号可用。去控制台复制准确 ID。
429：请求频率或额度触发限制。降低并发，检查是否有循环重试。
流式中断：先看网络，再看客户端超时。不要在流式失败时自动重发完整任务，避免 Agent 重复执行。
页面生成不完整：检查 CodeBuddy 是否读到了 KuiklyUI-AI 规则和协议文件。上下文没给够，生成结果就会偏。
WebSocket 重连失败：先建隧道，再补事件，再拉历史，再覆盖快照。顺序错了，界面状态会错乱。
扫码超时：检查 health、PUBLIC_RELAY_URL、Relay 监听接口、防火墙端口。换网络后重新扫码。
三端表现不一致：页面逻辑在共享层，平台差异在 Module 实现。不要为了快，把平台判断写进页面。

这套排障思路的核心是：模型调用问题看 TaoToken 日志，页面生成问题看 CodeBuddy 上下文，连接问题看隧道和事件流。三者分开，定位会快很多。

8. 从模型对话到 Claude Code 文档：把 CodeBuddy 的调用稳定接进来

如果你准备把 CodeBuddy 生成 Kuikly 页面的模型调用统一记到 TaoToken，建议按这个路径走：先用模型对话确认返回格式和模型 ID，再选 Coding Plan 看日常用量是否合适，然后创建 API Key，最后按 Claude Code 文档把其他编程工具也接进来。

模型对话：https://taotoken.net/models/detail/chat?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_chat
Coding Plan：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_plan
创建 API Key：https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_keys
Claude Code 文档：https://taotoken.net/doc/ClaudeCodeAnthropic?utm_source=taotoken_aicg_blog_end&utm_content=codebuddy_kuikly_claudecode

回到 CodeBuddy 里，你只需要记住三件事：模型设置里 Base URL 填https://taotoken.net/api，API Key 填YOUR_API_KEY，让 CodeBuddy 先读 KuiklyUI-AI 规则再生成页面。这样每次生成 DSH Mobile 页面，都会同时留下可检查的页面代码和可对齐的模型调用日志。对跨端工程来说，这比单纯把代码生成出来更重要，因为后续排障、换模型、补协议、查用量，都有了一条稳定的记录链。