开发 AI 应用

开发 AI 应用更多的是开发者自己的业务逻辑，NuxtBase 不做太多的限制。NuxtBase 提供了简单的 AI 应用示例，我们可以从示例中学习如何开发 AI 应用。

NuxtBase 集成了 langchain.js + openai.js，你也可以开箱即用。

获取你得 API 服务商

首先，你需要获取你的 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 服务商，这样你可以更加方便的切换服务商！

查看 AI 示例

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 服务商?

如果你需要使用到多个 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