边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
      • 使用 IDE 插件
    • 域名管理
      • 概览
      • 自定义域名
      • 配置 HTTPS 证书
      • 如何配置 DNS 的 CNAME 记录
    • Pages Functions
    • KV 存储
    • 边缘 AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • 集成指南
      • AI
        • 对话型大模型集成
        • 图片大模型集成
      • 数据库
        • Supabase 集成
        • Pages KV 集成
      • 电商
        • Shopify 集成
        • WooCommerce 集成
      • 支付
        • Stripe 集成
        • Paddle 集成
      • CMS
        • WordPress 集成
        • Contentful 集成
        • Sanity 集成
      • 身份验证
        • Supabase 集成
        • Clerk 集成
    • 最佳实践
      • 使用通用大模型快速搭建AI应用
      • 使用边缘AI模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
集成指南/
AI/
对话型大模型集成/

对话型大模型集成

AI 对话大模型是指参数量极大、能处理和生成自然语言等多种任务的深度学习人工智能模型。这些模型通过海量数据训练，具备强大的理解和生成能力，能够完成文本对话、文章内容创作等复杂任务。

概览

本文将详细介绍如何集成主流 AI 对话大模型到网站应用中，涵盖从平台选择、账号注册、API 密钥获取与配置，到前后端接口调用方法、多模型统一封装，以及最终快速搭建一个支持对话大模型网站的完整流程。

快速入门

通过选择 Edgeone Pages 平台提供的 对话大模型集成模板 ai-chatbot-starter，搭建支持多模型 AI 对话网站。主要包括以下三个核心环节：
注册主流 AI 大模型平台并获取 API Key，实现模型能力授权与安全接入
调试和集成 AI 对话大模型 API，完成前后端的智能调用与数据交互
将 AI 能力与网站页面深度融合，实现文本智能应用的高效落地

注册 AI 对话 API Key

实现AI对话功能，首先需要注册账号并获取 API Key。API Key 能确保请求能够授权去调用AI平台。例如注册 DeepSeek 后，可访问 https://platform.deepseek.com/api_keys 页面获取API Key。

集成 AI 对话模型接口

1、下载代码

上文中提到了Edgeone的 ai-chatbot-starter 模版，本文就以Edgeone的 ai-chatbot-starter 模版为基础进行讲解，后续的操作和集成流程均基于该项目展开。首先需要执行 git clone https://github.com/tomcomtang/ai-chatbot-starter.git 将项目代码克隆到本地。

2、AI 对话接口集成并整合

在申请并配置好各大模型的 API Key 后，接下来需要熟悉 AI 对话模型的 API 调用方式。下面例举了部分模型的接口调用示例，了解了它们后，可以为后续统一整合和适配提供基础条件。
DeepSeek 的标准的 API 请求示例如下：
curl https://api.deepseek.com/chat/completions \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer <DeepSeek API Key>" \
  -d '{
        "model": "deepseek-chat",
        "messages": [
          {"role": "system", "content": "You are a helpful assistant."},
          {"role": "user", "content": "Hello!"}
        ],
        "stream": false
      }'
