# Developing and Deploying Sites with AI Agents

AstraFlow Site Space combines UCloud Sandbox with AI Agents. You can describe your requirements directly in natural language and let Agents such as Codex, Claude Code, or OpenCode generate code, install dependencies, start services, and complete deployment in a cloud-hosted site.

Suitable scenarios include:

- Dashboards, data walls, and operations boards
- Landing pages, tool pages, and other web sites
- Panels for model usage, request logs, or billing data based on the AstraFlow management API
- Lightweight interactive games such as Snake

> The site ID on this page uses `site_<sandbox-id>` as a placeholder. The site ID is also a restricted credential that grants access to that site only. Do not put the real value into code repositories, screenshots, or public content.

## Prerequisites

Before you start, make sure the following are installed locally:

- Node.js and `npx`, used to install Agent skills
- An AI Agent that supports skills, such as Codex, Claude Code, or OpenCode

## Step 1: Create a Site

Log in to the AstraFlow platform, go to the site management page, and click **Create Site**. Fill in the site information as prompted on the page and complete the creation.

![Creating a site on the AstraFlow platform](https://cdnv2-cache.udelivrs.com/2026/08/601a001a862ac1dd36d5afa64739f839_1786071173960.png)

## Step 2: Get the Remote Development Instructions

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

![Selecting Remote Development in the site list](https://cdnv2-cache.udelivrs.com/2026/08/2e06566213fbf48e9fffee2ac4cb8c81_1786071173974.png)

The page shows the connection method and the site ID of the current site. You will need to provide this site ID to your local AI Agent later.

![Viewing the instructions for connecting an AI Agent to the site](https://cdnv2-cache.udelivrs.com/2026/08/deb523e1eede408e2d6a8eeeff8d8277_1786071173972.png)

## Step 3: Prepare a Local Development Directory

Create a dedicated development directory on your machine and enter it:

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

> Replace `/path/to/site-dev` with the directory you actually use. We recommend a separate directory for each site, so that the Agent does not accidentally read or modify other projects.

## Step 4: Install the Agent Skills

Run the following in the development directory:

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

This command installs two skills:

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

## Step 5: Have the AI Agent Connect to the Site

Start the Agent you use in the current directory. For example, to start Codex:

```bash
codex
```

Enter the following prompt in the Agent, replacing the placeholder with the site ID shown on the **Remote Development** page:

```text
Connect to AstraFlow site site_<sandbox-id>
```

The Agent follows the skill instructions to perform the CLI check, site identity verification, and connection test. Once the Agent confirms that the connection succeeded, you can go on to describe your site requirements.

## Step 6: Describe Your Site Requirements

After connecting successfully, you can state your requirements directly in natural language. For example:

```text
Help me build a Snake game.
```

You can state the page purpose, target users, expected style, data sources, and main interactions all at once in the first prompt, so that the Agent can complete the development more accurately.

The Agent handles code generation, dependency installation, building, service startup, and access verification. Normally you do not need to perform these steps manually. If the Agent asks you to confirm overwriting files, deleting content, or other high-risk operations, confirm the scope of impact before authorizing it.

## Building Data Panels with the AstraFlow Management API

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

### 1. Get a UCloud API Key

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

> These are the UCloud account-level `PublicKey`/`PrivateKey`, used for signature authentication of the AstraFlow management API. They are neither the site ID nor the Bearer API Key used when invoking large models.

### 2. Configure Site Environment Variables

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

| Variable | Value |
| --- | --- |
| `UCLOUD_PUBLIC_KEY` | UCloud API public key |
| `UCLOUD_PRIVATE_KEY` | UCloud API private key |

![Configuring the UCloud API public and private keys for a site](https://cdnv2-cache.udelivrs.com/2026/08/d3d661d12976a26b54bfa58ae38d02d1_1786071173969.png)

> `UCLOUD_PRIVATE_KEY` is a highly sensitive credential. Inject it only through site environment variables; never write it into prompts, front-end code, code repositories, or logs. Front-end pages should not hold or use the private key directly. The site back end should read the environment variables, compute the signature, and call the API.

The AstraFlow management API usually also requires the business region `Region` and the project ID `ProjectId`. You can tell the Agent the actual values in your prompt, or configure them separately as site environment variables. If you are not sure which values to use, you can have the Agent query the list of available regions and projects first. Sub-accounts must provide `ProjectId`.

### 3. Connect to the Site and the AstraFlow API

When you open the Agent again, you can use the following prompt:

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

After connecting, you can state your data panel requirements. For example:

```text
Please call the AstraFlow management API and build a panel page that shows today's model spending, including model name, request count, and spending trend. Use the log or billing fields actually returned by the API, and provide friendly messages for empty data and failed calls.
```

## Accessing the Deployed Site

After the Agent completes deployment, it verifies the service inside the site and returns the actual access address. Open that address in your browser to access the page.

After a successful deployment, the site status in the AstraFlow console changes to **Online**, and you can also open the site address directly from the console.

![Site status showing Online](https://cdnv2-cache.udelivrs.com/2026/08/2e06566213fbf48e9fffee2ac4cb8c81_1786071173974.png)

> If the Agent returns an address but the page does not open, have the Agent continue checking the service process, port 80, the listening address, and the service logs, and confirm that deployment is complete only after the site is successfully accessed from within the site.