Using General Large Model to Quickly Build AI Application
This article introduces how to quickly build AI conversation and AI image generation applications using EdgeOne Pages. The content includes the complete process from API Key application, template selection, one-click deployment to local debugging, and allows native API calls (high flexibility, suitable for advanced customization) and AI SDK encapsulated invocation (simple to develop, suitable for quick integration) as two technology paths.
Prerequisite Preparation
To implement an AI application, first sign up 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 the appropriate AI model service. The following is the API Key obtain address for each main AI provider:
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 image generation functionality. As follows:
The template projects listed in Quick Start all support one-click deployment. Only need to enter the details page of the corresponding template, click the blue "Deploy" button on the left side, and you can enter the Edgeone Pages console to quickly Deploy. Taking 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 will display different configuration lists based on their supported models. Here, you just need to configure 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, visit the preview address.
The process for one-click deployment is the same across different templates, but the environment variable list in the template configuration may vary.
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 to your local machine using the command. Example diagram below:
After downloading the project code locally, you need to configure environment variables to run the project. EdgeOne Pages provides scaffolding tools Edgeone CLI. With the CLI, you can generate configuration and perform local debugging in the project. Before using EdgeOne CLI, you need to install it 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 command 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 deployment, that is, the project name of the previously deployed template project. Once entered, the environment variables from the EdgeOne Pages console will be synchronized locally. This is done by creating an `.env` file to store 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, upon successful local startup, the project interface at localhost:8088 is as follows:
Next, perform custom development and debug the effect locally. This can be modified based on personal business requirements.
After modifying the project, if you need to publish the local changes to the online environment of EdgeOne Pages, only need to use the following command to update the code to Github. As follows:
gitadd.
git commit -m " ...write something..."
git push origin main
EdgeOne Pages automatically listens for updates to the associated Github project and updates 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 commit on Github and automatically started deploying the latest content. When the "Deploying" status finishes, a deployment successful prompt will appear, as shown below:
At this point, you can access the public network address of the project to verify whether the local changes are active.
