边缘开发者平台
  • Pages
    • 产品简介
    • 快速开始
      • 导入 Git 仓库
      • 从模板开始
      • 直接上传
    • 框架指南
    • 项目指南
      • 项目管理
      • edgeone.json
      • 缓存配置
      • 错误码
    • 构建指南
    • 部署指南
      • 概览
      • 触发部署
      • 管理部署
      • 部署按钮
      • 使用 Github Action
      • 使用 CNB 插件
      • 使用 IDE 插件
      • 使用 CodeBuddy 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应用
      • 使用 Deepseek-R1 模型快速搭建对话型AI站点
      • 使用 WordPress + WooCommerce 和 GatsbyJS 搭建电商平台
      • 使用 Supabase 和 Stripe 搭建 SaaS 站点
      • 如何快速搭建公司品牌站点
      • 如何快速搭建博客站点
    • 迁移指南
      • 从 Vercel 迁移至 EdgeOne Pages
      • 从 Cloudflare Pages 迁移至 EdgeOne Pages
      • 从 Netlify 迁移至 EdgeOne Pages
    • 排障指南
    • 常见问题
    • 联系我们
    • 产品动态
当前为国际站中文文档，如需访问中国站文档，请点击这里
文档概览/
边缘开发者平台/
Pages/
最佳实践/
使用通用大模型快速搭建AI应用/

使用通用大模型快速搭建AI应用

本文主要讲述如何快速搭建 AI 功能网站，包括聊天机器人和 AI 图片生成等主流应用场景，介绍基于开源模板和 EdgeOne Pages 平台的高效部署方法。

背景介绍

近年来，生成式 AI 技术在文本理解、内容生成和图像创作等领域取得了显著进步，推动了内容生产方式的智能化升级。这些技术不仅提升了个人和企业的创新能力，也极大地降低了智能应用的开发门槛。
依托于这些技术进步，EdgeOne 将边缘计算和静态站点技术与 AI 模板相结合，让用户能够以极低门槛、低成本地搭建属于自己的 AI 网站，实现各类智能应用的上线。同时，使用 EdgeOne AI 模板还具备以下优势：
自动化构建与全球加速，让网站访问速度更快、体验更好。
环境变量配置便捷，支持多平台 API Key 灵活管理。
主流 AI 模型支持，可按需集成文本和图像生成能力。

应用场景

AI 聊天机器人应用场景

AI 聊天机器人技术广泛应用于智能交互和文本内容生产等领域，能够为网站客服、知识检索、自动回复等场景提供高效的智能问答服务，同时在内容创作、辅助写作、教育学习、企业自动化办公等方面也展现出极大的应用价值，帮助用户自动生成文章、摘要、报告、会议纪要等文本内容，提升工作和学习效率。

AI 生成图片应用场景

AI 生成图片技术主要服务于视觉内容创作和个性化设计，用户可以通过文本描述快速生成插画、海报、头像、产品图等视觉内容，广泛应用于创意设计、电商展示、娱乐社交、教育科普等场景，不仅降低了设计门槛，也极大丰富了视觉表达的多样性和效率。


搭建示例：AI 对话

EdgeOne 针对主流的 AI 模型（如 OpenAI、DeepSeek 等）提供了可直接使用的 AI 对话 项目模板，用户可以快速搭建支持多模型对话的智能应用。
以下是具体的搭建步骤：

1、下载代码

你可以直接在命令行中执行以下命令，将项目代码克隆到本地：
git clone https://github.com/tomcomtang/ai-chatbot-starter.git
也可以访问项目页面点击“Fork”将仓库复制到自己的 GitHub 账号，便于后续云端部署和自定义开发。

2、配置 API Key

EdgeOne 的 AI 模板支持 DeepSeek、ChatGPT（OpenAI）、Claude、Gemini 等主流大模型。下方将以DeepSeek为示例的API Key获取页面。
注册 OpenAI 后，API Key 的获取页面如下：

