Using General Large Model to Quickly Build AI Application
This article introduces how to use EdgeOne Pages to quickly build AI conversation and AI image generation applications. The content covers the complete process from API Key application, template selection, one-click deployment to local debugging, and allows native API calls (high flexibility, suitable for deep customization) and AI SDK encapsulated invocation (simple development, suitable for quick integration) as two technical approaches.
Prerequisite Preparation
To implement an AI application, first register an account and obtain an API Key. The API Key serves as an identity credential for accessing AI services, similar to an account password, used for authentication and permitted to call appropriate AI model services. The following are the main providers' API Key access addresses:
Note: Not all API Keys require application, you only need to apply for the API Key of the model used.
Quick Start
Template Introduction
EdgeOne Pages offers multiple AI application templates, supporting two access methods: native API calls and SDK encapsulated invocation, including dialogue and generate features. As follows:
The template projects listed in Quick Start support one-click deployment. Only need to enter the corresponding details page of the template, click the blue "Deploy" button on the left side, and you can enter the Edgeone Pages console to perform quick deployment. Take the ai-sdk-chatbot-starter template as an example. After clicking Deploy, the following project settings page will appear.
Environment variable configuration essentially involves setting up the API Key. Different templates display different configuration lists based on their supported models. Here, you only need to enter the API Key corresponding to the model to be used. However, at least one valid API Key must be entered.
Configure the corresponding environment variable (API Key) on the project deployment page, then click "start deployment" to initiate deployment. Upon completion, access the preview address.
The one-click deployment process is the same for different templates, but the environment variable list in the template configuration may not be the same as others.
Local Debugging
Using the ai-sdk-chatbot-starter template as an example, after deploying the project to Edgeone Pages, a newly-added project (that is, the template project) will appear under the associated Github account. At this point, if you need to debug locally, you can clone the code from the Github account through the command. Example diagram below:
After downloading the project code locally, you need to configure environment variables locally to run the project. EdgeOne Pages provides the scaffolding tool Edgeone CLI. With the aid of CLI, you can generate configuration and perform local debugging in the project. Before using EdgeOne CLI, you need to install EdgeOne CLI first and complete login validation. For details, see the EdgeOne CLI document reference.
After login, associate the local project with the Edgeone Pages project by executing the following commands in the project root directory.
edgeone pages link
After executing `edgeone pages link`, you will be prompted to input the project name of the EdgeOne Pages project, that is, the project name of the template project deployed in the previous context. Once you input the project name, the environment variables from the Pages console in the previous project will be synchronized locally. This is done by creating an .env file locally to sync the variable content.
EdgeOne CLI also supports enabling DEV mode locally. The commands to enable DEV mode are as follows:
edgeone pages dev
After enabling DEV mode, you can access it at localhost:8088. Taking ai-sdk-chatbot-starter as an example, once started locally, the project interface at localhost:8088 is as follows:
Next, perform custom development and debug locally. This can be modified based on personal business requirements.
After modifying the project, if you need to publish local changes to the EdgeOne Pages online environment, only need to run the following command to update the code to Github. The following:
gitadd.
git commit -m " ...write something..."
git push origin main
EdgeOne Pages automatically listens for updates to the associated Github project and deploys the latest content to the online environment. Enter the EdgeOne Pages console and go to the project details page. If you see the "Deploying" status prompt, it means EdgeOne Pages has detected the latest Github commit and automatically started deploying the latest content. When finished, a "Deployment successful" prompt will appear, as shown in the figure below:
At this point, the public network address of the project can be accessed to verify whether the local changes have taken effect.
