Build a React chat UI for OpenCode coding agents with assistant-ui — streaming, tool calls, file edits, and terminal output rendered in chat.
@assistant-ui/react-opencode is a runtime adapter for OpenCode, an open-source AI coding agent. It wires the OpenCode server's session and event APIs into an assistant-ui thread, including tool permissions, interactive questions, and session state.
This adapter is at v0.0.3 and is experimental. The runtime API and exported hooks may change without notice.
When to use it
Pick the OpenCode runtime when:
- You are building a UI on top of an OpenCode agent server.
- You need first-class support for OpenCode's permission and question flows.
- You want session-aware features: fork, revert, unrevert, refresh.
If your backend is not OpenCode-based, see picking a runtime for alternatives.
Architecture
@assistant-ui/react-opencode is layered on ExternalStoreRuntime plus a RemoteThreadList for session-backed thread management (see architecture). OpenCode sessions map to assistant-ui threads; the runtime subscribes to a server-sent event stream and projects messages into the thread.
Requirements
- A running OpenCode server (defaults to
http://localhost:4096). - React 18 or 19.
Sub-agent conversations
OpenCode task tool calls expose their child session through tool metadata. The runtime loads those child sessions, keeps them synchronized from the same OpenCode event stream, and projects their transcripts into ToolCallMessagePart.messages. Parallel and recursively nested tasks are supported.
Loading is eager, not keyed to what a renderer displays. Once a thread is subscribed, every task part in its transcript fetches its child session, and each child does the same for its own nested tasks, so a long session with many task calls fetches every sub-agent transcript whether or not any of them is expanded. Each child session is fetched once and then kept current from the event stream, so re-subscribing a thread does not refetch it.
A task part carries messages only once its child session has loaded. While the child is still loading, the part projects as an ordinary tool call, so an empty messages array always means the sub-agent produced nothing rather than that its transcript is still in flight.
Use assistant-ui's MessagePartPrimitive.Messages inside a task tool renderer to display the child conversation. Nested conversations are read-only and inherit the parent thread's tool renderers.
Install
npm install @assistant-ui/react @assistant-ui/react-opencode @opencode-ai/sdk