ChatbotUI Plugin
The ChatbotUIPlugin provides the complete end-user chat interface for Octopus agents — from the embeddable widget to the full-page chat app. It handles streaming responses, tool call indicators, file upload, and quick reply actions.
What the Plugin Provides
Embeddable Chat Widget
A floating chat bubble deployable via a single <script> tag into any HTML page. Configure with data- attributes or the JavaScript API.
React Component
<ChatWidget agentId="..." /> for embedding directly into React applications with full prop-based configuration.
Full-Page Chat App
A complete chat application at /chat with multi-agent switching, conversation history sidebar, and settings panel.
SSE Streaming
Token-by-token streaming responses via Server-Sent Events. The widget updates the response in real time as the LLM generates each token.
Rich Chat Actions
Quick reply buttons, file upload, thumbs up/down feedback, suggested follow-up questions — all configurable per agent.
Embed Modes
| Mode | How to Use | Best For |
|---|---|---|
| Script tag (widget bubble) | <script src=".../octopus-widget.js" data-agent-id="..."> | Any web page — no framework required |
| React component | import { ChatWidget } from '@bizfirstai/octopus-react' | React applications with fine-grained control |
| Full-page route | Route users to /chat?agent=agentName | Dedicated assistant pages, customer support portals |
| iframe | <iframe src="/chat?agent=..." /> | Non-React applications needing isolation |
Plugin Registration
builder.Services.AddOctopus(config =>
{
config.AddPlugin<SqlServerPlugin>();
config.AddPlugin<ChatbotUIPlugin>(); // Required for the end-user chat interface
});Backend Services Registered
| Service | Purpose |
|---|---|
ISSEResponseWriter | Writes Server-Sent Events to the HTTP response stream for token-by-token streaming |
IChatUIRenderer | Renders rich cards, forms, and structured content to the chat widget |
IFileUploadService | Handles file upload from the chat widget — stores in blob storage, returns a reference |