开发 AI 应用更多的是开发者自己的业务逻辑,NuxtBase 不做太多的限制。NuxtBase 提供了简单的 AI 应用示例,我们可以从示例中学习如何开发 AI 应用。
NuxtBase 集成了 langchain.js + openai.js,你也可以开箱即用。
首先,你需要获取你的 API 服务商的API_KEY
和BASE_URL
,并填入到server/.env
文件中。
OPENAI_API_KEY=your_key
OPENAI_BASE_URL=https://api.deepseek.com
例如上面我们采用的是 Deepseek 作为我们的大模型服务商。目前国内大部分的 AI 服务商都是兼容 openai 的 API,如果你的服务商不兼容 openai 的 API,你也可以根据服务商的文档自行封装大模型的调用逻辑。
但是我的建议是,选择一个兼容 openai 的 API 服务商,这样你可以更加方便的切换服务商!
NuxtBase 目前提供了一个非常简单的 AI 应用,就是给一段文本添加 emoji 表情。未来我们会在模板中添加更多的 AI 应用示例,并且出更多的教程,欢迎关注我们的更新。
这个 AI 应用示例前端非常简单,你可以在EmojiDemo.vue
中查看。
const res = await axios.post("/api/demos/emoji", {
text: text.value,
type: type.value,
});
if (res.success) {
emojiText.value = res.data;
}
用户点击按钮后,我们会调用后端的 API,获取到添加了 emoji 表情的文本内容:
后端的demos.controller.ts
分别提供了使用 openai.js 和 langchain.js 的调用方式,这边我们默认采用的是 langchain.js,当然你可以打开 openai 的相关代码。
// 给文本添加emoji
@Post('/emoji', { middleware: [AuthMiddleware, TokenMiddleware] })
async addEmoji(@Body() body) {
const { text, type } = body;
// 基于openai.js的示例
// const data = await this.demosService.addEmojiByOepnAI(text, type);
// 基于langchain的示例
const data = await this.demosService.addEmojiByLangchain(text, type);
return {
success: !!data,
data,
};
}
如果你需要使用到多个 AI 服务商,那么你可以在环境变量中添加多个服务商的API_KEY
和BASE_URL
。
# DeepSeek
OPENAI_API_KEY=sk-xxx
OPENAI_BASE_URL=https://api.deepseek.com
# 通义千问
QWen_API_KEY=sk-xxx
QWen_BASE_URL=https://dashscope.aliyuncs.com/compatible-mode/v1