Use ESA Functions and Pages and MCP Server with large language models (LLMs) and AI programming tools to deploy your applications worldwide. In this demo, after a simple configuration, you can deploy a 2048 game globally in one minute.
Solution advantages
Solution overview
Create and deploy the 2048 game in a few steps:
Activate the ESA Functions and Pages service: Provides a runtime environment for the game using features from Functions and Pages, such as global deployment, ultra-low latency, automatic scaling, and a serverless architecture.
Configure the AI programming tool Cline: Cline establishes an efficient connection between your IDE and the LLM. A single-sentence command lets you intelligently generate and quickly debug code. It also lets you call ESA MCP Server to deploy the code to ESA points of presence (POPs).
Configure ESA MCP Server: MCP (Model Context Protocol) is a standardized protocol that establishes a bidirectional communication mechanism between LLMs and external systems. Using MCP, an LLM can obtain current context information, such as user identity and device status. It can also call platform APIs to perform remote operations, such as reading and writing data or controlling devices. This allows the LLM to respond more accurately to user commands and requirements.
ESA MCP Server is a standardized, open API service from ESA that supports integration with LLMs. Developers can use an LLM-driven approach to trigger operations, such as creating, updating, and publishing Functions and Pages through ESA MCP Server. This enables intelligent management of edge computing tasks.
Generate and deploy the code: After you complete the preceding steps, you can use a single sentence to instruct the LLM to automatically generate code. Then, you can deploy the code globally to POPs through ESA MCP Server.
Activate the Functions and Page
When you first activate the service, it defaults to a free trial. You can switch to the pay-as-you-go billing method as needed. For more information, see Billing overview.
Open the ESA console and go to the Functions and Pages page.
If you are a new user, click Activate Now on the page and follow the instructions.
Configure the AI programming tool Cline
Request an API key
The API key that you request in this step is used for authentication when Cline calls the Alibaba Cloud Model Studio LLM. You can start using the free quota for new users from Model Studio. After the free quota is used, you are charged according to the billing rules for LLM products.
Go to the My API-KEY page and click Create My API KEY.
In the Actions column for the API key that you created, click View to obtain the API KEY.
Install and configure Cline in VS Code
In the Visual Studio Code (VS Code) Extensions marketplace, search for Cline and follow the instructions to install it.
Open the Cline settings page and configure the LLM API information. The following four parameters are required. You can keep the default values for the other parameters.
API Provider:
Alibaba QwenAlibaba API Line:
International APIQwen API Key: The API key that you requested in the previous step
Model: Use
qwen-max-latest
Configure ESA MCP Server
Request an AccessKey pair for a RAM account
The AccessKey pair that you request in this step is used for authentication when ESA MCP Server calls Functions and Pages.
Go to the RAM console and create a new RAM user.
After the user is created, immediately save the AccessKey ID and AccessKey Secret. This information cannot be retrieved after you close the page.
Configure permissions for the RAM account
In accordance with the principle of least privilege for RAM users, this account is granted only the operation permissions for ESA.
Find the user that you created in the previous step and click Add Permissions.
On the Permissions tab, click Grant permission.
In the Select Policy section of the Grant Permission panel, select
AliyunESAFullAccess, and then click OK.
Configure ESA MCP Server in Cline
As shown in the following figure, open the
cline_mcp_settings.jsonfile in Cline.
Copy the following configuration code into the
cline_mcp_settings.jsonfile. Replace the values ofALIBABA_CLOUD_ACCESS_KEY_IDandALIBABA_CLOUD_ACCESS_KEY_SECRETwith the AccessKey ID and AccessKey Secret that you requested in the previous step. Then, use the keyboard shortcutCtrl+S(Windows/Linux) orCommand+S(macOS) to save the configuration.{ "mcpServers": { "esa-mcp-server": { "command": "npx", "args": ["-y", "mcp-server-esa"], "env": { "ALIBABA_CLOUD_ACCESS_KEY_ID": "your AccessKey ID", "ALIBABA_CLOUD_ACCESS_KEY_SECRET": "your AccessKey secret" } } } }
After you save the file, wait for 3 to 5 seconds. The
esa-mcp-serverservice appears in theInstalledlist ofMCP Serverin Cline and is displayed with a green enabled status, as shown in the following figure. This indicates that ESA MCP Server is configured successfully.
Generate and deploy the game code
After all configurations are complete, submit your request to Cline:
Write a 2048 game, deploy it on an Alibaba Cloud ESA routine, and display the default access URL.The LLM calls various tools provided by ESA MCP Server in response to your request. These tool calls perform operations such as function creation, code submission, and global deployment. Finally, the service returns a publicly accessible URL.
After the 2048 game is generated and deployed, you can access the game page using the domain name provided by ESA. The building and deployment take only a few minutes.
References
What is MCP?
MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP as the USB-C port for AI applications. Just as USB-C provides a standard way to connect your devices to various peripherals and accessories, MCP provides a standard way to connect AI models to different data sources and tools. There are currently three types of MCP:
STDIO
SSE
Streamable HTTP
The method used in this topic is STDIO, in which the server is deployed locally on the user's machine. Remote MCP servers that use SSE and Streamable HTTP will be released in the future.