@drawcall/design

Typed Drawcall Design contracts, clients, and remote CLI.

import { v1 } from "@drawcall/design";

const design = v1.createClient({ authToken: process.env.DRAWCALL_AUTH_TOKEN });
const projects = await design.project.list();

Projects and frames have immutable 14-character lowercase IDs. A project is a hosted filesystem at https://<project-id>.design.drawcallcontent.com/; every frame owns /<frame-id>/ within it. Every GLTS, Markdown, image, or Market frame includes a canonical previewUrl at https://<project-id>.design.drawcallcontent.com/<frame-id>.webp.

npx drawcall auth login
npx drawcall design project create showroom
# `project list` prints: <project-id> <name>

npx drawcall design -p r6z2n9k4x8m1qc frame create racecar \
  --type glts --size 800x800 \
  --import ./parts/wheel.glts=-0.5,0,-0.5:0.5,1,0.5 \
  --text 'import { gltsLoader, scene } from "@drawcall/glts"; const wheel = await gltsLoader.loadAsync(new URL("./parts/wheel.glts", import.meta.url)); scene.add(wheel)'
# `frame create` prints its frame ID and /<frame-id>/ path. `--text -` reads stdin.
# Each `--import` box becomes a placeholder file until the real part is written.

npx drawcall design -p r6z2n9k4x8m1qc write /a4z8m2q7v9kcde/parts/wheel.glts \
  'import * as THREE from "three"; import { scene } from "@drawcall/glts"; scene.add(new THREE.Mesh(new THREE.TorusGeometry(), new THREE.MeshStandardMaterial()))'
npx drawcall design -p r6z2n9k4x8m1qc ls /
npx drawcall design -p r6z2n9k4x8m1qc read /a4z8m2q7v9kcde/index.glts
npx drawcall design -p r6z2n9k4x8m1qc frame preview a4z8m2q7v9kcde
npx drawcall design -p r6z2n9k4x8m1qc frame screenshot a4z8m2q7v9kcde

npx drawcall design -p r6z2n9k4x8m1qc frame create release-notes \
  --type markdown --size 720x900
npx drawcall design -p r6z2n9k4x8m1qc write /b4z8m2q7v9kcdf/index.md \
  $'# Release notes\n\n![Racecar](/a4z8m2q7v9kcde.webp)'

npx drawcall design -p r6z2n9k4x8m1qc frame create reference \
  --type image --image ./reference.png
npx drawcall design -p r6z2n9k4x8m1qc frame create oak-chair \
  --type market --asset [email protected]

npx drawcall design -p r6z2n9k4x8m1qc frame generate-image product-shot \
  --prompt "A clean product photograph" \
  --reference https://r6z2n9k4x8m1qc.design.drawcallcontent.com/a4z8m2q7v9kcde.webp
npx drawcall design -p r6z2n9k4x8m1qc frame edit-image b4z8m2q7v9kcdf \
  --prompt "Use warmer light" --replace \
  --reference ./lighting.webp

Design credentials are managed by @drawcall/auth and shared with other Drawcall CLIs. Existing credentials in drawcall-design/config.json migrate automatically.

The Commander implementation is available for aggregate CLIs:

import { createDesignCommand } from "@drawcall/design";

program.addCommand(createDesignCommand());

The MCP tools can be mounted into a server owned by another package:

import { registerDesignTools, v1 } from "@drawcall/design";
import { McpServer } from "@modelcontextprotocol/server";

const options = { authToken: process.env.DRAWCALL_AUTH_TOKEN };
const client = v1.createClient(options);
const server = new McpServer({ name: "mcp.drawcall.ai", version: "1.0.0" });

registerDesignTools(server, client);

Image generation accepts public HTTP(S) reference URLs. Use a frame's canonical WebP URL to reference a GLTS, Markdown, image, or Market frame.

The host owns the server identity, authentication, and transport. The MCP SDK is an optional peer dependency and is required only when mounting these tools.

GLTS frames accept only .glts files. An absent index.glts still renders an intentionally empty frame. For authored scenes, work top-down: write index.glts, give each planned child asset a bounding box in imports, then implement those children progressively. Each box creates a stored placeholder file that renders as a labeled glowing box until writing the real file replaces it.

Markdown frames accept only index.md; an absent source renders an empty document. Embed an existing non-Markdown frame with standard image syntax such as ![Racecar](/a4z8m2q7v9kcde.webp). Raw HTML is disabled, Markdown frames cannot embed other Markdown frames, and each document is limited to 32 frame embeds. Image and Market files are available through the same filesystem but are read-only. Read npx drawcall design skill (or MCP get_design_instructions) before creating or changing a GLTS or Markdown frame.