如何从0-1搭建一个AI聊天小助手？

# 创建项目文件夹
mkdir ai-chat-assistant && cd ai-chat-assistant
# 初始化虚拟环境
python -m venv venv
# 激活虚拟环境
# Windows: venv\Scripts\activate
# Mac/Linux: source venv/bin/activate
# 安装依赖
pip install fastapi uvicorn openai pyjwt redis python-multipart

# 初始化Vue3项目
npm create vite@latest frontend -- --template vue
cd frontend
# 安装依赖
npm install
npm install element-plus axios

from fastapi import FastAPI, HTTPException
from fastapi.responses import StreamingResponse
from openai import OpenAI
from typing import List, Dict
import json

# 初始化服务
app = FastAPI(title="AI聊天助手后端服务")
# 配置大模型客户端（兼容各类OpenAI格式API）
client = OpenAI(
    api_key="你的大模型API密钥",
    base_url="大模型API接口地址"
)

# 全局存储对话上下文（生产环境建议替换为Redis）
conversation_history: Dict[str, List[Dict]] = {}
# 最大上下文轮数，避免token溢出
MAX_HISTORY_LEN = 10

# 流式对话接口
@app.post("/api/chat/stream")
async def chat_stream(user_id: str, message: str):
    # 初始化用户对话上下文
    if user_id not in conversation_history:
        conversation_history[user_id] = [{"role": "system", "content": "你是一个专业、友好的AI聊天助手，简洁精准回答用户问题"}]
    
    # 添加用户当前提问
    conversation_history[user_id].append({"role": "user", "content": message})
    # 裁剪上下文，保留最新对话
    if len(conversation_history[user_id]) > MAX_HISTORY_LEN + 1:
        conversation_history[user_id] = conversation_history[user_id][:1] + conversation_history[user_id][-(MAX_HISTORY_LEN):]

    # 定义流式生成器
    def stream_generate():
        try:
            stream = client.chat.completions.create(
                model="gpt-3.5-turbo", # 可替换为对应模型名称
                messages=conversation_history[user_id],
                temperature=0.7, # 创造性系数，0严谨-1发散
                max_tokens=1024,
                stream=True
            )
            content = ""
            for chunk in stream:
                if chunk.choices[0].delta.content:
                    text = chunk.choices[0].delta.content
                    content += text
                    yield json.dumps({"content": text}, ensure_ascii=False) + "\n"
            # 保存模型回复到上下文
            conversation_history[user_id].append({"role": "assistant", "content": content})
        except Exception as e:
            yield json.dumps({"error": str(e)}, ensure_ascii=False) + "\n"
    
    return StreamingResponse(stream_generate(), media_type="text/event-stream")

# 清空对话上下文接口
@app.post("/api/chat/clear")
async def clear_chat(user_id: str):
    if user_id in conversation_history:
        del conversation_history[user_id]
    return {"code": 200, "msg": "对话清空成功"}

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

<template>
  <div class="chat-container">
    <!-- 对话消息列表 -->
    <div class="chat-list">
      <div v-for="(item, index) in chatList" :key="index" class="chat-item" :class="item.role">
        <div class="chat-content">{{ item.content }}</div>
      </div>
    </div>
    <!-- 输入框区域 -->
    <div class="chat-input">
      <el-input v-model="message" placeholder="请输入问题" @keyboard.enter="sendChat" />
      <el-button type="primary" @click="sendChat">发送</el-button>
      <el-button @click="clearChat">清空对话</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const message = ref('')
const chatList = ref([])
const userId = ref('user_001') // 固定用户ID，生产环境替换为登录用户ID

// 发送对话请求
const sendChat = async () => {
  if (!message.value.trim()) return
  // 添加用户消息到列表
  chatList.value.push({ role: 'user', content: message.value })
  const sendText = message.value
  message.value = ''
  
  // 初始化AI回复占位
  let aiReply = ''
  chatList.value.push({ role: 'assistant', content: '' })

  // 流式请求后端接口
  const res = await axios.post(`http://localhost:8000/api/chat/stream?user_id=${userId.value}&message=${sendText}`, {}, {
    responseType: 'stream'
  })

  // 解析流式数据
  const reader = res.data.getReader()
  const decoder = new TextDecoder()
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    const chunk = decoder.decode(value)
    const lines = chunk.split('\n').filter(item => item)
    lines.forEach(line => {
      const data = JSON.parse(line)
      if (data.content) {
        aiReply += data.content
        chatList.value[chatList.value.length - 1].content = aiReply
      }
    })
  }
}

// 清空对话
const clearChat = async () => {
  await axios.post(`http://localhost:8000/api/chat/clear?user_id=${userId.value}`)
  chatList.value = []
}
</script>