Playground A focused surface for plugin-built AI experiences

Give your plugin its own interface without rebuilding the AI platform

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

A custom experience connected to a working GotChat session

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.

01

Plugin-owned canvas

Render a focused interface instead of forcing every idea into a standard chat transcript.

02

Real project context

Use the active project, session, message history, authentication, and permissions.

03

Streaming AI

Send through the session chat service and react to tokens, messages, completion, and workflow events.

04

Composable controls

Let voice, capture, export, accessibility, and other plugins add controls without editing your plugin.

How it works

One plugin module, two connected surfaces

The same GUI plugin can add a launcher to normal chat and register what appears when its playground opens.

  1. 1

    GotChat discovers the plugin

    A manifest points to the plugin module. Enabled GUI plugins are loaded by the chat and playground hosts.

  2. 2

    The plugin registers its view

    addPlayground() declares the canvas, upper toolbar, lower toolbar, events, and state-change behavior.

  3. 3

    The user opens the experience

    The playground inherits the selected project and session and enforces the same access boundary as chat.

  4. 4

    GotChat keeps everything connected

    Authenticated APIs, streamed responses, message renderers, settings, shared services, and cross-window updates remain available.

Plugin hooks

Small hooks with a large creative surface

Own the primary experience or contribute one capability to a playground created by another plugin.

Hook or contextWhat it gives your pluginUse 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

Download a plugin you can open, run, and change

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.

  • Manifest and ES module entry point
  • Canvas, upper toolbar, and prompt toolbar
  • Authenticated session streaming
  • Token and completion event handling
  • Responsive light and dark styles
  • Installation and customization README
plugin.js
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

Keep the platform. Change the experience.

Playground is useful when the product should feel more focused than a general-purpose chat window.

Talking characters

Combine an animated avatar, local speech, streamed answers, and companion microphone controls.

Visual operators

Turn workflow progress, approvals, results, and user controls into a task-specific operating surface.

Guided workspaces

Walk a user through research, planning, intake, analysis, or creation without exposing platform complexity.

Specialist dashboards

Blend session-aware AI with charts, files, status, actions, and your full-stack plugin endpoints.

Already a complete AI application

Build the differentiator, not the chat infrastructure.

Start With the Sample