Chat Starter

A working AI chat app, free and deployable in a click. The app sidebar, a pill composer with model chip and stop control, a thinking indicator, streamed replies with copy and read-aloud actions, and a chat history rail that lives in the visitor's browser. Behind it, one route reads your provider key server-side and streams answers with the Vercel AI SDK. Everything installs as source, so it is yours to change.

New chat

Add a model provider to start

The chat interface is ready. This preview uses local replies; live answers need your application’s model provider.

Configure a model provider in your application’s server environment.
Keep credentials on the server and authorize every request.
Deploy your application with that provider configuration.

No provider key is requested or stored by this website.

This embedded example keeps chat text in memory only.

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="chat-starter" embedded/>;}

Deploy to Vercel

The Helios preview uses local replies. For a server-backed reference, the public BoardUI starter can be deployed to your own project, or you can connect your own service through the exported chat callbacks. Provider keys stay on your server.

Deploy public starter View on GitHub

The linked starter is an external reference. No deployment or provider request runs in this local preview.

Bring your own key

The public starter accepts AI_API_KEY on its server and detects supported providers from the key format. The Helios React exports use your application callback.

sk-ant-…Anthropic
sk-or-…OpenRouter
sk-…OpenAI
AIza…Google Gemini
vck_…Vercel AI Gateway
gsk_…Groq
xai-…xAI

Configure credentials, model choice, request limits, and authentication in your server. The local showcase does not read provider keys or enable a provider.

Run it locally

Install dependencies and run this local showcase. Its preview uses local replies; connect your own server through the exported chat callbacks for provider responses.

usage

npm install
npm run dev

What's included

The local preview includes the app sidebar, composer and loading treatment, thinking indicator, chat history, message actions, and the reusable React components they compose. Chat state can stay in memory or persist in the browser. Server routes, provider credentials, and production account services belong to your application; the public Helios UI starter linked above is a separate server-backed reference.

Advanced playground, API and recovery states ↗

Chat Starter

New chat

Add a model provider to start

The chat interface is ready. This preview uses local replies; live answers need your application’s model provider.

Configure a model provider in your application’s server environment.
Keep credentials on the server and authorize every request.
Deploy your application with that provider configuration.

No provider key is requested or stored by this website.

This embedded example keeps chat text in memory only.

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="chat-starter" embedded/>;}

Deploy to Vercel

Deploy public starter View on GitHub

The linked starter is an external reference. No deployment or provider request runs in this local preview.

Bring your own key

The public starter accepts AI_API_KEY on its server and detects supported providers from the key format. The Helios React exports use your application callback.

sk-ant-…Anthropic
sk-or-…OpenRouter
sk-…OpenAI
AIza…Google Gemini
vck_…Vercel AI Gateway
gsk_…Groq
xai-…xAI

Configure credentials, model choice, request limits, and authentication in your server. The local showcase does not read provider keys or enable a provider.

Run it locally

Install dependencies and run this local showcase. Its preview uses local replies; connect your own server through the exported chat callbacks for provider responses.

usage

npm install
npm run dev

What's included

Advanced playground, API and recovery states ↗

Chat Starter

New chat

Add a model provider to start

Sign in to the example

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

Deploy to Vercel

Bring your own key

Run it locally

What's included

Search Helios UI

Chat Starter

New chat

Add a model provider to start

Sign in to the example

Workspace notifications

Notifications 2 unread

Recent

Notification

Sign in example

Create an example agent

Cloud engineer

Installation

Deploy to Vercel

Bring your own key

Run it locally

What's included

Search Helios UI