如果需要集成哪些AI模型，则必须对哪些AI接口调用进行的封装。Edgeone的模版当然也做了相应的实现，它已经支持了DeepSeek、OpenAI、Gemini、Claude等主流模型。模版的集成实现方式主要包含以下几点：
边缘函数统一接口封装
使用边缘函数提供轻量化的接口服务
通过全局变量注入配置参数
WEB端直接访问AI 对话模型接口需要传递API Key进行鉴权的，API Key是不可以明文暴露的，这就需要有一层接口服务来进行封装。既然是用接口的话，当然首选是采用函数服务，因为它很轻量化，成本极低。模版中就包含了接口封装的边缘函数文件functions/api/ai/index.js，代码示例如下图所示：
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);
} else if (model === 'gpt-4o-mini') {
  return proxyOpenAI(messages, env);
} else if (model === 'gemini-flash') {
  return proxyGemini(messages, env);
} else if (model === 'claude') {
  return proxyClaude(messages, env);
} else if (model === 'gemini-flash-lite') {
  return proxyGeminiFlashLite(messages, env);
} else if (model === 'gemini-2-5-flash-lite') {
  return proxyGemini25FlashLite(messages, env);
} else {
  return new Response(JSON.stringify({ error: 'Unknown model' }), 
  { status: 400, headers: { 'Content-Type': 'application/json' } });
}
函数文件中以onRequest 作为统一入口，它能识别请求中的 model 和 messages 参数，其中 model 用于标识所调用的 AI 模型，messages 则为对话消息的数据。WEB端通过/api/ai访问边缘函数接口服务。如果需要支持更多的AI 对话模型，开发者需自行添加分支逻辑。
现在API Key仍然需要在functions/api/ai/index.js文件内明文配置。用户需要使用另一种全局变量注入的方式来配置API Key。在本地创建.env文件并配置如下内容：
DEEPSEEK_API_KEY=YOUR_API_KEY
OPENAI_API_KEY=YOUR_API_KEY
GEMINI_API_KEY=YOUR_API_KEY
CLAUDE_API_KEY=YOUR_API_KEY
边缘函数functions/api/ai/index.js内通过全局变量读取API Key的代码示例如下：
const apiKey = env.DEEPSEEK_API_KEY;
  if (!apiKey) {
    return new Response(JSON.stringify({ error: 'DEEPSEEK_API_KEY not set in environment' }), 
    { status: 500, headers: { 'Content-Type': 'application/json' } });
}
通过env.DEEPSEEK_API_KEY来实现API Key的注入，规避了API Key的泄漏。
接下来是对函数接口进行验证，Edgeone支持在本地直接访问的方式，用户在模版目录下以下即可。
npm install -g edgeone
edgeone pages init
edgeone pages link
edgeone pages dev
命令执行后，接口会在本地 8088 端口启动，您可以通过该端口进行本地测试，验证各大模型接口是否正常工作。
可以通过下面的命令在终端进行测试：
curl 'http://localhost:8088/api/ai' 
    -H 'Content-Type: application/json' 
    --data-raw '{"model":"deepseek-chat","messages":[{"role":"user","content":"Hello"}]}'
如果 API Key 配置正确，在执行上述命令后，可以看到，接口返回流式吐出模式内容。

3、静态站点对接 AI 接口

模版的也提供了默认的UI界面，并且也会依赖全局变量的注入，根据全局变量配置AI模型列表。实现方式是通过请求functions/api/models/index.js的边缘函数接口来获取模型列表配置。根据全局变量返回模型列表的核心代码如下：
if (env.DEEPSEEK_API_KEY) {
    models.push(
      { value: "deepseek-chat", label: "DeepSeek-V3"},
      { value: "deepseek-reasoner", label: "DeepSeek-R1"}
    );
}
关于模版的UI样式部分，可以自行通过命令启动查看，如果有定制化的需求也可以对模版的UI代码进行自定义改动。要进行本地UI预览，可以直接通过 npm run dev 的命令行进行启动。启动后可以访问本地页面http://localhost:3000/查看WEB页面的UI。如下图：

此时，AI 对话模型的主要集成就已经实现了，后续只需要将项目提交到github，再通过Edgeone控制台进行部署即可。

部署到EdgeOne Pages

1、代码发布到 Git

无论是 AI 对话还是AI 文本生成图片，Edgeone Pages的部署流程都是一样的，第一步，需要将本地的代码发布到github，这里可以通过git登录后github直接提交。

2、项目导入 Pages

提交完成后，如果你已经是EdgeOne Pages用户且已关联GitHub账户，访问 控制台 部署提交的项目即可。在准备部署界面，需要配置各个AI模型对应的API Key。点击"Environment Variables"，开始配置API Key。配置API Key和本地开发时配置.env文件的全局变量是一样的。在控制台配置环境变量后，在部署项目时，一样会在云端环境下注入变量。配置界面如下：


3、发布到Pages

配置完成后，点击"Start Deployment"按钮，等待部署完成后将显示部署成功界面。至此，我们已经完成了整个方案的完整部署流程。

更多相关内容