边缘安全加速平台 EO 对话型大模型集成

本文详细介绍如何集成 AI 大模型，快速搭建 AI 对话应用。涵盖 API 密钥获取配置、完整代码实现解析、开发调试等内容，包括原生接口调用和 AI SDK 封装调用两种技术路径，前者适合深度定制需求，后者适合快速集成。
快速入门
EdgeOne Pages 提供多个 AI 对话的模板，支持原生接口调用和SDK 封装调用两种接入方式。示例如下：
﻿原生接口调用模板﻿
﻿AI SDK 封装调用模板﻿
本文将以这两个模板为范例，分别介绍原生接口调用和 AI SDK 封装调用两种技术路径进行详细的集成解析。
前置条件说明
实现 AI 对话功能需要先申请 API Key。以下是各主流 AI 提供商的 API Key 获取地址：
﻿DeepSeek﻿
﻿OpenAI﻿
﻿Google﻿
﻿Anthropic﻿
﻿Claude﻿
﻿xAI﻿
一键部署
首先对“模板介绍”中的模板进行部署，将模板生成到 用户的 GitHub 账户下，之后开始讲解集成的细节内容。
在模板详情页单击Deploy进入 EdgeOne Pages 控制台。进入控制台后，在项目部署页面会出现环境变量配置列表，这里的环境变量配置其实是配置将要使用的 AI 对话模型对应的 API Key，部署上文中的不同模板会显示不同的配置列表。但是至少要配置一个可正常使用的 API Key。
以 ai-sdk-chatbot-starter 为例，其配置界面如下：
﻿
﻿
﻿
配置完成后单击立即创建。
集成详情
下载代码
部署成功后，GitHub 账户下已经生成了一个和模板一样的项目。这里先使用 clone 命令从 GitHub 账户下将代码下载到本地。同样以 ai-sdk-chatbot-starter 模板为示例，在终端执行如下命令：
git clone https://github.com/[your_github_account]/ai-sdk-chatbot-starter.git
cd ai-sdk-chatbot-starter
原生接口调用
如果 clone 的项目是 ai-chatbot-starter 模板。它是采用原生接口调用集成的方式。其原生接口调用的逻辑流程是：前端发送请求 → 边缘函数处理 → 调用 AI 模型 API → 返回响应 → 前端渲染消息列表。并且以此逻辑流程往复，来实现聊天对话过程。下面对每一个环节进行讲解。
1. 前端发送请求
先从前端发送请求开始讲起。在项目中，发起请求的核心代码位于 app/apiApp.js 文件中。前端通过 /api/ai 接口发送请求，核心代码如下：
const res = await fetch("/api/ai", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ model, messages }),
  signal: controller.signal,
});
其中，messages 是用户和 AI 的消息记录，包含对话历史；model 是请求的对应模型名称，用于指定要调用的 AI 模型。
2. 边缘函数处理
边缘函数的处理逻辑是在 functions/api/ai/index.js 文件内实现的。该文件接收前端发送的请求，并根据 model 参数调用对应的 AI 模型 API。核心代码如下：
const { model, messages } = await request.json();
if (!model || !messages) {
  return new Response(JSON.stringify({ error: "Missing model or messages" }), {
    status: 400,
    headers: { "Content-Type": "application/json" },
  });
}
if (model === "deepseek-chat" || model === "deepseek-reasoner") {
  return proxyDeepSeek(messages, model, env);
}
这里以 DeepSeek 为例展示处理逻辑，实际模板内还实现了 Claude、OpenAI、Google 等主流 AI 模型的处理。代码中的 env 参数涵盖了配置的环境变量值。在后续的 AI 真实接口调用中，会通过 env 参数安全地传递这些 API Key，以此规避 API Key 的明文传递，确保密钥的安全。
3. 调用 AI 模型 API
接下来是 API 调用逻辑。边缘函数根据 model 参数调用对应的 AI 模型 API，同样以 DeepSeek 为例，核心代码如下：
const res = await PROVIDERS.fetch("https://api.deepseek.com/chat/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${apiKey}`,
  },
  body: JSON.stringify(requestBody),
});
通过将 messages（聊天记录）和 apiKey（API 密钥）设置到请求的对应位置，实现了对 AI 模型的调用。其中 messages 作为请求体传递给 AI 模型，apiKey 通过 Authorization 头部进行身份验证。
4. 返回响应
AI 模型处理完成后，边缘函数将响应返回给前端。这里请注意，返回的数据是采用流式输出的模式，这也让前端可以提前让内容进行部分显示，可以让前端等待响应时间缩短，优化体验。
return new Response(res.body, {
  status: res.status,
  headers: {
    "Content-Type":
      res.headers.get("Content-Type") || "application/octet-stream",
    "Cache-Control": "no-store",
  },
});
5. 前端处理消息
前端接收到 AI 模型的响应后，在 components/MessageItem.jsx 中对返回的数据进行展示。该组件负责渲染聊天消息，将消息列表队列分成 AI 和用户两类进行显示，不同类型的消息，在 UI 样式上作一定的区分即可。
以上就是原生接口调用方式的完整集成过程。从下载模板、配置环境变量，到前端发送请求、边缘函数处理、调用 AI 模型 API、返回响应，最后在前端展示消息，形成了完整的 AI 对话功能实现链路。
AI SDK 封装调用
如果 clone 的项目是 ai-sdk-chatbot-starter 模板。它是采用的 AI SDK 封装调用方式，核心原理是使用 AI SDK UI 和 AI SDK 来实现 AI 对话的过程。AI SDK 提供了统一的接口来调用不同厂商的 AI 模型，而 AI SDK UI 则提供了现成的 React 组件来管理聊天界面的消息列表。该模板的逻辑流程是：创建消息管理器 → 变更消息队列 → AI SDK 封装调用 → 消息管理器更新。
1. 创建消息管理器
AI SDK UI 提供了消息管理器的概念，用于管理聊天记录的状态和交互。消息管理器负责处理用户输入、AI 回复、消息历史等，并提供统一的数据格式来操作消息队列。
在项目中，创建消息管理器的核心代码位于 hooks/useChatLogic.ts 文件中：
import { useChat } from "ai/react";
const {
  messages,
  sendMessage,
  status,
  error,
  regenerate,
  setMessages,
  clearError: clearChatError,
} = useChat({
  onFinish: (message) => {
    // ...
  },
  onError: (error) => {
    //...
  },
});
其中，useChat hook 提供了消息管理的核心功能：
messages：消息列表，包含所有聊天记录。
sendMessage：发送消息函数，用于主动发送消息到 AI 模型。
setMessages：设置消息列表函数，用于手动更新或重置消息队列。
status：当前状态（idle、loading、error 等）。
error：错误信息。
regenerate：重新生成最后一条 AI 回复。
2. 变更消息队列
当用户在聊天界面输入消息并点击发送按钮时，会触发消息发送流程。通过页面的发送按钮会触发以下示例代码：
sendMessage(
  { text },
  {
    headers: {
      "X-Model": selectedModel,
    },
  }
);
该函数接收用户输入的文本内容，通过 sendMessage 函数将消息发送到接口。默认情况下，sendMessage 会请求 api/chat 接口。同时通过 X-Model 头部指定要使用的 AI 模型，实现多模型切换功能。
3. AI SDK 封装调用
AI SDK 的处理逻辑是在 app/api/chat/route.js 文件内实现的。该文件接收前端发送的请求，并根据 model 参数调用对应的 AI 模型 API。
在调用 AI 模型之前，系统会对接收到的消息进行处理，将其转换为统一的格式。处理代码如下：
// Convert messages to UI format
const uiMessages: UIMessage[] = body.messages.map((msg: any) => ({
  id: msg.id || Math.random().toString(36).substr(2, 9),
  role: msg.role,
  parts: msg.parts || [{ type: "text", text: msg.content || msg.text || "" }],
}));
通过代码 providerConfig.provider(selectedModel) 的调用，函数会根据用户选择的模型名称自动选择对应的 AI SDK 提供商。API Key 的传递方式也和 AI 原生接口的调用模式一样，通过 env 来传递。
函数中已经支持的大模型列表如下：
import { deepseek } from "@ai-sdk/deepseek";
import { anthropic } from "@ai-sdk/anthropic";
import { google } from "@ai-sdk/google";
import { openai } from "@ai-sdk/openai";
import { xai } from "@ai-sdk/xai";
如果用户需要支持更多的模型，可以自行添加。
接下来是具体的 AI SDK 的模型调用过程，核心代码如下：
const result = streamText({
  model: providerConfig.provider(selectedModel),
  system:
    "You are an intelligent AI assistant dedicated to helping users. Please follow these principles:\\n1. Provide accurate, useful, and concise answers\\n2. Maintain a friendly and professional tone\\n3. Be honest when uncertain about answers\\n4. Support both Chinese and English communication\\n5. Provide practical advice and solutions",
  messages: convertToModelMessages(uiMessages),
  maxOutputTokens: 1000,
  temperature: 0.7,
  onError: (error) => console.error("AI API Error:", error),
  onFinish: (result) =>
    console.log("AI Response finished:", {
      provider: providerConfig.name,
      model: selectedModel,
      usage: result.usage,
      finishReason: result.finishReason,
    }),
});
streamText 是 AI SDK 提供的实现 AI 对话的函数，执行 streamText 后，需要将返回的内容转化为 AI SDK UI 标准的数据格式，实现方式是通过 AI SDK 的 toUIMessageStreamResponse 实现的。代码如下：
result.toUIMessageStreamResponse();
此时，AI SDK 调用的过程已经完成，后续过程，只需要在前端代码中处理接口响应的内容即可。
4. 前端处理消息
前端接收到 AI 模型的响应后，在 components/MessageList.jsx 中对返回的数据进行展示。该组件监听 hooks/useChatLogic.ts 传递的 messages 对象变动，当有新的 AI 响应内容时，消息管理器会自动更新消息列表显示。
以上就是 AI SDK 封装调用方式的完整集成过程。从下载模板、配置环境变量，到 AI SDK 封装调用，完成了 AI 对话功能的实现链路。
本地调试
在下载项目到本地并对项目实现细节进行解析后，开发者可能需要对其进行本地开发、调试或预览。要开启本地调试时同样需要配置环境变量，这显得比较繁琐。此时可以使用 EdgeOne CLI，它可以将上文在 EdgeOne Pages 部署的配置信息同步到本地，同时也可以直接在本地对项目进行部署。使用 EdgeOne CLI 需要安装和登录，详情可以参考 EdgeOne CLI 的文档介绍。
在安装和登录后，在本地项目下执行下面的命令可以将项目与 EdgeOne Pages 控制台的项目进行关联。
edgeone pages link
执行 EdgeOne Pages link 后，会提示输入 EdgeOne Pages 的项目名，也就是上文中部署的模板项目的名称。输入项目名后，会将 EdgeOne Pages 控制台在上文中部署项目的环境变量同步到本地。同步的方式是在本地项目的根目录下生成 .env 文件，文件内包含之前配置的环境变量列表。
关联后，可以执行以下命令来进行本地部署：
edgeone pages dev
部署后，可以在 localhost:8088 进行访问。以 ai-sdk-chatbot-starter 为例，预览示例如下：
﻿
如果对代码有自定义修改，可以直接通过 git 来提交项目到 GitHub，EdgeOne Pages 会自动检测 GitHub 的提交记录并进行重新部署。提交后进入控制台提交项目详情页面，在“部署中”状态结束后会出现下图的界面：
﻿
此时，只需要点击访问地址，去外网验证更新内容即可。
更多相关内容
﻿Pages Functions 文档﻿
﻿
对话型大模型集成

本页目录：

快速入门

前置条件说明

一键部署

集成详情

下载代码

原生接口调用

1. 前端发送请求

2. 边缘函数处理

3. 调用 AI 模型 API

4. 返回响应

5. 前端处理消息

AI SDK 封装调用

1. 创建消息管理器

2. 变更消息队列

3. AI SDK 封装调用

4. 前端处理消息

本地调试

更多相关内容
