@stdout-design/cli

Storybook for images — in your repo and speaking to your agents.

A CLI for rendering your own TSX components into pixel-perfect social and marketing images. Live preview studio, batch rendering from data, and MCP server for AI agents.

Quick start

# Install
bun add -d @stdout-design/cli

# Scaffold a project
npx @stdout-design/cli init

# Render an image
npx @stdout-design/cli render bento-feature --title "Hello" --out hello.png

# Or open the live studio
npx @stdout-design/cli dev

Installation

bun add -d @stdout-design/cli

Or globally:

bun add -g @stdout-design/cli

Prerequisites: Node.js 22.22+, Bun 1.2+.

Commands

Run commands with npx @stdout-design/cli <command>, or install globally with bun add -g @stdout-design/cli to use studio <command> directly.

studio render

studio render <template> [options]

studio dev

Starts a dev server on localhost:3000 with:

• Hot-reload when templates change
• Auto-generated prop panel
• Side-by-side preview across presets
• Export templates to PNG

studio init

Scaffolds a new studio project with:

• TypeScript configuration
• Example templates to get started
• Sample data files for batch rendering
• Locale files for i18n

Writing templates

A template is a TSX component with typed props:

type Props = {
  title: string;
  stat: string;
};

export default function MilestoneCard({ title, stat }: Props) {
  return (
    <div className="rounded-2xl bg-black p-8 text-white">
      <h1 className="text-4xl font-bold">{title}</h1>
      <p className="mt-2 text-lg">{stat}</p>
    </div>
  );
}

Drop it in templates/ and it's immediately renderable.

AI agent integration

Add to your agent's MCP config:

{
  "mcpServers": {
    "stdout-design": {
      "command": "npx",
      "args": ["-y", "@stdout-design/cli", "mcp"]
    }
  }
}

Available tools: list_templates, render, render_batch, list_presets

Project structure

my-project/
├── studio.config.ts      template registry, presets, locales
├── templates/            your TSX components
├── data/                 CSV/JSON for batch renders
├── locales/              translation files
└── out/                  rendered assets (gitignored)

Configuration

export default {
  templates: "./templates",
  presets: [
    { name: "og", width: 1200, height: 630 },
    { name: "instagram", width: 1080, height: 1080 },
  ],
  locales: ["en", "ar"],
  outDir: "./out",
};

Platform presets

License

MIT