AI Chat

A complete coding-agent chat screen, in the style of Cursor or Claude Code - an agent sidebar with quick actions and a repositories tree of recent chats, a chat thread with user/assistant turns and feedback actions, a pill composer with attach, model picker, mic and send, a status bar with branch, project, mode and context meter, and a fixed-width side panel switching between uncommitted changes with a live code view and a browser preview. The chat column flexes to fill wider breakpoints while the code panel keeps its fixed width.

helios coding projectcoding scenario

You

Update our color tokens for dark mode and add a reusable theme toggle.

0 / 5 · 0.0s

Reading project files
Reviewing the theme tokens
Updating the interface
Checking reusable components
Preparing the local preview

Playing a timed local simulation.

Thinking0.0s

Enter sends; Shift+Enter adds a line. Model, permission and workspace choices are local preferences. Attachment progress is a simulated local preparation queue.

12 example files+48 −12

app/components/button.tsxExample+16

1'use client';23import { useState, type FormEvent } from 'react';4import { Button, Input, Select } from '@helios-ui/react';5import '@helios-ui/react/styles.css';67/** A reusable local React form. No service connection is required. */8export default function Example() {9  const [project, setProject] = useState('Helios UI');10  const [variant, setVariant] = useState<'primary' | 'secondary'>('primary');11  const [updates, setUpdates] = useState<string[]>([]);1213  function saveProject(event: FormEvent<HTMLFormElement>) {14    event.preventDefault();15    if (!project.trim()) return;16    setUpdates(previous => [project.trim(), ...previous]);17  }1819  return (20    <main style={{ maxWidth: 720, padding: 24, margin: 'auto' }}>21      <header>22        <h1>Component playground</h1>23        <p>Build accessible interfaces with shared React components.</p>24      </header>2526      <section aria-labelledby="project-heading">27        <h2 id="project-heading">Your project</h2>28        <form onSubmit={saveProject}>29          <Input30            label="Project name"31            required32            value={project}33            onChange={event => setProject(event.target.value)}34          />35          <Select36            label="Button style"37            value={variant}38            options={[39              { value: 'primary', label: 'Primary' },40              { value: 'secondary', label: 'Secondary' },41            ]}42            onChange={event => setVariant(43              event.target.value === 'secondary' ? 'secondary' : 'primary'44            )}45          />46          <Button type="submit" variant={variant}>47            Save project48          </Button>49        </form>50      </section>5152      <section aria-label="Saved projects" aria-live="polite">53        <h2>Recent updates</h2>54        {updates.length ? (55          <ul>{updates.map((name, index) => <li key={index}>{name}</li>)}</ul>56        ) : (57          <p>No saved projects yet. Submit the form to create one.</p>58        )}59      </section>60    </main>61  );62}63

components/theme-toggle.tsxExample+16

1import { useState } from 'react';2import { Button } from '@helios-ui/react';34export function ThemeToggle() {5  const [dark, setDark] = useState(false);6  return <Button onClick={() => setDark(!dark)}>7    {dark ? 'Dark' : 'Light'}8  </Button>;9}

styles/tokens.cssExample+16

1:root {2  --surface: #ffffff;3  --text: #121212;4  --accent: #2b7fff;5}6[data-theme="dark"] {7  --surface: #262626;8  --text: #f7f7f7;9}

app/layout.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/input.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/button.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/dialog.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/select.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/tabs.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

components/checkbox.tsxReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

lib/utils.tsReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

index.tsReference+0

1export { Button, Input, Select, Dialog } from '@helios-ui/react';

Terminal preview

Read-only bundled output. No commands run and no local files are changed.

$ npm run build

Local interface example
Source files are displayed in the Changes panel.
Connect your own application harness to execute commands.

Installation

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

Download React package Installation guide

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

export default function Example(){return <BoardTemplate id="ai-chat" embedded/>;}

What's included

The template ships as a complete source package: the agent sidebar (quick search, New agent / Automations / Customize actions, the repositories tree with recent-chat rows, time chips and the curved tree connector, and the plan card with Upgrade button), the chat container (breadcrumb header, message thread with feedback actions and inline link chips, the composer with model picker, mic and send, and the status bar with the context ring), the changes/code side panel, and every base component they depend on.

Advanced playground, API and recovery states ↗

AI Chat

1'use client';23import { useState, type FormEvent } from 'react';4import { Button, Input, Select } from '@helios-ui/react';5import '@helios-ui/react/styles.css';67/** A reusable local React form. No service connection is required. */8export default function Example() {9 const [project, setProject] = useState('Helios UI');10 const [variant, setVariant] = useState<'primary' | 'secondary'>('primary');11 const [updates, setUpdates] = useState<string[]>([]);1213 function saveProject(event: FormEvent<HTMLFormElement>) {14 event.preventDefault();15 if (!project.trim()) return;16 setUpdates(previous => [project.trim(), ...previous]);17 }1819 return (20 <main style={{ maxWidth: 720, padding: 24, margin: 'auto' }}>21 <header>22 <h1>Component playground</h1>23 <p>Build accessible interfaces with shared React components.</p>24 </header>2526 <section aria-labelledby="project-heading">27 <h2 id="project-heading">Your project</h2>28 <form onSubmit={saveProject}>29 <Input30 label="Project name"31 required32 value={project}33 onChange={event => setProject(event.target.value)}34 />35 <Select36 label="Button style"37 value={variant}38 options={[39 { value: 'primary', label: 'Primary' },40 { value: 'secondary', label: 'Secondary' },41 ]}42 onChange={event => setVariant(43 event.target.value === 'secondary' ? 'secondary' : 'primary'44 )}45 />46 <Button type="submit" variant={variant}>47 Save project48 </Button>49 </form>50 </section>5152 <section aria-label="Saved projects" aria-live="polite">53 <h2>Recent updates</h2>54 {updates.length ? (55 <ul>{updates.map((name, index) => <li key={index}>{name}</li>)}</ul>56 ) : (57 <p>No saved projects yet. Submit the form to create one.</p>58 )}59 </section>60 </main>61 );62}63

1import { useState } from 'react';2import { Button } from '@helios-ui/react';34export function ThemeToggle() {5 const [dark, setDark] = useState(false);6 return <Button onClick={() => setDark(!dark)}>7 {dark ? 'Dark' : 'Light'}8 </Button>;9}

Installation

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

'use client'; import {BoardTemplate} from '@helios-ui/react'; import '@helios-ui/react/styles.css'; export default function Example(){return <BoardTemplate id="ai-chat" embedded/>;}

What's included

AI Chat

Terminal preview

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

What's included

Search Helios UI

AI Chat

Terminal preview

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

What's included

Search Helios UI

Agentic chat

Installation

What's included

Agentic chat

Installation

What's included