Skip to main content

Dynamic Panel Plugins

Dynamic panel plugins give a plugin its own in-app UI.

Use this pattern when a plugin needs:

  • configuration UI
  • dashboards
  • status views
  • workflows that need richer interaction than chat alone

This is not a separate plugin type. It is a UI pattern any plugin can use.

Basic Pattern​

Set ui.path in the plugin manifest:

{
  "codebolt": {
    "plugin": {
      "ui": { "path": "src/ui/index.html" }
    }
  }
}

Then communicate between the iframe UI and the plugin process.

Browser-Side API​

<script>
  window.codeboltPlugin.sendMessage({ type: 'save', data: { key: 'value' } });

  window.codeboltPlugin.onMessage((data) => {
    console.log('From plugin:', data);
  });
</script>

Plugin-Side API​

// Send data to the panel
await plugin.dynamicPanel.send('panel-id', { status: 'connected' });

// Receive messages from the panel
plugin.dynamicPanel.onMessage('panel-id', async (data) => {
  if (data.type === 'save') {
    // handle
  }
});

// Open a panel programmatically
await plugin.dynamicPanel.open('my-panel', 'Panel Title', '<h1>Hello</h1>');

// Open and wait for response
const response = await plugin.dynamicPanel.open('config-panel', 'Configure', html, {
  waitForResponse: true,
  timeout: 300000
});

Real Use Case: Plugin Settings UI​

plugin.onStart(async (ctx) => {
  plugin.dynamicPanel.onMessage('plugin-ui-my-plugin', async (data) => {
    switch (data.type) {
      case 'save':
        await plugin.kvStore.set('config', JSON.stringify(data.config), {
          instanceId: ctx.pluginId,
          namespace: 'config'
        });
        await plugin.dynamicPanel.send('plugin-ui-my-plugin', {
          type: 'saved',
          success: true
        });
        break;

      case 'load':
        const config = await plugin.kvStore.get('config', {
          instanceId: ctx.pluginId,
          namespace: 'config'
        });
        await plugin.dynamicPanel.send('plugin-ui-my-plugin', {
          type: 'config',
          data: config ? JSON.parse(config) : null
        });
        break;
    }
  });
});

Good Fit For Dynamic Panels​

Dynamic panels work especially well for:

  • chat gateway plugin configuration
  • OAuth/account connection state
  • provider setup
  • plugin dashboards and job status
  • operator controls

Relationship To Custom UI Docs​

Dynamic panels are plugin-scoped UI surfaces inside Codebolt.

For the broader application-side concept, see Dynamic Panels. For application patterns where the plugin acts as the backend for a larger UI, see Custom Agentic Applications.

See Also​