Skip to main content

UI Extensions

Embed new panels, views, and widgets directly into the Codebolt interface. Users see your extension inside Codebolt — not in a separate app.

When to write a UI extension​

  • You want a custom dashboard showing agent run metrics.
  • You need a domain-specific control panel alongside the chat (e.g. a DB schema browser, a design token viewer).
  • You're building a review workflow that needs a purpose-built UI step inside Codebolt.

Panel anatomy​

A UI extension is a React component bundled as a plugin panel entry point.

// src/panel.tsx
import { useCodeboltPanel } from '@codebolt/plugin-sdk/ui';

export default function MyPanel() {
  const { runId, agentId } = useCodeboltPanel();
  return <div className="my-panel">...</div>;
}

Declare in plugin.yaml:

contributes:
  uiPanels:
    - id: my-panel
      label: My Panel
      entry: ./dist/panel.js
      placement: sidebar        # sidebar | bottom | floating | modal
      activateOn:
        - agentRunStart
        - command:my-panel.open

Placement options​

PlacementWhere it appears
sidebarCollapsible panel in the left/right sidebar
bottomTab in the bottom panel (alongside terminal, logs)
floatingDraggable floating window
modalFull modal overlay, opened on demand

See also​