Showcase / assistant-ui port

Base chat shell.

Source-first port of assistant-ui base.tsx: thread list, header, empty welcome + suggestion chips, composer chrome, scroll control, and branch picker. Host owns runtime; no Lexical/React.

base.tsxhost-chromeno remote assets

base / emptycentered composer

New Chat

How can I help you today?

Weather

Code

Write

Analyze

Brainstorm

base / messagesbranch + actions

Explaining React Hooks: useState and useEffect

Explain React hooks like useState and useEffect

React hooks let you use state and side effects in function components.

`useState`

useState stores local state and returns [value, setter].

Host-rendered error sample: the stream stopped before completion.

1 / 2

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="host-chrome.css">

base / quotecomposer preview

Keep styles local to explicit component parts.

Yes — consume semantic tokens rather than palette primitives.

Deferred from base.tsx (host adapters): Lexical mentions/slash commands, markdown/Shiki, dictation runtime, tool-group/reasoning primitives beyond thinking-steps + tool-call. Quote preview chrome is in the specimen above.