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

烂泥扶不上墙的刘鑫

已于 2025-03-04 18:20:06 修改

阅读量4k

点赞数 24

文章标签： vue AI编程前端 java javascript

于 2025-03-04 18:18:11 首次发布

本文链接：https://blog.csdn.net/weixin_57190021/article/details/146023458

版权

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

引言

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

Deepseek API 简介

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

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

项目功能特点

双模式切换：支持快速回答和深度思考两种模式
实时状态显示：清晰展示 AI 助手的在线状态
流式响应：逐字显示 AI 回复，提供更好的用户体验
思维链展示：在深度思考模式下可查看 AI 的推理过程
优雅的 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 = "抱歉，我遇到了一些问题。请稍后再试。";
  }
};

样式设计要点

响应式布局

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

消息气泡样式

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

动画效果

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

使用说明

克隆项目后安装依赖：

npm install

在项目中配置 Deepseek API Key：

const API_KEY = "your-api-key";

启动项目：

npm run dev

注意事项

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

总结

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

后续优化方向

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

在线体验

前端小dome

参考资料

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

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