Jetro

Give your AI coding agent an infinite visual workspace.

Jetro is an open-source VS Code extension that adds a living canvas to your editor. Your AI agent can render charts, tables, dashboards, interactive frames, and rich data visualizations — all on a spatial, persistent surface.

Your coding agent is powerful, but it's trapped in a text window. Jetro unlocks its full potential by giving it a visual layer to build on.

jetro.ai — Try the hosted version with built-in data, skills, and sharing. No setup required.

Features

• Infinite Canvas — draggable, resizable elements: frames, charts, notes, embeds
• MCP Integration — works with any MCP-compatible agent (Claude Code, Cursor, Copilot, Cline, Windsurf, Qwen, etc.)
• Live Frames — HTML iframes with Python refresh bindings for real-time dashboards
• Charts — Plotly.js bundled for instant chart rendering (bar, scatter, pie, candlestick, and more)
• C2 Mode — wire frames together with named data channels for interconnected dashboards
• Data Layer — import CSV, Excel, Parquet, JSON; query with SQL via DuckDB
• Document Parsing — PDF, DOCX, PPTX, XLSX, HTML, images (OCR)
• Code Execution — run Python/R scripts in sandboxed subprocesses
• Data Connectors — reusable Python modules for external APIs, databases, spreadsheets
• Deploy — containerize projects as web apps with Docker
• Share — publish canvas elements as interactive web pages (requires backend)
• Projects — organize work into scoped workspaces with their own canvases

Platform Support

Platform	Status
macOS (Apple Silicon)	Fully supported
macOS (Intel)	Fully supported
Windows (x64)	Fully supported
Linux (x64)	Supported

---

Getting Started

Prerequisites

• Node.js 18+ — required for building and running the MCP server
• VS Code 1.85+ (or compatible: Cursor, Windsurf, Antigravity, or any VS Code fork)
• Python 3 (optional) — for document parsing, live refresh scripts, and code execution
• Docker (optional) — for deploying projects as web apps

Clone and Install

git clone https://github.com/JetroExtension/Jetro.git
cd Jetro

# Install extension dependencies
cd extension
npm install

# Install MCP server dependencies
cd ../mcp-server
npm install

cd ..

Build Everything

The extension has four build targets that must all be built:

cd extension

# 1. Extension backend (TypeScript → single JS bundle)
npm run build:ext

# 2. Canvas webview (React app → bundled HTML/JS/CSS)
npm run build:webview

# 3. Daemon (headless background worker for refresh bindings)
npm run build:daemon

# 4. MCP server (TypeScript → bundled JS, copied into extension)
npm run build:mcp

Or build all four at once:

npm run package

Run in Development (F5)

1. Open the extension/ folder in VS Code
2. Press F5 — this launches a new Extension Development Host window
3. The Jetro sidebar appears in the activity bar
4. Open a folder in the dev host → Jetro initializes
5. You're automatically logged in as jetro@jetro.ai (dev mode)
6. Ask your AI agent to build something — it renders to the canvas

Package as .vsix

To build an installable .vsix package:

cd extension
bash scripts/build-vsix.sh

This runs all build steps, creates a minimal node_modules (native deps only), and packages everything into jetro-0.0.5.vsix.