Showcase / assistant-ui port

ChatGPT skin.

Source-first port of assistant-ui chatgpt.tsx: empty “Where should we begin?”, pill composer (+ / Ask anything / mic|send), inverted user bubbles, icon action bar, edit composer, 128px attachments, branch picker, disclaimer. Wrap with au-skin-chatgpt. Host owns runtime.

chatgpt.tsxau-skin-chatgpthost-chrome

chatgpt / emptyAsk anything

ChatGPT

Where should we begin?

ChatGPT can make mistakes. Check important info.

chatgpt / messagesactions · attach · branch

Explaining React Hooks

Explain React hooks like useState and useEffect

1 / 2

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

`useState`

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

{ "ok": true, "hits": 3 }

1 / 2

ChatGPT can make mistakes. Check important info.

chatgpt / streamingstop square

chatgpt / dictatingstop dictation

chatgpt / dropzonedragging

chatgpt / errorhost alert

The stream stopped before completion.

Host-rendered error sample: retry from the last saved token.

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">

Deferred from chatgpt.tsx (host adapters): Markdown/Shiki, dictation/voice runtime. Chrome covers Dictate / voice mode / stop-dictation / Read aloud / hover-autohide actions. Apply skin with class="au-skin-chatgpt" on a shell wrapper.