Plugin-owned canvas
Render a focused interface instead of forcing every idea into a standard chat transcript.
GotChat Playground lets a plugin own a focused canvas while GotChat continues to provide the project, session, authentication, streaming chat, settings, message rendering, and plugin interoperability behind it.
What Playground is
Playground is a dedicated browser surface for GUI plugins. It is not a disconnected mockup. The plugin can replace the usual transcript view with an avatar, visual operator, voice interface, guided workspace, dashboard, or another purpose-built experience while remaining attached to the selected GotChat project and session.
Render a focused interface instead of forcing every idea into a standard chat transcript.
Use the active project, session, message history, authentication, and permissions.
Send through the session chat service and react to tokens, messages, completion, and workflow events.
Let voice, capture, export, accessibility, and other plugins add controls without editing your plugin.
How it works
The same GUI plugin can add a launcher to normal chat and register what appears when its playground opens.
A manifest points to the plugin module. Enabled GUI plugins are loaded by the chat and playground hosts.
addPlayground() declares the canvas, upper toolbar, lower toolbar, events, and state-change behavior.
The playground inherits the selected project and session and enforces the same access boundary as chat.
Authenticated APIs, streamed responses, message renderers, settings, shared services, and cross-window updates remain available.
Plugin hooks
Own the primary experience or contribute one capability to a playground created by another plugin.
| Hook or context | What it gives your plugin | Use it for |
|---|---|---|
addPlayground() | Registers the primary canvas, toolbars, event handler, and state lifecycle. | Own the experience Avatar, operator, dashboard, or guided tool. |
renderCanvas() | A dedicated DOM container and live playground context. | Custom interface Render the visual center of the plugin. |
renderTopToolbar() | A collapsible upper control region. | Modes, context, status, navigation, and display controls. |
renderBottomToolbar() | A collapsible lower control region. | Prompts, playback, capture, actions, and input. |
onEvent() | Token, message, completion, flow-status, and custom events. | Live updates Stream and react without polling. |
onStateChange() | Notification when saved scope or preferences change. | Refresh for the selected project or session. |
addPlaygroundAsset() | A way for one plugin to add to another plugin's canvas or toolbar. | Composable plugins Add voice or export without a hard dependency. |
ctx.sendMessage() | Authenticated, streamed chat through the active session. | Use GotChat's working chat service inside your interface. |
ctx.apiJson() | Authenticated JSON calls to plugin or platform endpoints. | Connect the browser experience to full-stack plugin services. |
addPanelTab() | The standard GotChat settings drawer. | Keep configuration discoverable and consistent. |
Working starter
The Idea Workshop sample adds a launcher to GotChat, opens its own playground, sends a streamed session message, renders the answer, exposes settings, and cleans up its interface correctly.
export default {
register(host) {
host.addPlayground({
id: "main",
title: "Idea Workshop",
renderCanvas(container, ctx) {
// Render your focused experience.
},
renderBottomToolbar(container, ctx) {
// Call ctx.sendMessage(prompt).
},
onEvent(event, data, ctx) {
// React to token and done events.
}
});
}
};
What you can make
Playground is useful when the product should feel more focused than a general-purpose chat window.
Combine an animated avatar, local speech, streamed answers, and companion microphone controls.
Turn workflow progress, approvals, results, and user controls into a task-specific operating surface.
Walk a user through research, planning, intake, analysis, or creation without exposing platform complexity.
Blend session-aware AI with charts, files, status, actions, and your full-stack plugin endpoints.