{"id":51593276,"url":"https://github.com/leestott/copilot-canvas-runtime","last_synced_at":"2026-07-11T16:30:51.021Z","repository":{"id":367717344,"uuid":"1282032244","full_name":"leestott/copilot-canvas-runtime","owner":"leestott","description":"Canvas as a runtime for shaping agent-driven systems — a GitHub Copilot Canvas extension (Multi-Agent Dev Canvas) with a worked scenario, blog posts, and a demo prompt.","archived":false,"fork":false,"pushed_at":"2026-06-27T10:11:26.000Z","size":1047,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-27T10:14:09.533Z","etag":null,"topics":["ai-agents","canvas","copilot-cli","developer-tools","github-copilot","multi-agent","observability","runtime"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leestott.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-27T08:22:32.000Z","updated_at":"2026-06-27T10:11:29.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/leestott/copilot-canvas-runtime","commit_stats":null,"previous_names":["leestott/copilot-canvas-runtime"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/leestott/copilot-canvas-runtime","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leestott%2Fcopilot-canvas-runtime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leestott%2Fcopilot-canvas-runtime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leestott%2Fcopilot-canvas-runtime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leestott%2Fcopilot-canvas-runtime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leestott","download_url":"https://codeload.github.com/leestott/copilot-canvas-runtime/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leestott%2Fcopilot-canvas-runtime/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35368766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-11T02:00:05.354Z","response_time":104,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-agents","canvas","copilot-cli","developer-tools","github-copilot","multi-agent","observability","runtime"],"created_at":"2026-07-11T16:30:50.335Z","updated_at":"2026-07-11T16:30:51.014Z","avatar_url":"https://github.com/leestott.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🎨 Multi-Agent Dev Canvas\n\n[![GitHub Copilot CLI](https://img.shields.io/badge/GitHub%20Copilot%20CLI-canvas%20extension-000?logo=githubcopilot\u0026logoColor=white)](https://github.com/leestott/copilot-canvas-runtime)\n[![Node.js](https://img.shields.io/badge/Node.js-built--ins%20only-5FA04E?logo=nodedotjs\u0026logoColor=white)](https://nodejs.org)\n[![Dependencies](https://img.shields.io/badge/dependencies-zero-success)](#quick-start)\n[![Last commit](https://img.shields.io/github/last-commit/leestott/copilot-canvas-runtime?logo=git\u0026logoColor=white)](https://github.com/leestott/copilot-canvas-runtime/commits/main)\n[![Stars](https://img.shields.io/github/stars/leestott/copilot-canvas-runtime?style=flat\u0026logo=github)](https://github.com/leestott/copilot-canvas-runtime/stargazers)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n\nA GitHub Copilot Canvas extension that demonstrates **Canvas as a runtime observability and control plane** for multi-agent development — not a traditional UI builder.\n\n\u003e **Canvas redefines software development** by shifting from writing static code to orchestrating living systems, where developers and AI co-create, observe, and evolve solutions in real time.\n\n📦 **Repository:** https://github.com/leestott/copilot-canvas-runtime\n\n![Multi-Agent Dev Canvas](docs/blog/canvas-demo.png)\n\n## The Experience in the GitHub Copilot App\n\nThis is what it looks like live in the **GitHub Copilot App** — the AI chat on the\nleft driving the system, and the Canvas panel on the right updating in real time\nas a shared Human ↔ AI ↔ System surface:\n\n![Multi-Agent Dev Canvas inside the GitHub Copilot App](ghcanvasapp.png)\n\n## What This Is\n\nTraditional UIs are for **using** software. Canvas is for **shaping** software while it runs.\n\nThis canvas provides:\n\n- **System View** — Live agent cards showing status, responsibilities, and task counts\n- **Task Flows** — Visual pipeline of work routing between agents\n- **Validation Panel** — Structured test results with pass/fail badges and reasoning\n- **Live State Timeline** — Chronological log of every state mutation\n- **Controls** — Trigger agent actions, pause/resume execution, inject failures, and reset\n\n## Agent-Callable Actions\n\n| Action | Description |\n|--------|-------------|\n| `decompose_system` | Break requirements into agent tasks and update the task flow graph |\n| `execute_workflow` | Coordinate agents to perform pending tasks |\n| `validate_output` | Run evaluation tests and return structured pass/fail results |\n| `update_system_design` | Modify architecture, constraints, or components live |\n| `track_state` | Read full system state including agents, flows, and history |\n| `inject_failure` | Force an agent into error state to test adaptation |\n| `pause_resume` | Toggle execution on/off |\n\n## Scenario Walkthrough\n\nWant to see Canvas in action? **[scenario.md](scenario.md)** documents a complete,\nreproducible demo — taking a *Customer Support Triage System* from a single\nrequirement through decomposition, execution, validation, fault injection, and\nlive design evolution. It also explains **how Canvas apps empower developers** and\nwhy Canvas is for *test validation and implementation of agent‑driven solutions* —\nnot for building a DevOps board.\n\n\u003e You don't build Canvas instead of your UI — you use Canvas to figure out, test,\n\u003e and evolve the UI and system **before and during** building it.\n\n- 📖 **[scenario.md](scenario.md)** — the full five‑beat walkthrough\n- 🧑‍💻 **[prompts/canvas-showcase-prompt.md](prompts/canvas-showcase-prompt.md)** — a ready‑to‑paste prompt for engineers to showcase Canvas\n- ✍️ **[Blog: Shaping Software While It Runs](docs/blog/shaping-software-while-it-runs.html)** — the scenario as a narrative\n\n## Quick Start\n\n### Prerequisites\n\n- [GitHub Copilot CLI](https://docs.github.com/en/copilot) with Canvas support\n- Node.js v20+\n\n### Install the Extension\n\nThe canvas extension lives at `.github/extensions/multi-agent-dev/extension.mjs`. To use it:\n\n1. **Clone this repo** into your project or copy the `.github/extensions/multi-agent-dev/` folder into your own repo.\n\n   ```bash\n   git clone https://github.com/leestott/copilot-canvas-runtime.git\n   ```\n\n2. **Reload extensions** in GitHub Copilot CLI:\n   ```\n   extensions_reload\n   ```\n\n3. **Open the canvas**:\n   ```\n   open_canvas({ canvasId: \"multi-agent-dev\", instanceId: \"dev-1\" })\n   ```\n\n4. **Invoke actions** — either click the buttons in the canvas UI, or call from the agent:\n   ```\n   invoke_canvas_action({\n     instanceId: \"dev-1\",\n     actionName: \"decompose_system\",\n     input: {\n       requirements: \"Build an AI code review agent\",\n       components: [\"pr-ingestion\", \"code-analysis\", \"feedback-generator\"]\n     }\n   })\n   ```\n\n## How It Works\n\nThe extension is a single `extension.mjs` file that:\n\n1. **Registers a canvas** with the Copilot SDK via `createCanvas()`\n2. **Starts a loopback HTTP server** per instance on an ephemeral port\n3. **Pushes state updates** to the iframe via Server-Sent Events (SSE)\n4. **Exposes dual interaction** — humans click buttons in the UI, AI agents call actions through the SDK; both mutate the same state\n\n```\n┌──────────────┐    SSE /events     ┌──────────────────┐\n│  Canvas UI   │ ◄────────────────── │  extension.mjs   │\n│  (iframe)    │ ────POST /trigger──►│  (Node.js)       │\n└──────────────┘                     │                   │\n                                     │  ◄── Agent calls  │\n┌──────────────┐  invoke_canvas_     │      via SDK      │\n│  Copilot CLI │ ──action──────────► │                   │\n└──────────────┘                     └──────────────────┘\n```\n\n## Project Structure\n\n```\ncanvasdemo/\n├── .github/\n│   └── extensions/\n│       └── multi-agent-dev/\n│           └── extension.mjs       # The canvas extension (single file)\n├── docs/\n│   └── blog/\n│       ├── canvas-demo.png                       # Screenshot — after validation\n│       ├── canvas-fault-injected.png             # Screenshot — fault injected\n│       ├── canvas-evolved.png                    # Screenshot — evolved \u0026 recovered\n│       ├── shaping-software-while-it-runs.html   # Scenario blog post\n│       └── canvas-is-not-a-ui-builder.html       # Architecture deep-dive\n├── prompts/\n│   └── canvas-showcase-prompt.md   # Engineer prompt to showcase Canvas\n├── ghcanvasapp.png                 # The canvas running in the GitHub Copilot App\n├── scenario.md                     # Full demo scenario walkthrough\n└── README.md\n```\n\n## Canvas vs. Figma vs. Traditional UIs\n\n| Tool | Collaboration Model | Executes? |\n|------|-------------------|-----------|\n| **Figma** | Human ↔ Human | No — design only |\n| **Traditional UI** | Human ↔ System | Yes — finished product |\n| **Canvas** | Human ↔ AI ↔ System | Yes — living, evolving system |\n\n## Blog Posts\n\n- [Shaping Software While It Runs: A Canvas Scenario, Start to Finish](docs/blog/shaping-software-while-it-runs.html) — the demo scenario as a narrative\n- [Canvas Is Not a UI Builder — It's a Runtime for Shaping Intelligent Systems](docs/blog/canvas-is-not-a-ui-builder.html) — the deeper architectural deep‑dive\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleestott%2Fcopilot-canvas-runtime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleestott%2Fcopilot-canvas-runtime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleestott%2Fcopilot-canvas-runtime/lists"}