Composer

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="composer"/>;}

Working state

Combine the thinking indicator, perimeter light and translucent control treatment while a reply is being prepared. A working state can drive the complete composition, then return the controls to their resting appearance when the turn finishes.

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

export default function Example(){return <SourceAgentPreview id="composer" example="working"/>;}

The parts

Compose the input pill, status bar, attachment controls and model picker separately when a full composer does not fit your layout. The exported menus retain their keyboard behavior and the provider catalog remains editable application data.

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

export default function Example(){const[value,setValue]=useState('openai/gpt-5.6-mini');return <ComposerModelPicker value={value} onChange={setValue}/>;}