How AgentHub Manages and Deploys Digital Assistant Templates in CubeSandbox

AgentHub manages digital assistant templates through REST endpoints exposed in 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 and consumed by dialogs defined in web/src/pages/AgentHub.tsx.

API Endpoints for Template Operations

The templateApi and agentHubApi objects in 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 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:

// 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:

// 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 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. The templateApi object provides typed access to template data:

// 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:

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

Component-Level Integration

The 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.
• Template management supports listing, renaming, recommending, and deleting via TemplateListDialog integrated in 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). This executes a GET /templates request via the api<T>() wrapper in 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, which contains the TemplateListDialog implementation (lines 404-482) for managing templates and imports CreateAgentDialog from web/src/components/agents/CreateAgentDialog.tsx for template selection during agent creation.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}