mcpField
L
lousa

lousa

Local
github.com/henriquepeMedia & Design0Updated 13w ago

About lousa

lousa is an MCP server and web viewer for AI agents that turn explanations into animated, hand-drawn diagrams. Agents create and revise structured scenes, while users can select elements for targeted follow-up edits.

Key features

  1. 01Create boards from structured scenes
  2. 02Animate incremental scene updates
  3. 03Select elements for targeted edits
  4. 04Read, list, and delete boards
  5. 05Boards expire by default

Use cases

  1. 01Visualize an authentication flow
  2. 02Explain a concept with diagrams
  3. 03Refine selected diagram elements

MCP support

The MCP server exposes tools to create, update, read, list, and delete boards, as well as retrieve viewer selections. It can run locally or connect through a configured remote server.

Configuration

Local server config is the same for every client. Copy it into your client’s MCP config file.

mcp.json · Universal config
{
"mcpServers": {
"henriquepe-lousa": {
"command": "npx",
"args": [
"-y",
"lousa"
]
}
}
}
Run commandnpx -y lousa

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmlousa0.1.1

Tools

6

Saved tool list · updated 2w ago

ParameterTypeRequiredDescription
scenearrayYesThe complete scene, in drawing order (titles and shapes before the arrows that connect them).
titlestringYesShort board title.
requestsarrayNoThe user request(s) that originated the board.
ttlHoursnumberNoHours until the board expires and is deleted (default 12; 0 = permanent; max 720). Expiry slides on every update. Use 0 only if the user asks to keep the board.
narrationstringNo1-2 sentences about what the drawing shows (shown as a card in the viewer).

Details

From the project README

Lousa

A whiteboard where your AI agent draws its explanations.

Your agent drawing a rate limiter explanation, stroke by stroke

Ask your agent "explain this visually" and it sketches an animated, hand-drawn diagram on a live board — instead of another wall of text. Lousa is an MCP server + web viewer: the agent authors a declarative scene (boxes, arrows, cylinders, notes), and the board renders it stroke by stroke, as if someone were drawing it in front of you.

Lousa is Portuguese for the classic school blackboard.

Why it's different

  • The agent is the artist. No prompt box, no OCR — your coding agent already has the context and draws through typed MCP tools.
  • Live, incremental drawing. Follow-ups edit the scene; the open tab animates only what changed, like watching the diagram evolve.
  • Point at things. Click elements in the viewer to select them, then tell your agent "improve what I selected" — it reads your selection through get_selection and targets exactly that.
  • Boards expire by default (12h, sliding) — a whiteboard, not a document graveyard. ttlHours: 0 keeps a board forever.

Quick start

Requires Node.js 18.17+.

# Claude Code
claude mcp add lousa -- npx -y lousa mcp

# or run the server directly
npx lousa            # viewer at http://127.0.0.1:4666

Any MCP host works — for stdio configuration use command npx, args ["-y", "lousa", "mcp"]. The stdio endpoint auto-starts the local server, so the viewer is always available. Then ask your agent to "draw how our auth flow works" and open the URL it returns.

MCP tools

ToolWhat it does
create_boardCreates a board from a scene, returns {id, url}
update_boardReplaces the scene; unchanged elements stay byte-identical so only changes animate
get_board / list_boardsRead boards
get_selectionWhat the user selected in the viewer (ids + full elements)
delete_boardDeletes a board

The scene is a JSON array of elements — box, ellipse, diamond, cylinder, arrow (connects ids), line, text, note — rendered with rough.js. The full schema ships inside the tool definitions; agents need no extra setup.

Self-hosting a shared server

Run lousa on any Node host and point machines at it:

LOUSA_TOKEN=<secret> HOST=0.0.0.0 npx lousa        # server
LOUSA_URL=https://your-host LOUSA_TOKEN=<secret> npx lousa mcp   # each client

LOUSA_TOKEN gates board listing/creation/deletion and /mcp; per-board URLs act as capability links. AWS Lambda + S3 deployment is supported out of the box (lambda.js handler + LOUSA_BUCKET for storage); any HTTPS front (API Gateway, etc.) works.

Env varDefaultPurpose
PORT / HOST4666 / 127.0.0.1server bind
LOUSA_DATA_DIR~/.lousa/boardsfilesystem board storage
LOUSA_BUCKET—use S3 storage instead of filesystem
LOUSA_TOKEN—require bearer token (header or ?t=) on global routes and MCP
LOUSA_URL—lousa mcp proxies to this remote server
LOUSA_DEFAULT_TTL_HOURS12default board expiry

Development

npm install
npm test          # node --test
node cli.js       # local server

License

AGPL-3.0 © Henrique Pires

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.