作品七：AI聊天助手

AI 聊天助手是最基础也是最实用的 AI 应用 。​

​

💤

通过这个项目 ，你可以学习如何用 Vibe Coding 的方式快速开发一个完整的 AI 对话应用 。​

​

这个项目要实现一个完整的聊天界面 ，用户可以输入问题，AI 给出回答 。要支持多轮对话，AI 能记住之前说过的内容，这样对话才连贯 。​

为了更好的体验​

​

•

AI 的回答要逐字显示，而不是一次性全部出现，这叫流式输出 。​

•

对话记录要保存在本地，刷新页面也不会丢失 。另外，还需要一个清空对话的功能，方便开始新的话题。​

​

​

​

​

​

50%

​

​

​

​

50%

​

​

​

🔷

技术选型​

我们使用 React + TypeScript + Vite 作为前端框架，Tailwind CSS 来写样式 。​

AI 能力通过调用大模型 API 实现，对话历史用 LocalStorage 保存，AI 的回答用 react-markdown 来渲染，这样可以支持代码高亮等格式。​

​

开发步骤​

1）准备工作​

开发的第一步是准备工作 。你需要获取 API Key 来调用 AI 模型 。访问 智谱 AI 开放平台 ，进入用户控制台，点击 API Key 就可以获取 。​

智谱 AI 提供的 GLM 模型效果不错，而且有免费额度，适合学习使用 。​

​

​

2） 写需求文档​

有了 API Key，就可以开始写需求文档了。创建 PRD.md 文件， 明确你要做什么：​

​

代码块​

Markdown

# AI 聊天助手 PRD​

​

## 核心功能​

1. 用户可以输入问题，AI 给出回答​

2. 支持多轮对话，AI 能记住之前的对话内容​

3. AI 回答要逐字显示，不要一次性全部出现​

4. 对话记录要保存在本地，刷新页面不会丢失​

5. 可以清空对话，开始新的话题​

6. AI 的回答支持 Markdown 格式，包括代码高亮​

​

## 界面要求​

- 类似微信的聊天界面​

- 用户消息在右边，AI 消息在左边​

- 底部有输入框和发送按钮​

- 简洁现代的设计风格​

​

这个文档清楚地说明了要实现什么功能，界面是什么样的。​

3） 写技术设计文档​

然后写技术设计文档 TECH_DESIGN.md ：​

​

代码块​

Markdown

# 技术设计​

​

## 技术栈​

- React + TypeScript + Vite​

- Tailwind CSS​

- 智谱 AI API​

- LocalStorage 存储对话历史​

- react-markdown 渲染 Markdown​

​

## 数据结构​

- Message: role（ user 或 assistant）、content（ 内容）、timestamp（ 时间戳）​

- 对话历史存储在 LocalStorage 中​

​

## API 调用​

- 使用智谱 AI Chat Completions API​

- 启用 stream 模式实现流式输出​

​

​

​

这个文档说明了用什么技术，数据结构是什么样的，API 怎么调用 。​

4） 写 AGENTS.md 文件​

接着创建 AGENTS.md 文件，告诉 AI 开发规范：​

​

代码块​

Markdown

​

这个文件是给 AI 的开发规范，让它知道代码要怎么写。​

5）和 AI 对话开发​

有了这三个文档，就可以开始和 AI 对话开发了 。打开 Cursor ，把这 3 个文档放在项目根目录。第一步是初始化项目 ：​

​

代码块​

Plain Text

请根据 PRD.md、TECH_DESIGN.md 和 AGENTS.md 的要求，初始化一个 React + TypeScript + Vite 项目 ，并安装必要的依赖：Tailwind CSS、react-markdown、react-syntax-​

highlighter。​

​

这个提示词告诉 AI 要创建什么项目 ，安装哪些依赖 。AI 会读取这三个文档，然后按照要求创建项目结构，安装依赖，配置 Tailwind CSS。​

第二步是创建数据类型和 API 封装：​

​

代码块​

Plain Text

​

这一步是为后续开发打基础，把数据结构和 API 调用都封装好，后面用起来就很方便。第三步是实现聊天界面：​

​

代码块​

Plain Text

创建 ChatInterface 组件，实现聊天界面 。要求：​

1. 消息列表显示在上方 ，用户消息在右边，AI 消息在左边​

2. 底部有输入框和发送按钮​

3. 使用 Tailwind CSS 实现类似微信的聊天界面样式​

4. 消息要支持 Markdown 渲染​

​

这个提示词说明了界面的布局和样式要求 。AI 会创建完整的聊天界面组件。第四步是实现对话功能：​

​

代码块​

Plain Text

实现发送消息的功能：​

​

这个提示词包含了对话功能的所有要求 。流式输出是关键， 它让 AI 的回答像打字一样逐字出现，用户体验会好很多 。多轮对话也很重要，要把之前的对话历史一起发送给 API ，这样 AI 才能记住之前说过的内容。​

第五步是添加数据持久化：​

​

代码块​

Plain Text

使用 LocalStorage 保存对话历史：​

1. 每次对话更新后自动保存​

2. 页面加载时读取历史记录​

3. 添加"清空对话"按钮，清除历史记录​

​

这样用户刷新页面后，之前的对话还在，不会丢失。第六步是优化用户体验：​

​

代码块​

Plain Text

优化用户体验：​

1. 新消息出现时， 自动滚动到底部​

2. 添加复制按钮，方便复制 AI 的回答​

3. 代码块要有语法高亮​

4. API 调用失败时，显示友好的错误提示​

​

这些细节虽然小 ，但能大幅提升用户体验。​

​

开发技巧​

在开发过程中，有几个技巧可以让你更高效 。首先，不要一次性让 AI 实现所有功能，而是分成多个小步骤，每完成一步就测试一下 。这样即使出问题，也容易定位和修复。​

其次，在对话时要给 AI 提供足够的上下文 。明确告诉它要实现什么功能 、有什么具体要求 、要遵循什么规范 。上下文越清晰，AI 生成的代码质量就越高。​

如果代码出现问题，记得把完整的错误信息发给 AI ，让它帮你分析和修复 。不要只说“代码报错了”，而是要把具体的错误信息粘贴给它。​

扩展思路​

基础版完成后，你可以继续扩展功能。​

•

比如添加系统提示词设置，让 AI 扮演不同角色（ 比如编程助手 、写作助手 、心理咨询师等）；​

•

支持多个对话会话管理，可以同时进行多个话题的对话；​

•

添加语音输入功能，用语音和 AI 对话；​

•

集成图片识别功能，让AI 可以看图回答问题；​

•

支持导出对话记录，保存重要的对话内容。​