Design Studio AI CLI
A design studio for people and agents: dsa CLI, MCP endpoint and skill to edit layouts, slides, reports and 3D together.
- 229 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The agent changes saved designs and can start paid generation with your provider keys.
- The studio API key and provider keys sit in the agent environment.
Install
- Works in
Manual install
npm install -g https://github.com/bestagentkits/design-studio-ai/releases/download/v0.4.3/bestagentkits-design-studio-ai-0.4.3.tgzThen `dsa mcp install claude --write` connects the MCP server.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The agent changes saved designs and can start paid generation with your provider keys.
- The studio API key and provider keys sit in the agent environment.
This is third-party code. Review the repository files before installing.
What it does
Design Studio AI is a workspace for web interfaces, slides, reports, wireframes, 3D scenes and timeline videos. A person and an agent edit one versioned document: a brief or template, preview, focused changes through chat or the editor, export and publishing. The result exports to JSON, HTML, SVG, PNG, PDF, PowerPoint, WebM, GLB/glTF and a ZIP with a React prototype. The studio connects to an agent three ways. The `dsa` CLI installs from a release tarball with `npm install -g`, the package is not in the npm registry. A network MCP server sits at `https://studio.agentkit.best/mcp` with OAuth or an API key. The `design-studio-ai` skill from `skills/` guides the agent through the brief, projects and edits. The `dsa mcp install <agent>` command prints the config for Claude Code, Codex, Cursor or OpenCode, and with `--write` appends it to the config with a backup. Text, image, speech, music and video generation goes through your own provider keys (BYOK). The studio can be self-hosted with Docker Compose or Cloudflare, with data in SQLite and files.
Who it is for. Designers and frontend developers who build layouts, decks and 3D together with an agent and want to edit one document from chat and from an editor.
Good fit when
- A deck is built from a template by the agent and details are tuned by hand in the editor.
- The agent should read and change the design through MCP instead of writing code blindly.
- A layout has to be exported to PowerPoint, PDF or a React prototype.
- The studio is run in your own Docker with data on your own disk.
Not a fit when
- You only need a style rule set for code generation: the studio keeps a full document with storage.
- You have no provider keys and image or video generation is required.
- Only packages from the npm registry are allowed: the CLI is not published there.
Example request
Create a deck in Design Studio from the product-deck template for the quarterly report and show a preview.Limitations
Generation calls real providers and needs your keys and access, otherwise setup errors come back. Google Slides export takes text, shapes and HTTPS images, complex nodes are rejected explicitly, and PowerPoint rasterizes complex content. Self-hosting needs Node.js 24 or newer, a 32-byte `ENCRYPTION_KEY` and `APP_URL`. Paid generation and publishing require separate permission from a person. The license is MIT, the last commit dates from October 2026.
How to disable. Uninstall the CLI with `npm uninstall -g @bestagentkits/design-studio-ai`, remove the MCP entry from the agent config (with `--write` a `.bak` sits next to it) and the skill. The API key is revoked in the studio settings.
FAQ
How do I connect the studio to Claude Code?
Create an API key in Settings, set `DESIGN_STUDIO_API_KEY` and run `dsa mcp install claude --write`. Without `--write` the command only prints the config.
Is the package on npm?
No, it is not published. Install the release tarball or build the package from `packages/cli` with `npm pack`.
What is the MCP server address?
`https://studio.agentkit.best/mcp` for the hosted version, and your own server address with the same `/mcp` path when self-hosting.
Which export formats exist?
JSON, HTML, SVG, PNG, PDF, PowerPoint, WebM, GLB and glTF, a React prototype ZIP and Google Slides export.
Can I self-host the studio?
Yes, with Docker Compose (`docker compose up --build -d`) or on Cloudflare. `ENCRYPTION_KEY` and `APP_URL` are required.
Discussion
No questions or reviews yet.
Related
CLI toolsAn MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Finds AI-look tells in generated frontend, from purple gradients to cream and terracotta, and rewrites the interface
A design system scanner for a repo with MCP and an edit hook: a 0 to 100 score, agent rules and the places where AI invents UI
designlang
designlang (design-extract)
A CLI and MCP server that reads a live website and pulls out its design system: DTCG tokens, a Tailwind config, Figma variables and a brand book
A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
An interface design skill that anchors an agent to your product, with an optional MCP server adding real screens from a catalogue.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| Design Studio AI (this card) | no | 229 | ||
| Penpot AI Kit | no | 121 | Penpot AI Kit connects an agent to Penpot, while Design Studio AI holds the document and editor itself and runs on your side. | |
| OpenPencil | yes | not required | 9,805 | OpenPencil stays a layout editor, while here slides, 3D, video and three agent access channels are added. |
README in short
An open design studio with an editor, the dsa CLI, an MCP server and a skill: an agent and a person edit one document, with export to PDF, PowerPoint, HTML and 3D.