Vue3 + Deepseek API 打造智能 AI 助手聊天界面

引言

在当今 AI 快速发展的时代，越来越多的开发者希望在自己的应用中集成 AI 能力。本文将介绍如何使用 Vue3 和 Deepseek API 构建一个美观且功能强大的 AI 聊天助手界面。该项目支持实时对话、深度思考模式和流式响应，让用户获得类似 ChatGPT 的交互体验。

Deepseek API 简介

Deepseek 是一个强大的 AI 模型服务提供商，提供了类似 ChatGPT 的大语言模型能力。它的特点包括：

• 支持流式响应，实现打字机效果
• 提供思维链功能，展示 AI 的推理过程
• 支持中文对话，响应速度快
• 相比其他 API 服务，成本更低

项目功能特点

1. 双模式切换：支持快速回答和深度思考两种模式
2. 实时状态显示：清晰展示 AI 助手的在线状态
3. 流式响应：逐字显示 AI 回复，提供更好的用户体验
4. 思维链展示：在深度思考模式下可查看 AI 的推理过程
5. 优雅的 UI 设计：
   • 气泡式对话界面
   • 打字机效果
   • 平滑的动画过渡
   • 响应式布局

核心代码实现

1. 界面结构

<template>
  <div class="chat-container">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <div class="header-left">
        <h2>AI 智能助手</h2>
        <div class="status" :class="{ active: isConnected }">
          {{ isConnected ? "在线" : "连接中..." }}
        </div>
      </div>
      <!-- 模式切换开关 -->
      <div class="mode-switch">
        <label class="switch">
          <input type="checkbox" v-model="isDeepThinkingMode" />
          <span class="slider"></span>
        </label>
        <span class="mode-label">
          {{isDeepThinkingMode ? "深度思考模式" : "快速回答模式"}}
        </span>
      </div>
    </div>
    
    <!-- 消息列表区域 -->
    <div class="messages" ref="messagesRef">
      <!-- 消息内容 -->
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <textarea
        v-model="userInput"
        @keydown.enter.prevent="sendMessage"
        placeholder="输入您的问题..."
        :disabled="isTyping"
      ></textarea>
      <button @click="sendMessage" :disabled="!userInput.trim() || isTyping">
        <i class="fas fa-paper-plane"></i>
      </button>
    </div>
  </div>
</template>

2. 核心通信逻辑

const sendMessage = async () => {
  if (!userInput.value.trim() || isTyping.value) return;

  // 添加用户消息
  const userMessage = {
    role: "user",
    content: userInput.value,
    timestamp: new Date(),
  };
  messages.value.push(userMessage);
  
  // 准备 AI 响应消息
  const assistantMessage = {
    role: "assistant",
    content: "",
    reasoning_content: "",
    timestamp: new Date(),
  };
  messages.value.push(assistantMessage);

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${API_KEY}`,
        Accept: "text/event-stream",
      },
      body: JSON.stringify({
        messages: [{
          role: "user",
          content: userMessage.content,
        }],
        model: "deepseek-reasoner",
        stream: true,
        max_tokens: isDeepThinkingMode.value ? 2000 : 1000,
      }),
    });

    // 处理流式响应
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    
    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      
      const text = decoder.decode(value);
      // 处理响应数据...
    }
  } catch (error) {
    console.error("Error:", error);
    assistantMessage.content = "抱歉，我遇到了一些问题。请稍后再试。";
  }
};

样式设计要点

1. 响应式布局

.chat-container {
  max-width: 1000px;
  margin: 0 auto;
  height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}

2. 消息气泡样式

.content {
  max-width: 70%;
  background: white;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

3. 动画效果

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

使用说明

1. 克隆项目后安装依赖：

npm install

2. 在项目中配置 Deepseek API Key：

const API_KEY = "your-api-key";

3. 启动项目：

npm run dev

注意事项

1. 请确保妥善保管你的 API Key，不要将其暴露在公共环境中
2. 建议在生产环境中将 API 调用放在后端进行
3. 考虑添加速率限制和错误处理机制
4. 注意处理长对话的内存占用问题

总结

通过 Vue3 和 Deepseek API 的结合，我们创建了一个功能完整、界面优雅的 AI 聊天助手。该项目不仅展示了现代前端开发的最佳实践，也为想要集成 AI 能力的开发者提供了很好的参考。

后续优化方向

1. 添加对话历史保存功能
2. 实现多轮对话上下文
3. 添加语音输入功能
4. 支持 Markdown 渲染
5. 添加对话导出功能

在线体验

• 前端小dome

参考资料

• Vue 3 官方文档
• Deepseek API 文档
• MDN Web Docs

---

以上就是本文的全部内容，希望对大家有所帮助。如果觉得文章不错，请点赞收藏，关注我获取更多前端开发技术文章！

标签：Vue3, AI开发, 前端开发, Deepseek, JavaScript