其它常见的API Key获取地址以及对应的文档可以参考以下地址：
DeepSeekp的API Key获取地址：https://platform.deepseek.com/api_keys，文档参考：https://api-docs.deepseek.com/
Gemini的API Key获取地址：https://aistudio.google.com/app/apikey，文档参考：https://ai.google.dev/gemini-api/docs

Edgeone 的模版支持OpenAI、DeepSeek、Claude、Gemini等多模型自动识别，用户配置了几个 API Key，前端就会自动列出对应的 AI 模型，但至少需要配置一个可用的 API Key。
你可以在本地项目的 .env 文件下配置各个 API Key，这样可以在本地开发环境中提前预览页面是否符合预期。示例配置如下：
DEEPSEEK_API_KEY=YOUR_DS_API_KEY
OPENAI_API_KEY=YOUR_OPENAI_API_KEY
GEMINI_API_KEY=YOUR_GEMINI_API_KEY
CLAUDE_API_KEY=YOUR_CLAUDE_API_KEY
配置好 API Key 后，在命令行中执行 npm run dev，然后在浏览器访问 http://localhost:3000，即可本地预览你的 AI 聊天机器人页面UI效果。如下图：


3、部署到 EdgeOne

首先将本地项目上传到你的 GitHub 仓库。可以在命令行中依次执行以下命令：
git add .
git commit -m "Initial commit"
git push origin main
上传完项目后进入控制台，点击选择你刚刚上传的项目(如下图)。

点击项目后，需要在控制台配置对应的环境变量，也就是前面提到的各 AI 模型的 API Key（如下图）。

配置完毕后，点击"start deployment"开始进行部署。部署完成后会出现以下部署成功页面。

点击上图中的访问地址即可进入 AI 聊天机器人页面。

AI 文本生成图片搭建示例

EdgeOne 提供了可直接使用的 AI 图片生成项目模板，支持 HuggingFace、OpenAI、Replicate 等主流图片生成模型，用户可以快速搭建多模型图片生成应用。
以下是具体的搭建步骤：

1、下载代码

你可以在命令行中执行以下命令，将项目代码克隆到本地：
git clone https://github.com/q153877011/image-generator-starter.git
也可以访问项目页面点击“Fork”将仓库复制到自己的 GitHub 账号，便于后续云端部署和自定义开发。

2、配置 API Key

EdgeOne 的 AI 图片生成模板支持 HuggingFace、OpenAI、Replicate 等主流模型，用户可根据实际需求注册并获取相应平台的 API Key。下图所示为Huggingface注册API Key页面示例：

其它常见的 AI 图片生成模型的API Key获取地址以及对应的文档可以参考以下地址：
OpenAI的API Key获取地址：https://platform.openai.com/api-keys，文档参考：https://platform.openai.com/docs/overview
Replicate的API Key获取地址：https://replicate.com/account/api-tokens，文档参考：https://replicate.com/docs

EdgeOne AI 图片模板支持自动模型解锁机制，系统会根据您配置的 API Key 数量相应解锁内置图片生成模型。请注意，此功能运行至少需要配置一个有效的 API Key 才能正常使用。
当下载了模版项目以后，可以通过在本地项目的 .env 文件下配置各个 API Key，示例：
HUGGINGFACE_API_KEY=YOUR_HF_API_KEY
OPENAI_API_KEY=YOUR_OPENAI_API_KEY
REPLICATE_API_KEY=YOUR_REPLICATE_API_KEY

配置好 API Key 后，在命令行中执行 npm run dev，然后在浏览器访问 http://localhost:3000，即可本地预览UI页面效果。如下图：


3、部署到 EdgeOne

上传本地项目到你的 GitHub 仓库：
git add .
git commit -m "Initial commit"
git push origin main
进入 EdgeOne Pages 控制台，点击选择你刚刚上传的项目（如下图）。

点击项目后，在控制台配置对应的环境变量（如上文 API Key），如下图：

配置完毕后，点击“start deployment”开始进行部署。

部署完成后，点击访问地址即可进入 AI 图片生成页面。