Charting Options in PI Desktop: What Visualization Features Are Available?

PI Desktop does not include built-in charting libraries, but exposes a plugin architecture via the Agent Runtime that allows developers to render custom charts using external libraries like Chart.js.

The open-source repository vastsa/PI-Desktop is an AI-coding-assistant desktop client focused on conversational text and code rendering. If you are evaluating charting options in PI Desktop for data visualization, you should understand that the core codebase contains no native plotting components, relying instead on an extensible plugin system for any graphical output.

Native Charting Capabilities

A comprehensive review of the source tree reveals that PI Desktop ships without embedded charting functionality. The UI-related packages—specifically apps/desktop, packages/agent-runtime, and packages/shared—contain only text-output handlers, sidecar communication protocols, and plugin-loading logic.

Searches across the repository for standard charting identifiers such as chart, Chart, plot, recharts, chartjs, and plotly return no matches. This confirms that no chart rendering engine is bundled with the application. The Electron-based frontend in apps/desktop/ handles conversational rendering and status panels but lacks any native visualization components.

Extending PI Desktop with Custom Charts

Because PI Desktop is extensible via plugins, developers can introduce charting capabilities by creating custom skills. The plugin system is managed through packages/agent-runtime/src/plugin-skills.ts, which loads and registers skill modules at runtime.

Plugin Architecture

The Agent Runtime provides a defineSkill utility (exported from @pi-desktop/plugin-devkit) that allows plugins to inject UI elements into the desktop pane. The skill's run method receives a ui object containing an append function, which mounts DOM elements into the application window. This mechanism enables third-party libraries to render visualizations within the PI Desktop interface.

Chart.js Plugin Implementation Example

Below is a complete, runnable example demonstrating how to implement a line chart using Chart.js within a PI Desktop plugin. This pattern follows the official dev-kit conventions and references the ui.append helper provided by the runtime.

// 📁 plugins/line-chart/index.ts
import { defineSkill } from '@pi-desktop/plugin-devkit';
import Chart from 'chart.js/auto';

// Skill that renders a chart when invoked
export default defineSkill({
  id: 'line-chart',
  name: 'Render Line Chart',
  description: 'Shows a simple line chart with sample data.',
  async run(_, { ui }) {
    // Create a container element for the chart
    const container = document.createElement('div');
    container.style.width = '500px';
    container.style.height = '300px';
    ui.append(container);            // <- `ui` is the host-provided render surface

    const canvas = document.createElement('canvas');
    container.appendChild(canvas);

    // Initialise Chart.js
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [
          {
            label: 'Visits',
            data: [30, 45, 28, 60, 75],
            borderColor: '#4A90E2',
            backgroundColor: 'rgba(74,144,226,0.2)',
            fill: true,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });

    return { status: 'ok' };
  },
});

Key implementation details:

• The ui.append method injects the container into the desktop's render surface
• The plugin creates a <canvas> element and initializes Chart.js with sample time-series data
• The skill metadata (id, name, description) registers the chart as an invocable skill in the UI's Skills panel

Core Files and Architecture

Understanding these source files is essential for developing custom charting solutions:

• packages/agent-runtime/src/plugin-skills.ts – Core logic that orchestrates plugin loading and skill registration; the entry point for any chart-rendering functionality
• packages/agent-runtime/src/plugin-skills.test.ts – Test suite verifying the plugin-loading pipeline and runtime integration
• @pi-desktop/plugin-devkit – Development kit providing defineSkill and UI helpers (referenced in package.json)
• apps/desktop/ – Electron frontend that hosts the UI surface where plugins render output; contains no native chart code

Summary

• PI Desktop contains no native charting options in its core distribution
• The codebase lacks references to Chart.js, Recharts, Plotly, or similar visualization libraries
• Developers must implement charting through the plugin system using defineSkill from @pi-desktop/plugin-devkit
• The ui.append method in the skill's run function provides the DOM injection point for external chart libraries
• Any charting implementation requires bundling the visualization library as a plugin dependency

Frequently Asked Questions

Does PI Desktop include built-in data visualization tools?

No. According to the source code analysis, PI Desktop does not ship with any built-in charting, graphing, or plotting capabilities. The UI is designed for text and code display only.

How can I display charts in PI Desktop?

You must create a custom plugin using the @pi-desktop/plugin-devkit. The plugin can import any JavaScript charting library (such as Chart.js) and use the ui.append method provided in the skill's context to mount a canvas element into the application window.

Which file handles plugin registration for chart rendering?

Plugin registration is managed in packages/agent-runtime/src/plugin-skills.ts. This file contains the logic that loads skill definitions and exposes the UI helpers necessary for DOM-based chart rendering.

Can I use React-based charting libraries like Recharts?

Yes. Since the plugin system allows injection of arbitrary DOM elements and supports modern JavaScript bundles, you can wrap React components or Recharts visualizations inside the plugin's run method and mount them using ui.append, provided you include the necessary transpilation steps in your plugin build configuration.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}