# Use AI Agent to develop and deploy sites

The Star Map site space combines UCloud Sandbox with AI Agent. You can directly describe your requirements in natural language, and let Agents such as Codex, Claude Code or OpenCode generate code, install dependencies, start services and complete deployment in the cloud site.

Suitable scenarios include:

- Dashboards, large data screens and operational dashboards
- Presentation pages, tool pages and other websites
- Model usage, request log or billing data panel based on Star Map Management API
- Snake and other lightweight interactive games

> Site IDs on this page use `site_<sandbox-id>` as a placeholder. The site ID is also a restricted credential that can only access that site. Do not write the real value to the repository, screenshots, or public content.

## Preparation

Before you begin, make sure your machine has:

- Node.js and `npx` for installing Agent skill
- An AI Agent that supports skills, such as Codex, Claude Code or OpenCode

## Step 1: Create a site

Log in to the Star Map platform, enter the site management page, and click Create Site. Fill in the site information according to the prompts on the page and complete the creation.

![Create a site on the Star Map platform](https://cdnv2-cache.udelivrs.com/2026/07/308fbd6a0e116a012c6b27bd5fe0da50_1784874571993.png)

## Step 2: Obtain remote development guidelines

After the site is successfully created, find the target site in the site list and click [Remote Development].

![Select remote development in the site list](https://cdnv2-cache.udelivrs.com/2026/07/989a34a3eb3421536f4fd20ca1519017_1784874699489.png)

The page will display the connection method and site ID of the current site. This site ID needs to be provided to the local AI Agent later.

![View instructions for AI Agent connection sites](https://cdnv2-cache.udelivrs.com/2026/07/f02ac5652d3b0bba9ad8473e5591338d_1784874767513.png)

## Step 3: Prepare local development directory

Create a new independent development directory on this machine and enter the directory:

```bash
mkdir -p /path/to/site-dev
cd /path/to/site-dev
```

> Please replace `/path/to/site-dev` with the directory you actually use. It is recommended to use a separate directory for each site to prevent the Agent from misreading or modifying other items.

## Step 4: Install Agent skill

Execute in the development directory:

```bash
npx skills add ucloud/ucloud-sandbox-cli -s astraflow-api -s ucloud-sandbox-site
```

This command will install two skills:

| Skill | Purpose |
| --- | --- |
| `ucloud-sandbox-site` | Connect the site space, manage files, generate code, start services and deploy the site |
| `astraflow-api` | Call the star chart management API to query data such as models, request logs, bills and orders |

## Step 5: Let AI Agent connect to the site

Start the Agent you are using in the current directory. For example, start Codex:

```bash
codex
```

Enter the following prompt words in Agent and replace the placeholder with the site ID displayed on the [Remote Development] page:

```text
Connect to the star map site site_<sandbox-id>
```

The Agent will complete CLI checking, site identity verification and connection testing according to the skill guidance. After the Agent confirms that the connection is successful, it can continue to describe the site requirements.

## Step 6: Describe your site needs

After the connection is successful, you can directly use natural language to make requests. For example:

```text
Help me develop a snake game.
```

The purpose of the page, target users, expected style, data sources and main interactions can be explained clearly in the first prompt at once, so that the Agent can complete development more accurately.

Agent will complete code generation, dependency installation, construction, service startup and access verification. Normally, you do not need to perform these steps manually; if the Agent requests confirmation to overwrite files, delete content, or perform other high-risk operations, confirm the scope of the impact before authorizing.

## Use the star chart management API to build a data panel

If the site needs to display data such as model usage, inference request logs, or bills under your account, you can ask the Agent to call the star chart management API through the `astraflow-api` skill.

### 1. Obtain UCloud API key

Go to [UCloud API Key Management](https://console.ucloud.cn/uapi/apikey) to create or view `PublicKey` and `PrivateKey`.

> What is used here is UCloud account level `PublicKey`/`PrivateKey`, which is used for signature authentication of the star map management API; they are not site IDs, nor are they Bearer API Keys used when calling large models.

### 2. Configure site environment variables

When creating or editing a site, add: in the environment variables area:

| variable name | value |
| --- | --- |
| `UCLOUD_PUBLIC_KEY` | UCloud API public key |
| `UCLOUD_PRIVATE_KEY` | UCloud API Private Key |

![Configure UCloud API public and private keys for the site](https://cdnv2-cache.udelivrs.com/2026/07/b39d1ced7c77a4a72fe1fa5f16f30ff4_1784875213941.png)

> `UCLOUD_PRIVATE_KEY` is a highly sensitive credential. Only inject it through site environment variables, do not write it into prompts, front-end code, code repositories, or logs. Front-end pages should not hold or use private keys directly; it is up to the site's backend to read environment variables, calculate signatures, and call APIs.

The star map management API also usually requires business region `Region` and project ID `ProjectId`. You can tell the Agent the actual values ​​in the prompt word, or configure them otherwise as site environment variables. If you are not sure which value should be used, you can let the Agent query the list of available regions and projects first; the sub-account must provide `ProjectId`.

### 3. Connect the site and star map API

When reopening the Agent, you can use the following prompt words:

```text
Connect to the star map site site_<sandbox-id>, and use the site environment variables UCLOUD_PUBLIC_KEY and UCLOUD_PRIVATE_KEY to connect to the star map management API. Do not export, log, or send keys to the front end.
```

Once connected, you can make data panel requests. For example:

```text
Please call the Star Chart Management API to develop a panel page to display today's model consumption, including model name, number of requests, and consumption trends. Please refer to the log or bill fields actually returned by the API, and provide friendly tips for empty data and call failures.
```

## Access the deployed site

After the Agent completes deployment, it will verify the service within the site and return the actual access address. Open this address in your browser to access the page.

After successful deployment, the site status in the Star Map console will change to [Online]. You can also open the site address directly from the console.

![Site status is online](https://cdnv2-cache.udelivrs.com/2026/07/cc97c35e0d71392b8f05241517d3311e_1784876037302.png)

> If the Agent returns the address but the page cannot be opened, please let the Agent continue to check the service process, port 80, listening address and service log, and confirm that the deployment is complete after successful access within the site.
