UIChat
AI 对话界面设计模式集合，从思考到工具调用，一站式参考
交互演示
输入消息体验完整的 Agent 执行流程
发送一条消息，看看 Agent 是怎么工作的
正在分析...
分析意图
用户的问题需要搜索最新资料再结合代码验证。让我先搜索一下。
web_search
搜索中...
web_search
搜索完成 · 3 条结果
"query": "用户输入关键词"
React 19 正式发布 — 官方博客
react.dev/blog/react-19
React 19 新特性完整解析
dev.to/react-19-features
Server Actions 实战教程
nextjs.org/docs/server-actions
整理结果...
code_interpreter
执行中...
code_interpreter
执行完成
python
from react_utils import validate_action result = validate_action("submitForm") print(result.status) # "valid"
输出：valid — 验证通过
欢迎页
首次进入时的引导界面
有什么我能帮你的？
我可以帮你写代码、分析数据、解答问题，或者只是聊聊天。
下午好，有什么想聊的？
选择一个话题开始，或直接在下方输入
消息气泡
用户与 AI 的基础对话
帮我解释一下 JavaScript 中的闭包是什么？
闭包（Closure）是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。
简单来说，闭包让内部函数可以访问外部函数的变量，即使外部函数已经执行完毕。这是 JavaScript 中非常强大的特性，常用于数据封装和工厂模式。
流式输出
打字机效果 + 停止按钮
React 的虚拟 DOM 通过在内存中维护一棵轻量级的 DOM 树来工作。当状态变化时，React 会计算新旧虚拟 DOM 的差异
输入框
支持附件、多行输入
思考中
AI 正在处理请求
这道数学题怎么解？
思考过程
可折叠的推理链，点击即可切换
已思考 3.2 秒
用户问的是一个排列组合的问题。让我分析一下...
这是从 n 个元素中选择 k 个的组合问题。
使用组合公式 C(n,k) = n! / (k! × (n-k)!)
代入数据：C(10, 3) = 10! / (3! × 7!) = 120
答案是 120 种不同的选择方式。
这是从 n 个元素中选择 k 个的组合问题。
使用组合公式 C(n,k) = n! / (k! × (n-k)!)
代入数据：C(10, 3) = 10! / (3! × 7!) = 120
答案是 120 种不同的选择方式。
答案是 120 种不同的选择方式。使用组合公式 C(10, 3) = 120。
Thinking in Progress
正在思考...
5.1s
让我仔细分析这个问题。这涉及到动态规划的思想，需要定义状态转移方程。设 dp[i] 表示到达第 i 个阶梯的方案数
Thought for 3.2 seconds
用户问的是一个排列组合的问题。让我分析一下...
这是从 n 个元素中选择 k 个的组合问题。
使用组合公式 C(n,k) = n! / (k! × (n-k)!)
代入数据：C(10, 3) = 10! / (3! × 7!) = 120
答案是 120 种不同的选择方式。
这是从 n 个元素中选择 k 个的组合问题。
使用组合公式 C(n,k) = n! / (k! × (n-k)!)
代入数据：C(10, 3) = 10! / (3! × 7!) = 120
答案是 120 种不同的选择方式。
答案是 120 种不同的选择方式。使用组合公式 C(10, 3) = 120。
Thinking...
让我仔细分析这个问题。这涉及到动态规划的思想，需要定义状态转移方程。设 dp[i] 表示到达第 i 个阶梯的方案数
深度思考
分步骤展示的推理面板
深度思考
12.4s
工具调用 — 执行中
正在调用外部工具
web_search
搜索 "2026年最新前端框架排名"
执行中
工具调用 — 成功
点击可展开/收起详情
web_search
搜索 "2026年最新前端框架排名"
{
"query": "2026年最新前端框架排名",
"max_results": 5
}
返回 5 条结果 — React, Vue, Svelte, Solid, Astro
工具调用 — 失败
调用出错，可重试
database_query
查询用户表数据
ConnectionError: 数据库连接超时
多步工具调用
顺序执行的时间线
web_search
完成
搜索 "React Server Components 最佳实践"
read_url
完成
读取 react.dev/blog/rsc-guide
code_interpreter
执行中
生成示例代码并验证
生成最终回复
并行工具调用
多个工具同时执行
web_search
搜索技术文档
data_analysis
分析性能数据
read_file
读取配置文件
image_gen
生成示意图
人工确认
敏感操作需要审批
需要你的确认
AI 请求执行以下操作：
DELETE FROM users WHERE last_login < '2025-01-01'
将删除 1,247 条记录，不可撤销。
代码块
语法高亮 + 一键复制
typescript
interface ChatMessage { id: string; role: 'user' | 'assistant'; content: string; thinking?: string; toolCalls?: ToolCall[]; } function renderMessage(msg: ChatMessage) { if (msg.thinking) { return <ThinkingBlock content={msg.thinking} />; } return <Bubble role={msg.role}>{msg.content}</Bubble>; }
代码 Diff
修改前后对比
src/components/ChatMessage.tsx
const ChatMessage = ({ message }) => {
- const [isThinking, setIsThinking] = useState(false);
+ const [thinkingState, setThinkingState] = useState<ThinkingState>('idle');
+ const [thinkingDuration, setThinkingDuration] = useState(0);
- if (isThinking) return <Spinner />;
+ if (thinkingState === 'active') {
+ return <ThinkingPanel duration={thinkingDuration} />;
+ }
return <div>{message.content}</div>;
Agent 执行流
思考 + 工具调用交替进行的完整回合
帮我查一下 React 19 有哪些新特性，然后写一个使用 Server Actions 的示例代码
分析意图
用户需要两件事：1) 了解 React 19 新特性；2) 一个 Server Actions 的代码示例。
我先搜索一下最新资料，再写代码。
我先搜索一下最新资料，再写代码。
web_search
搜索 "React 19 new features 2026"
"query": "React 19 new features 2026"
React 19 正式发布 — 官方博客
react.dev/blog/react-19
React 19 新特性完整解析
dev.to/react-19-features
Server Actions 实战教程
nextjs.org/docs/server-actions
整理搜索结果
搜索结果显示 React 19 主要特性包括：React Compiler、Server Components 稳定版、Server Actions、新 Hooks（useActionState, useFormStatus, useOptimistic）、ref 作为 prop 传递等。
我现在来写一个 Server Actions 的示例。
我现在来写一个 Server Actions 的示例。
code_interpreter
验证 Server Actions 示例
✓ TypeScript 编译通过 ✓ Server Action 函数签名正确 ✓ 表单绑定验证通过
read_url
读取 react.dev/blog/react-19
React 19 Release — react.dev
React 19 introduces the React Compiler, stable Server Components, Server Actions, and new hooks including useActionState and useOptimistic...
React 19 带来了几个重要更新：
- React Compiler — 自动优化重渲染，不再需要手动 useMemo/useCallback
- Server Actions — 表单可以直接绑定异步服务端函数
- 新 Hooks — useActionState、useFormStatus、useOptimistic
- ref 简化 — ref 可以直接作为 prop 传递，无需 forwardRef
下面是一个 Server Actions 的示例代码：
Analyzing the request
The user wants to know React 19 features and needs a Server Actions code example.
I'll search for the latest info first, then write and verify the code.
I'll search for the latest info first, then write and verify the code.
Searched "React 19 new features 2026"
Processing search results
Found key features: React Compiler, Server Components stable, Server Actions, new Hooks (useActionState, useFormStatus, useOptimistic), ref as prop.
Now writing the Server Actions example.
Now writing the Server Actions example.
Ran code_interpreter
✓ TypeScript compiled ✓ Server Action signature valid ✓ Form binding verified
Read react.dev/blog/react-19
React 19 的主要更新：
- React Compiler — 自动优化重渲染
- Server Actions — 表单直接绑定服务端函数
- 新 Hooks — useActionState、useFormStatus、useOptimistic
- ref 简化 — 不再需要 forwardRef
思考 12.4s · 搜索 2 次 · 执行代码 1 次
分析意图 — 需要查资料 + 写代码
Searched "React 19 new features 2026"
整理搜索结果，准备写代码
Ran code_interpreter
Read react.dev/blog/react-19
React 19 的主要更新：
- React Compiler — 自动优化重渲染
- Server Actions — 表单直接绑定服务端函数
- 新 Hooks — useActionState、useFormStatus、useOptimistic
- ref 简化 — 不再需要 forwardRef
任务规划
AI 拆解的子任务清单
任务计划 — 重构用户认证模块
分析现有认证代码结构
设计新的 JWT 认证方案
添加中间件权限校验
编写单元测试
更新 API 文档
子 Agent
委派子任务给专门的 Agent
代码审查 Agent
已完成
审查 3 个文件，发现 2 个问题：
•
•
•
auth.ts:42 — 未处理 token 过期•
middleware.ts:18 — 缺少错误处理
测试生成 Agent
运行中
正在生成单元测试，已完成 4/7 个用例
结果汇总
任务完成后的摘要
任务完成 — 用户认证模块重构
✓ 将 Session 认证迁移为 JWT 方案
✓ 实现自动 Token 刷新（有效期 15min）
✓ 新增 RBAC 权限中间件
✓ 编写 12 个单元测试，覆盖率 94%
✓ 更新 API 文档（8 个接口）
修改 6 个文件 · +342 行 · -128 行 · 耗时 2m 14s
消息操作
hover 时显示的操作按钮
这是一段 AI 回复，下方展示所有操作按钮。
分支对话
切换不同版本的回复
这是第 2 个版本的回复，用箭头切换版本。
2 / 3
模型切换
选择不同的 AI 模型
限流 / 额度用尽
达到使用上限