Skip to content

Chat starter

A suggestion fills the box and never sends, so you can add the period first.

Use it when

  • The chat panel is empty and people need to know what they can ask.
  • The right questions depend on the screen beside the panel: a run log asks about runs.

Don’t use it when

  • The person has started typing. Hide it while there’s a draft, because a pick replaces the text.
  • You want a greeting or a usage disclaimer. It has neither, on purpose.

Before and after

Ask about Kasane’s books, from the files it shared.

Suggested
Picking a question fills the box without sending it, so you can still edit it.

Install

pnpm dlx shadcn@latest add https://tabularui.com/r/chat-starter.json https://tabularui.com/r/app-shell.json https://tabularui.com/r/chat-composer.json https://tabularui.com/r/chat-thread.json

Usage

import { useRef, useState } from 'react';import { AppShellPanelFooter, AppShellPanelHeader } from '@/components/tabular-ui/components/product/AppShell';import { ChatComposer, type ChatComposerHandle } from '@/components/tabular-ui/components/product/ChatComposer';import { ChatStarter } from '@/components/tabular-ui/components/product/ChatStarter';import { ChatThread } from '@/components/tabular-ui/components/product/ChatThread'; const composer = useRef<ChatComposerHandle>(null);const [draft, setDraft] = useState(''); <AppShellPanelHeader title="Chat" /><ChatThread  turns={turns}  busy={streaming}  empty={    draft === '' ? (      <ChatStarter        description="Ask about your models, runs and figures, why a run or test failed, or a file you attach. Nothing here changes your data."        suggestions={['Why did dim_accounts fail its last run?', 'Which models read order_total?']}        onSelect={(text) => composer.current?.fill(text)}      />    ) : null  }/><AppShellPanelFooter>  <ChatComposer ref={composer} value={draft} onValueChange={setDraft} onSend={ask} busy={streaming} onStop={stop} /></AppShellPanelFooter>

Set up your app firstChat starter in Storybook