OpenCode Assistant

A lightweight, embeddable Web Component that connects directly to an OpenCode Server. Real-time streaming of model output, reasoning, and tool calls — in any page, with any framework.

Configuration

API

Attributes

AttributeTypeDefaultDescription
server-urlstringhttp://localhost:4096OpenCode Server base URL
agentstringplanAgent name to use
titlestringAssistantSidebar header title
themedeepseek | bankdeepseekBuilt-in visual theme. Omit for DeepSeek.
openbooleanfalseSidebar visibility
hide-togglebooleanfalseHide the built-in lower-right launcher button when using a custom trigger.
show-historybooleantrueShow session history panel

Methods

MethodDescription
.open()Open the sidebar
.close()Close the sidebar
.toggle()Toggle sidebar visibility
.sendPrompt(text)Send a prompt to the active session
.abortSession()Abort the current generation
.addPromptBlock(block)Inject a prompt block (text/capsule) into the input area
.removePromptBlock(i)Remove a prompt block by index
.clearPromptBlocks()Clear all prompt blocks
.createNewSession()Create a new session and switch to it

Events

EventDescription
opencode:connectedServer connection established
opencode:errorError occurred (detail: message, error)

Usage

Include the script and drop the element into any page. The component connects via SSE for real-time streaming of messages, reasoning steps, and tool calls.

<script src="opencode-assistant.iife.js"></script>
<opencode-assistant server-url="http://localhost:4096" agent="plan" title="Assistant"></opencode-assistant>

The input supports mixed Chinese/English composition: Enter sends, Shift+Enter inserts a newline, and composition confirmation is not sent.