# How AgentHub Manages and Deploys Digital Assistant Templates in CubeSandbox

> AgentHub simplifies digital assistant template management in CubeSandbox using REST endpoints for listing, updating, deleting, and instantiating. Explore template deployment with AgentHub.

- Repository: [Tencent Cloud/CubeSandbox](https://github.com/TencentCloud/CubeSandbox)
- Tags: how-to-guide
- Published: 2026-07-10

---

**AgentHub manages digital assistant templates through REST endpoints exposed in [`web/src/api/client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/api/client.ts), enabling users to list, update, delete, and instantiate templates via the `TemplateListDialog` and `CreateAgentDialog` components in the React frontend.**

The **AgentHub** UI serves as the central console in TencentCloud's CubeSandbox where users orchestrate digital assistants. Template management is a core capability that separates configuration presets from live agent instances, allowing teams to standardize deployments across environments. The implementation follows a clean separation between the React-based frontend and the backend API, with all template operations flowing through a typed client layer.

## Template Management Architecture

The template lifecycle is implemented across two primary layers: the API client that communicates with backend endpoints, and the React components that render the management interface. According to the CubeSandbox source code, all template operations are centralized in [`web/src/api/client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/api/client.ts) and consumed by dialogs defined in [`web/src/pages/AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/pages/AgentHub.tsx).

### API Endpoints for Template Operations

The `templateApi` and `agentHubApi` objects in [`client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/client.ts) expose methods that map to specific REST endpoints. **Listing templates** uses `GET /templates` via `templateApi.list()`, returning an array of `TemplateSummaryDto` objects. **Creating templates** sends `POST /templates` through `templateApi.create()`, though this is typically restricted to developers rather than end users. **Updating existing templates** targets `PATCH /templates/:id` through `agentHubApi.updateTemplate()`, which handles renaming and toggling the **recommended** flag. **Deletion** confirms removal via `DELETE /templates/:id` using `agentHubApi.deleteTemplate()`.

### UI Components for Template Interaction

The `TemplateListDialog` component (defined inline in [`AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/AgentHub.tsx) at lines 404-482) renders the template gallery and handles user actions. This dialog displays each template with contextual operations: **Rename**, **Recommend/Un-recommend**, **Copy ID**, **Use Template**, and **Delete**. Each action invokes the corresponding API method and triggers a list refresh to maintain state consistency.

## Deploying Assistants from Templates

Instantiating a new digital assistant from a template involves pre-selecting the template during the creation flow and passing its identifier to the backend provisioning service.

### Selecting Templates During Creation

When users click **"Create Assistant"**, the `CreateAgentDialog` component loads available templates by calling `agentHubApi.listTemplates()`. The dialog presents these in a dropdown field labeled "Assistant template". Upon submission, the component constructs a payload that includes the `templateId` if selected:

```typescript
// CreateAgentDialog.tsx – submit handler
const payload = {
  name: n,
  engine: 'openclaw',
  templateId: selectedTemplateId || undefined,
  persistenceMode: effectivePersistenceMode,
  // …
};
const created = await agentHubApi.create(payload);

```

The backend receives this `POST /agents` request and provisions the new assistant using the specified template's configuration. For UX smoothness, the frontend inserts a temporary placeholder agent (`pending:create:…`) immediately while awaiting the API response.

### Publishing Agents as Templates

The reverse workflow allows snapshots of existing agents to be promoted into reusable templates. In the `AgentCard` component, clicking **"Publish template"** triggers `handlePublishTemplate`, which calls:

```typescript
// AgentCard – publish handler
const result = await agentHubApi.publishTemplate(agent.id, {
  name: templateName || undefined,
  snapshotId: selectedSnapshotId || undefined,
});

```

This `POST /agents/:id/publishTemplate` endpoint stores the agent's current configuration as a new template, returning a `templateId` that can be shared or reused across the organization.

## Code Implementation Details

The data flow begins in [`AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/AgentHub.tsx) where the `AgentHubPage` component initializes the view. The `useEffect` hook (lines 63-76) fetches both the user's current agents and available templates on mount, ensuring the UI reflects the latest state.

### Client API Layer

All network requests flow through the `api<T>()` wrapper defined in [`client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/client.ts). The `templateApi` object provides typed access to template data:

```typescript
// client.ts – templateApi.list()
export const templateApi = {
  list: () =>
    api<TemplateSummaryDto[]>('/templates')
      .then(items => items.map(mapTemplateSummary)),
  // …
};

```

Individual template modifications use the `agentHubApi` namespace, which encapsulates endpoint logic and error handling:

```typescript
// TemplateListDialog – rename handler
await agentHubApi.updateTemplate(template.templateId, { name: nextName });

```

### Component-Level Integration

The [`AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/AgentHub.tsx) file orchestrates the entire template management experience. It manages state for the `TemplateListDialog` and `CreateAgentDialog`, passing API callbacks down as props. Error handling is performed locally within each component and surfaced to users via a centralized error dialog, ensuring that template operations fail gracefully without crashing the hub.

## Summary

- **AgentHub** in CubeSandbox provides a complete template lifecycle through REST endpoints defined in [`web/src/api/client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/api/client.ts).
- **Template management** supports listing, renaming, recommending, and deleting via `TemplateListDialog` integrated in [`AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/AgentHub.tsx).
- **Assistant creation** accepts an optional `templateId` in the `POST /agents` payload to provision from a template.
- **Publishing workflows** convert existing agent snapshots into reusable templates via `POST /agents/:id/publishTemplate`.
- **Implementation** cleanly separates the React UI layer from backend concerns, using a typed `api<T>()` wrapper for all HTTP communication.

## Frequently Asked Questions

### How does AgentHub fetch the list of available templates?

The `AgentHubPage` component calls `templateApi.list()` through the `refreshOnboarding` function during its initial `useEffect` cycle (lines 63-76 in [`AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/AgentHub.tsx)). This executes a `GET /templates` request via the `api<T>()` wrapper in [`client.ts`](https://github.com/TencentCloud/CubeSandbox/blob/main/client.ts) and maps the response to `TemplateSummaryDto` objects for display.

### What API endpoint is used to create an assistant from a template?

When a user selects a template in `CreateAgentDialog`, the frontend sends a `POST /agents` request with a payload containing the `templateId` field. The backend uses this identifier to provision the new assistant using the template's stored configuration, including resource limits and model settings.

### How can an existing agent be converted into a reusable template?

Users click the **"Publish template"** button in the `AgentCard` component, which invokes `agentHubApi.publishTemplate()`. This sends a `POST /agents/:id/publishTemplate` request with optional `name` and `snapshotId` parameters, creating a new template that clones the agent's current state.

### Where is the template management UI implemented in the CubeSandbox codebase?

The primary UI resides in [`web/src/pages/AgentHub.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/pages/AgentHub.tsx), which contains the `TemplateListDialog` implementation (lines 404-482) for managing templates and imports `CreateAgentDialog` from [`web/src/components/agents/CreateAgentDialog.tsx`](https://github.com/TencentCloud/CubeSandbox/blob/main/web/src/components/agents/CreateAgentDialog.tsx) for template selection during agent creation.