Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Configuring Cache
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
      • Use Github Actions
      • Using CNB Plugin
      • Using IDE Plug-In
      • Using CodeBuddy IDE
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • AI
        • Dialogue Large Models Integration
        • Large Models for Images Integration
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • Shopify Integration
        • WooCommerce Integration
      • Payment
        • Stripe Integration
        • Integrating Paddle
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
      • Authentication
        • Supabase Integration
        • Clerk Integration
    • Best Practices
      • Using General Large Model to Quickly Build AI Application
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
      • How to Quickly Build a Blog Site
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Docs Overview/
Edge Developer Platform/
Pages/
Best Practices/
Using General Large Model to Quickly Build AI Application/

Using General Large Model to Quickly Build AI Application

This document mainly describes how to quickly build a website with AI features, including mainstream scenarios such as chatbots and image generation, and introduces efficient deployment methods based on open source Templates and the EdgeOne Pages platform.

Overview

In recent years, generative AI technology has made distinct advancements in text understanding, content generation, image creation and other fields, promoting the intelligent upgrade of content production. These technologies not only enhance the innovation capability of individuals and businesses but also significantly reduce the development threshold of intelligent applications.
Relying on these technological advancements, EdgeOne combines edge computing and static site technology with AI Templates, enabling users to build their own AI websites with minimal effort and low cost, and launch various intelligent applications. Meanwhile, using EdgeOne AI Templates offers the following strengths:
Automated Build and global acceleration deliver faster website access speed and better experience.
Environment variable configuration is convenient, supporting flexible management of multiple platform API Keys.
Mainstream AI model support, with on-demand integration of text and image generation capability.

Use Cases

AI Chatbot Use Cases

AI chatbot technology is widely used in intelligent interaction and text content production, providing efficient Q&A services for scenarios like website customer service, knowledge retrieval, and automatic reply. It also demonstrates significant application value in content creation, assist writing, education and learning, and business office automation, helping users automatically generate text content such as articles, abstracts, reports, and meeting minutes to enhance work and learning efficiency.

AI Image Generation Use Cases

AI image generation technology mainly serves visual content creation and personalized design. Users can quickly generate visual content like illustrations, posters, avatars, and product images through text descriptions. It is widely used in creative design, e-commerce display, entertainment, social media, education, and popular science, reducing design barriers while greatly enhancing the variety and efficiency of visual expression.


Building an Example: AI Conversation

EdgeOne provides ready-to-use AI conversation project templates targeting mainstream AI models such as OpenAI and DeepSeek. Users can quickly build intelligent applications that support multi-model dialogue.
The following is the specific procedure:

1. Download Code

You can directly run the following command in the command line to clone the project code to local:
git clone https://github.com/tomcomtang/ai-chatbot-starter.git
You can also access the project page, click "Fork" to copy the repository to your own GitHub account, making it easy for follow-up cloud deployment and custom development.

2. Configuring API Key

EdgeOne's AI Template supports mainstream large models such as DeepSeek, ChatGPT (OpenAI), Claude, and Gemini. Below is the API Key retrieval page using DeepSeek as an example.
After registering for OpenAI, the API Key retrieval page is as follows:

For other commonly used API Key host addresses and corresponding documentation, see the following address:
deepseek API Key host address: https://platform.deepseek.com/API_keys, documentation: https://API-docs.deepseek.com/

Edgeone's template supports auto-identification of multiple models like OpenAI, DeepSeek, Claude, and Gemini. The frontend will automatically list the corresponding AI models based on user-configured API Keys, but at least one available API Key needs to be configured.
You can configure each API Key in the .env file of your local project. This way, you can preview the page in your local development environment in advance to check whether it meets expectations. Example configuration as follows:
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
After configuring the API Key, run npm run dev in the command line, then access http://localhost:3000 in the browser to preview your AI chatbot webpage UI locally. As shown in the figure below:


3. Deploy to EdgeOne

First, upload your local project to your GitHub repository. You can execute the following commands in sequence in the command line:
git add .
git commit -m "Initial commit"
git push origin main
After uploading the project, enter the Console and click to select the project you just uploaded (as shown in the figure below).

After clicking the project, configure the corresponding environment variables in the console, that is, the API Keys for the AI models mentioned previously (as shown in the figure below).

After configuration is complete, click "start deployment" to begin deployment. After deployment, the following deployment successful page will appear.

Click the Access Address in the figure above to enter the AI chatbot webpage.

AI Text-To-Image Generation Setup Example

EdgeOne provides ready-to-use AI image generation project templates, supporting mainstream image generation models such as HuggingFace, OpenAI, and Replicate. Users can quickly build multi-model image generation applications.
The following is the specific procedure:

1. Download Code

You can run the following command in the command line to clone the project code to local:
git clone https://github.com/q153877011/image-generator-starter.git
You can also access the project page, click "Fork" to copy the repository to your own GitHub account, making it easy for follow-up cloud deployment and custom development.

2. Configuring API Key

EdgeOne's AI image generation templates support mainstream models such as HuggingFace, OpenAI, and Replicate. Users can register and obtain the API Key of the corresponding platform based on actual needs. The HuggingFace API Key registration webpage is shown below:

For other commonly used AI generative model API Key host addresses and corresponding documentation, see the following address:
Replicate API Key retrieval address: https://replicate.com/account/api-tokens, documentation: https://replicate.com/docs

EdgeOne AI image template supports an automated model unlock mechanism. The system will unlock built-in image generation models accordingly based on the Number of Keys in your configuration. Please note, this feature requires at least one effective API Key to be configured for proper usage.
After downloading the template project, you can configure each API Key in the .env file of your local project, for example:
HUGGINGFACE_API_KEY=YOUR_HF_API_KEY
OPENAI_API_KEY=YOUR_OPENAI_API_KEY
REPLICATE_API_KEY=YOUR_REPLICATE_API_KEY

After configuring the API Key, run npm run dev in the command line, then access http://localhost:3000 in the browser to preview the UI page locally. As shown in the figure below:


3. Deploy to EdgeOne

Upload your local project to your GitHub repository:
git add .
git commit -m "Initial commit"
git push origin main
Enter the EdgeOne Pages console and click to select the project you just uploaded (as shown in the figure below).

After clicking the project, configure the corresponding environment variables in the console (the previous API Key), as shown in the figure below:

After configuration is complete, click "start deployment" to begin deployment.

After deployment, click the Access Address to enter the AI image generation webpage.