A minimal scaffold that handles the starter plumbing — Copilot SDK session, auth, WebSocket bridge, and Hydra canvas setup — so you can spend the workshop on the creative work.
- Copilot SDK server with a working session, streaming event subscriptions, and a
/ws/agentWebSocket route. - Auth gate UI that runs
copilot auth loginand waits for sign-in before launching the app. - Hydra installed and attached to a canvas. After init, Hydra's globals (
osc,noise,shape,gradient,solid,src,o0..o3,s0..s3,render,width,height,time, etc.) are available onwindow. - A typed
CopilotConnectionclient with handlers for every assistant event (status, intent, reasoning, tokens, tool calls). - A placeholder system prompt with a TODO.
Everything else — chat UI, code editor, the protocol the model follows, visuals, music, whatever your project needs. Nothing is rendered into <main id="app"> until you put something there.
- Node.js 20 or newer.
- The GitHub CLI (
gh). Sign in once withgh auth login— the Copilot SDK picks this up automatically.
Alternatively, install the Copilot CLI (npm i -g @github/copilot) and use its device-flow sign-in via the in-app login overlay.
npm install
npm run devWeb app: http://localhost:5173. Server: http://localhost:5174.
If anything looks off, run:
npm run doctorIt checks Node version, gh auth, Copilot SDK auth, and that the dev servers are reachable.
| File | What it is |
|---|---|
apps/server/system-prompt.md |
The instructions the model sees. Replace the TODO with your real prompt. |
apps/server/src/system-prompt.ts |
Tiny loader that reads the markdown above. You usually won't touch this. |
apps/web/src/main.ts |
App boot. After auth + Hydra init, the rest is yours. |
apps/web/src/copilot.ts |
CopilotConnection — import this from your UI to talk to the assistant. |
apps/web/src/hydra.ts |
initHydra(canvas) and evalHydra(code) — drive visuals however you want. |
packages/shared/src/index.ts |
The full AgentEvent union — every kind of message the server can send. |
apps/server/src/agent.ts |
SDK session wiring. You usually won't need to touch this. |
workshop-starter/
├── apps/
│ ├── web/ # browser app (Hydra canvas + auth gate, no UI yet)
│ └── server/ # Copilot SDK session + WebSocket bridge
├── packages/
│ └── shared/ # types shared by both
├── .mcp.json # MCP servers (Playwright + Microsoft Learn) for AI tooling
└── README.md
.mcp.json configures two Model Context Protocol servers any MCP-aware client (Copilot CLI, Claude Code, etc.) can use:
- Playwright — browser automation. Useful for letting an assistant drive your app while you build it.
- Microsoft Learn — fetch official Microsoft documentation.
npm run typecheck
npm run build