vue对接deepSeek，实现聊天机器人

DeepSeek是杭州深度求索人工智能基础技术研究有限公司推出的AI助手，免费体验与全球领先AI模型的互动交流，于2025年1月15日正式上线。

DeepSeek凭借自然语言处理、机器学习与深度学习、大数据分析等核心技术优势，在推理、自然语言理解与生成、图像与视频分析、语音识别与合成、个性化推荐、大数据处理与分析、跨模态学习以及实时交互与响应等八大领域表现出色。它能进行逻辑推理、解决复杂问题，理解和生成高质量文本，精准分析图像和视频内容，准确识别和合成语音，根据用户偏好提供个性化推荐，高效处理大规模数据并挖掘有价值信息，实现多模态数据融合与学习，以及通过智能助手和聊天机器人实现快速的自然语言交互。

实现vue3对接deepSeek，具体操作如下：

一、实现效果

二、代码

首先下载一个工具包：

npm i openai

 然后在页面中引入：

import OpenAI from "openai";

请求deepSeek代码：

import { ref, reactive, toRefs, onMounted, watchEffect } from "vue";
import OpenAI from "openai";
import axios from "axios";
const state = reactive({
  aiArr: [],//机器人返回的聊天记录
  userArr: [],//你发送过的聊天记录
  prompts: [{ content: "哪吒二票房", role: "user" }]//先写一个固定值，方便调试，这个你的和机器人的聊天记录
});
const {
  aiArr,
  userArr,
  prompts,
} = toRefs(state);

let chatStr = "";

        let openaiA = new OpenAI({
          baseURL: "https://api.deepseek.com",
          apiKey: '你的apikey,注册一个账号获取',
          dangerouslyAllowBrowser: true,
        });

        let dataAll = {
          model: "deepseek-chat",
          stream: true
        }
        // 这个dataAll.messages里面是所有聊天记录，把之前的记录带过去，ai才能进行上下文联动
        dataAll.messages = dtate.prompts;

        // 像deepSeek发送请求
        async function handleRequest() {
          try {
            const response = await openaiA.chat.completions.create(
              dataAll
            );
            // 对返回的数据进行字符串拼接，这样可以流式显示返回数据，减少用户等待时间
            for await (const part of response) {
              chatStr += part.choices[0].delta.content;
              // chatStr是最终返回的数据，state.aiArr[state.userArr.length]是记录ai所有的消息，用来页面展示
              state.aiArr[state.userArr.length] = chatStr;
              // 将聊天记录加到state.prompts，方便后续发送给deepSeek
              state.prompts[state.userArr.length * 2 + 1] = {
                role: "assistant",
                content: chatStr,
              };
            }
          } catch (error) {
            chatStr += '加载失败,请稍后重试!';
            state.aiArr[index] = chatStr;
            state.prompts[index * 2 + 1] = {
              role: "assistant",
              content: chatStr,
            };
          }
        }

        handleRequest()

此时就可以和deepSeek实现聊天了。

---