Agent Creator

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import {SourceAgentPreview} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){return <SourceAgentPreview id="agent-creator"/>;}

Use it in your product

Keep a profile in application state by passing agent and onChange. Your application decides when to save it; the creator does not persist changes by itself. Place it in a parent with a defined height, such as a sidebar, drawer or dialog. Supply onClose to add the close control.

'use client';
import {useState} from 'react';
import {AgentCreator,defaultAgent} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[agent,setAgent]=useState(defaultAgent);return <AgentCreator agent={agent} onChange={setAgent}/>;}

Voice and preferences

Voice preview uses speech voices available on the current device. Alice is preferred when available, with a device voice as fallback. Language, notification and playback settings remain controlled profile values for your application. This preview neither requests notification permission nor connects an external voice service.

'use client';
import {useState} from 'react';
import {AgentCreator,defaultAgent} from '@helios-ui/react';
import '@helios-ui/react/styles.css';

export default function Example(){const[agent,setAgent]=useState(defaultAgent);return <AgentCreator agent={agent} onChange={setAgent}/>;}

Part of Multi-agent Chat

The Multi-agent Chat template uses this creator too. Choose the standalone block for an existing product, or explore the workspace with group chats, a local marketplace and animated agent avatars.