Skip to main content

AgentDesigner Component

The AgentDesigner is a world-class, composable React component for creating, editing, and managing Agents in the ValkyrAI platform.

What is an Agent?​

An Agent is a programmable entity that combines:

  • An Application (with an OpenAPI Spec)
  • A set of named Workflows (tied to the Application's API)
  • A custom Role (with dynamic ACL/permissions)
  • A CRON schedule (for scheduled execution)
  • Event triggers (for event-driven or websocket-driven actions)
  • A heartbeat flag (for persistent, always-on agents)

Agents can be scheduled, event-driven, or both, and act under custom roles for fine-grained access control.

Features​

  • Create/Edit/Delete Agents with full CRUD support
  • Select Application and edit its OpenAPI Spec inline
  • Compose Workflows visually with the WorkflowBuilderReactFlow
  • Assign Roles and manage permissions dynamically with PermissionDialog
  • Edit CRON Schedules for agent automation
  • Configure Event Triggers (e.g., onClick, onWebSocket)
  • Enable Heartbeat for persistent agents
  • Comprehensive error handling and user feedback

Usage​

import AgentDesigner from "@valkyr/components/AgentDesigner/AgentDesigner";

function MyPage() {
  return <AgentDesigner />;
}

Props​

This component is self-contained and does not require props. It uses RTK Query services and existing ThorAPI models.

UI Composition​

  • Application selection: Dropdown, with inline OpenAPI Spec editing
  • Workflows: Visual builder (drag-and-drop, connect tasks/modules)
  • Role assignment: Dropdown, with dynamic permission editing
  • CRON schedule: Inline editor
  • Event triggers: Comma-separated input
  • Heartbeat: Toggle switch

Example​

TODO: AgentDesigner Screenshot

Testing​

  • Unit and integration tests are required for all business logic and API flows.
  • E2E tests should cover critical user flows (agent creation, editing, deletion).
  • See Testing Guidelines for details.

Changelog​

  • 2025-09-05: Initial world-class AgentDesigner implementation

Note: Always test new features in a staging environment before deploying to production.