Next.js + Tailwind构建生产级AI Agent界面

从简单的 Web 应用转向 AI 驱动的界面，这个步伐正在加快。但开发者面临的最大挑战之一并非后端 AI 逻辑，而是构建一个能够处理流式文本、工具调用状态和复杂 Agent 交互，而又不显得笨重的前端 UI。

当在 Vectoris 为客户定制 B2B Web 应用时，我们需要一种简洁、可扩展的方式来渲染自主 Agent 的输出。标准的聊天界面已经无法满足复杂工作流的需求。

以下是我们使用的轻量级、生产级 UI 架构，完全基于 Next.js、Tailwind CSS、TypeScript 和 Lucide React 构建。

标准聊天 UI 的问题

大多数入门模板将 AI 响应视为简单的字符串。但当你处理自主 Agent 时，UI 需要处理以下场景：

• 思考状态（Agent 正在推理时）
• 工具执行（例如，"正在搜索网页…"、"正在查询数据库…"）
• 最终输出的 Markdown 渲染

解决方案：组件驱动的消息接口

不要用一个庞大的单体聊天组件，而是将界面拆分成多个组件。以下是我们核心消息组件的简化版本。

首先，定义一个严格的消息类型，不仅包含文本，还要考虑 Agent 的各种动作。

export type AgentMessage = {
  id: string;
  role: 'user' | 'agent';
  content: string;
  status: 'thinking' | 'executing_tool' | 'complete';
  toolName?: string;
};