Artboard

Why I am building this

As a kid, I was fascinated by graphical adventures. A few colours and a handful of pixels could turn a screen into a world worth exploring. Every room suggested a story, every strange object might matter later, and every unopened door was an invitation.

That fascination never left me. Years later, I decided to build an adventure of my own, with a possibility I could only have imagined back then: a world created as you play, where the story and its scenes can unfold differently every time.

That project is Adventure, an AI-powered graphical adventure generator inspired by the spirit of the games I grew up with. Artboard is its drawing component: the canvas and tools that let agents bring those worlds into view.

Related MCP server: monosketch-mcp

What is Artboard?

Artboard is a drawing toolkit for composing scenes with the visual character of 1980s graphical adventures. It gives an AI agent explicit drawing operations, so the agent can build a scene from shapes, lines, colours, and filled areas.

The agent decides what to draw and how to compose it. Artboard provides the means to put that composition on a canvas.

All drawings use one fixed set of 16 basic colors. Agents choose colors by English names, including red and white, without interpreting color codes or selecting a palette.

An empty canvas renders white. Drawing agents can add stars directly, including five-point stars for flags.

Its intended external integration surface is MCP (Model Context Protocol), allowing the Adventure engine and other compatible agents to use its drawing capabilities. MCP transport remains under development. The current implementation exposes the toolkit as a TypeScript library, a Node CLI and a local browser interface for drawing workflows.

For Humans

Think of Artboard as a drawing desk an agent can operate. A description such as “a clearing at dawn, with a castle on the horizon” becomes a composition assembled through drawing commands.

The intended look is deliberately retro: low-resolution scenes, clear silhouettes, expressive colour choices, and the atmosphere of classic graphical adventures. The reference is a visual language, leaving room for new stories and worlds.

For Agents

Artboard is being developed around simple, composable drawing tools:

• Draw circles, rectangles, triangles, stars, and lines.

• Fill areas and apply colours.

• Position and combine primitives to build a scene.

• Draw on a canvas through MCP.

These operations give agents a practical vocabulary for constructing images, including agents running on local language models. The approach focuses on tool-driven composition rather than requiring a dedicated image-generation model.

How it fits into Adventure

Adventure creates the evolving experience: the story, the choices, and the world that responds to the player.

Artboard supplies the drawing capabilities used to represent that world.

Artboard is designed as a reusable component. Adventure is its original home, but other agents can use the same toolkit to compose their own scenes.

Project Status

Under development. The drawing application is being explored and refined, and its visual style is still evolving.

The repository contains the drawing core, separate drawing agents, seven workflows, Node/HTTP adapters, and a DOS-style browser interface with prompt, canvas, and monitor columns. Workflow 1 delivers without a reviewer; workflows 2-7 include independent review. The UI executes workflows through a local service with streamed model progress, live previews, batch input, editing and cancellation. Artboard is the maintained drawing component of Adventure. Story generation, narration, player choices, and game sessions stay in Adventure.

Start

npm ci
npm run dev

Use Node.js 22.12 or newer. On Windows PowerShell, use npm.cmd if execution policy blocks npm.ps1. Startup creates a documented, Git-ignored agents.local.json if missing. No model connection is required to open the UI; Send requires an OpenAI-compatible model server. See development setup for configuration and the browser interface for its controls.

Local JavaScript drawing scripts can compose the same validated tools with loops and calculated geometry, without a model server:

npm run draw-script -- scripts/drawings/fighter-reference.mjs outputs/fighter-reference
npm run draw-script -- scripts/drawings/fighter-reference.mjs outputs/fighter-reference reviewed

The reference study preserves a first attempt and a separate revision after visual review. Both use the existing primitives and fixed palette. See drawing scripts for the callable tools and execution contract.

Run a model-driven drawing through the same configured workflow used by the browser:

npm run agent -- --model ornith --layers 1 --image-divisor 4 "A house"

The CLI reads its connection from the local app configuration or environment. --model selects that model for every workflow role for this run only; it does not rewrite local settings. The prompt is required. Optional flags include --reasoning-effort none|low|medium|high. Results and previews are written under outputs/.

Structure

src/core/           Drawing contracts, tools, rendering, catalogs, and history
src/agents/         Drawing editor/reviewer workflow and model transport
src/workflows/      Creation stages, role prompts and handoff orchestration
src/contracts/      Shared workflow catalog and HTTP wire types
src/adapters/node/  Filesystem persistence and image encoding
src/adapters/server/ Local agent configuration and HTTP execution
src/ui/             Three-column DOS-style browser interface
scripts/            Node commands and reproducible artifact generation
tests/              Drawing, agent, and browser UI invariants
schemas/            Generated scene and tool JSON contracts

Core, agents, workflows, contracts, adapters and UI have separate responsibilities and import boundaries enforced by lint. The UI imports pure contracts and connects to execution through HTTP. Vite builds the browser application and separate reusable core, agent, workflow and Node library entries.

• Drawing core

• Drawing agents

• Drawing workflows

• Local service

• Node adapter

• Browser interface

• Setup, commands, model configuration, and validation

• Development contract

Created by Diego Donofrio.