# Agent Whiteboard Dev

> Development workflow for agent-whiteboard project Use when this capability is needed.

- Skill: `tomevault-io/agent-whiteboard-dev` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/agent-whiteboard-dev`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/agent-whiteboard-dev/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/agent-whiteboard-dev

---


# Agent Whiteboard Development Workflow

## Project Structure

- **mcp-client/** - Browser UI (TypeScript + Vite)
- **mcp-server-go/** - Go MCP server with embedded UI
- **src/** - Core drawing library (TypeScript)
- **npm-platforms/** - Platform-specific binaries

## Development Cycle

### Making Changes to Browser UI

1. Edit files in `mcp-client/`
2. Run `make build` in the workspace root (automatically stops old server)
3. Reconnect MCP in Claude Code (server will auto-restart)
4. Test with whiteboard draw tool

### Key Commands

- **Build**: `make build` (in workspace root) - Automatically stops old server

### Why Only `make build`

The Go MCP server embeds the HTML/CSS/JS files at compile time. Running `make build` does everything:
1. Stops any running MCP server
2. Builds the TypeScript client 
3. Rebuilds the Go server with embedded files

Don't use `npm run build:mcp-client` or other partial build commands - always use `make build`.

### Important Notes

- **CRITICAL**: Always use `make build` - it's the only build command you need
- `make build` automatically stops any running MCP server
- The Go server embeds static files at compile time
- Must reconnect MCP after building for changes to take effect
- Server uses **lazy startup** - HTTP starts on first draw call

## Testing Workflow

1. Make changes to `mcp-client/mcp-client.ts` or CSS/HTML
2. Run `make build` (automatically stops old server)
3. Reconnect MCP server in Claude Code
4. Use `mcp_whiteboard_draw` tool to test changes

## Common Files

- `mcp-client/mcp-client.ts` - Main browser application logic
- `mcp-client/mcp-client.css` - UI styling
- `mcp-client/index.html` - HTML structure
- `mcp-server-go/main.go` - Go server orchestration
- `mcp-server-go/tools.go` - MCP tool definitions

## Architecture

- **2-canvas rendering** - Persist + Display canvases
- **Progressive animation** - Arc-length based smooth drawing
- **Event bus** - Pub/sub for WebSocket communication
- **Session recording** - Automatic slide history

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/choonkeat) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-14 -->