前两篇介绍了如何通过 API 从零搭建 Claw 模式应用。但直接调用 API 只完成了后端的服务端逻辑（签名、会话、对话、沙箱产出等），并不包含终端用户实际使用的前端交互界面。

为降低完整落地的成本，ADP 提供了开源项目 adp-chat-client，一套包含前端界面与后端服务的完整示例工程。

开发者既可以直接部署，快速获得一个与 ADP 同款的智能工作台，也可以参照其实现进行二次开发，搭建符合自身业务需要的对话产品。

一、adp-chat-client 的定位

维度	直接调用 API（前两篇）	使用 adp-chat-client
交付内容	仅服务端调用逻辑	前端界面 + 后端服务的完整工程
前端	需自行开发	提供现成对话界面，开箱即用
签名与转发	需自行实现 V3 签名	已封装，前端不接触密钥
部署	需自行搭建	支持 Docker 一键部署
适用场景	深度定制、非 Python 后端	快速落地、以现有工程为蓝本二次开发

adp-chat-client 可将 ADP 应用快速部署为 Web 应用，也可嵌入小程序、Android、iOS 等终端。

二、提供的能力

前端（Vue 3 + Vite）

一套完整的智能工作台交互界面，覆盖终端用户对话所需的主要能力：

实时流式对话、对话历史管理。
语音输入、图片理解。
交互式 Widget（图表、表单等）渲染（adp-widget 独立包）。
Skills 管理（浏览技能广场、安装/卸载/排序）。
连接器 / 工具插件管理（浏览、OAuth 授权、绑定/解绑）。
任务列表、Skill / 连接器 / 知识库的选择与调用等工作台交互。

后端（Python / Sanic）

将服务端全部调用细节封装完毕，前端无需接触密钥与签名：

腾讯云 V3 签名与云 API 转发。
对话 SSE 流式转发。
实时文档解析（SSE 流式返回解析进度，获取 doc_id）。
沙箱工作空间的文件读写与下载。
第三方账户体系对接（OAuth / URL 跳转等）。
限流、CORS、Iframe 嵌入等生产部署所需的服务端能力。

三、快速部署

adp-chat-client 支持 Docker 一键部署，填入密钥与 ADP 应用信息（ApplicationId / AppKey 等）即可运行。完整的部署步骤、系统要求、账户体系对接、Nginx / CORS / 子路径等专题，参见仓库 README。

Claw 模式若需支持用户在对话中自定义选择 Skill / 模型 / 连接器，需在应用高级配置中开启「允许在对话中动态修改配置」并重新发布，详情请参见动态修改 Agent 配置。

四、真实例子：动态修改模型

以"用户在对话中切换大模型"为例，展示 adp-chat-client 前后端如何配合实现动态修改 Agent 配置。

前提：获取用户专属 AgentId

每个用户第一次操作时，需要通过 CopyAgentFromApp 获取专属的 AgentId（后续所有动态配置修改都针对这个 Agent）：

对应前端代码（composables/useAgentStore.ts）：

// 1. 先查后端缓存
const record = await getAgentConfig({ ApplicationId: appId });
if (record.AgentId) return record.AgentId;

// 2. 首次：调用 CopyAgentFromApp 获取专属 Agent
const result = await copyAgentFromApp({ ApplicationId: appId });
const agentId = result.ParentAgentId;

// 3. 持久化到后端 DB
await saveAgentConfig({ ApplicationId: appId, AgentId: agentId });

修改模型：前端发起

用户在界面选择新模型后，前端通过 /adp/ModifyAgent 接口提交修改：

// client/packages/adp-chat-component/src/composables/useAgentStore.ts
await modifyAgentByPath(applicationId, {
    model: {
        ModelId: 'new-model-id',          // 新模型 ID
        Alias: '智谱GLM-5.2',
        ModelParameters: { Temperature: 0.7, MaxTokens: 4096 }
    }
});

// 内部等价于调用：
POST /adp/ModifyAgent
{
    "ApplicationId": "app_xxx",
    "Payload": {
        "AppId": "app_xxx",
        "AgentId": "agent_xxx",
        "Agent": {
            "Model": { "ModelId": "new-model-id", "Alias": "智谱GLM-5.2", ... }
        },
        "UpdateMask": { "Paths": ["model"] }
    }
}

修改模型：后端转发

后端通过通用的 /adp/<Action> 转发端点，自动完成 V3 签名并转发给 ADP 云 API：

server/router/adp.py — 通用转发路由

收到 /adp/ModifyAgent 后：

1. 从 Payload 中取出业务参数

2. 用 SecretId/SecretKey 做 V3 签名

3. 转发到 ADP 管理 API（adp.tencentcloudapi.com 或 capi.adp.tencent.com）

4. 原样返回响应

关键分工

层	职责	密钥接触
前端	用户交互、构造 UpdateMask 参数、缓存 AgentDetail	不接触
后端	V3 签名、转发 ADP 管理 API、持久化 AgentId 映射	SecretId/SecretKey
ADP	执行 ModifyAgent，更新 Agent 配置，下次对话生效	-

注意：

修改模型后无需重新发布，下一次对话请求会自动使用新模型。这是 Claw 模式运行时动态配置的核心优势。

五、二次开发

工程按标准前后端结构组织，便于裁剪与扩展：

前端：
- client/packages/adp-chat-component：核心对话组件，Vue 3 + Vite，界面与调用封装分离，可替换主题、裁剪功能或嵌入既有站点。
- client/packages/adp-widget：交互式 Widget 渲染包（图表、表单等），支持懒加载与自定义路径配置。
后端：server/，按 config / core / model / middleware / router / util 分层，core 层与具体协议解耦，model 层提供 ORM 实体定义，便于复用与替换。

在此基础上模仿或改造，即可较低成本地搭建出符合自身业务的智能工作台。