引言
平时我们都是用的在线的AI工具，直接输入问题，然后AI回答我们，那么怎么把AI接入项目中呢？
这个问题问得好。
- 方案一：引入第三方已封装好的UI库
- 方案二：自己写
对于方案一，市面上已有一些，大家可自己搜索，类似于Ant Design X（React/Vue）等，今天主讲方案二。
封装
本组件示例仅提供交互思路，样式啥的自己封装。
先看下效果图
可以看到，我们输入了一个问题，然后AI就会不断地给我们推送消息，消息是流式的stream，我们要做的就是把这些流式消息不断地渲染在页面上。
如果等返回后只渲染一次，那么用户等待时间太长了，体验感不好，你懂得~
由于返回的内容是markdown格式的，所以我们还要引入markdown-it组件来美化显示。
pnpm add markdown-it
还要安装openai来请求
pnpm add openai
完整的组件在最下方，大家可以可以自己填入大模型的API地址和KEY值
但是这样做会有风险，那就是
API地址和KEY值容易泄露，所以最好还是封装在后端，改为直接请求后端API地址
同时你还可以给系统设定角色，可以这样写（role: ‘system’,是角色参数，需要放在第一位）：
const stream = await client.chat.completions.create({model: MODEL_NAME,messages: [{role: 'system',content: '你是一个经验丰富的历史老师，可以引经据典给学生讲解各种历史知识'},{role: 'user',content: inputText.value}],// 设为流式stream: true,
});
完整组件代码如下：
<template><div class="app-container"><input v-model="inputText" placeholder="请输入你的问题" /><button @click="sendMessage">发送</button><div class="main-content" v-if="responseText" v-html="renderedMarkdown"></div></div>
</template><script setup>
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it';// 配置 API Key，这里可以根据实际情况进行修改
const API_KEY = '你的API key值';
const API_URL = '你的API 请求地址';
// 模型名称，如果API和KEY可以确定模型，那么这个模型不生效
const MODEL_NAME = 'qwq-32b';// 定义输入框内容和响应文本的响应式变量
const inputText = ref('');
const responseText = ref('');import OpenAI from "openai";
const client = new OpenAI({baseURL: API_URL,apiKey: API_KEY,dangerouslyAllowBrowser: true,
});// 创建 markdown-it 实例
const md = new MarkdownIt();// 计算属性，将 responseText 转换为 HTML
const renderedMarkdown = computed(() => {return md.render(responseText.value);
});// 发送消息封装
async function sendMessage() {try {const stream = await client.chat.completions.create({model: MODEL_NAME,messages: [{role: 'user',content: inputText.value}],// 设为流式stream: true,});for await (const chunk of stream) {console.log('chunk', chunk)responseText.value += chunk.choices[0]?.delta?.content || '';}} catch (error) {console.log('请求出错', error)}
}</script><style scoped>
/* 可以根据需要添加样式 */
.app-container {padding: 20px;
}
.main-content {background-color: #f9fafb;border: 1px solid #e5e7eb;border-radius: 8px;padding: 20px;
}
input {margin-right: 10px;
}
</style>
附Ant Design X的UI界面，确实好看些
