AI夹克

项目：AI 聊天助手

项目概览

一个可以真正和 AI 对话的聊天应用，接入 OpenAI/Claude API。

⏱️ 预计 2-3 小时 | 🛠️ Vue 3 + OpenRouter API

功能清单

  • 对话界面（仿 ChatGPT 风格）
  • 多轮对话（保留上下文）
  • 流式输出（逐字显示）
  • 对话历史列表
  • 新建对话 / 切换对话
  • 对话存 localStorage
  • Markdown 渲染回复
  • 代码块语法高亮

跟着做

帮我做一个 AI 聊天应用（Vue 3 + OpenRouter API）：
1. 左侧对话历史列表，右侧聊天窗口
2. 每轮对话显示用户消息和 AI 回复
3. 支持流式输出（stream: true），逐字显示 AI 回复
4. 聊天窗口自动滚动到最新消息
5. 新建对话按钮，切换不同对话
6. AI 回复支持 Markdown 渲染
7. 代码块使用语法高亮（highlight.js）
8. 对话数据存 localStorage
9. API Key 通过设置面板输入
10. 设计参考 ChatGPT 界面

核心代码

// 流式调用
const stream = await client.chat.completions.create({
  model: 'openai/gpt-4o',
  messages: [...conversation],
  stream: true,
});
for await (const chunk of stream) {
  // 逐字追加到界面上
  reply.value += chunk.choices[0]?.delta?.content || '';
}

✅ 项目成果

  • 一个可以聊天的 AI 助手
  • 掌握了流式 API 调用
  • 理解了对话上下文管理