# Starry > Starry is an AI-native design tool: describe interfaces in natural language and get real, editable, production-ready UI and code (React (JSX) and HTML). Local-first, Figma-compatible, with an MCP server for AI coding agents. Starry is a design editor built around open formats and an AI that works directly on the canvas. You can open native Figma `.fig` files, describe a screen in plain language and watch Starry build real, editable layers, then export production code or script every operation headlessly. The following is the full Starry documentation. --- # What is Starry Starry is a design editor built around open formats and an AI that works directly on the canvas. You can open native Figma `.fig` files, describe a screen in plain language and watch Starry build real, editable layers, then export production code or script every operation headlessly. ## Why Starry - **Open formats.** Reads and writes native `.fig` and `.pen` files; copy & paste nodes between Starry and Figma. - **AI builds and verifies.** Describe what you want in chat; 100+ tools create and modify nodes, then Starry inspects the visual result before it finishes. - **Design-to-code export.** Turn any selection into JSX/Tailwind, HTML, SVG, or design tokens. - **Fully programmable.** A headless CLI, XPath queries, an MCP server, and a headless SDK — every operation is scriptable. - **Local-first & collaborative.** Files are plain `.pen` documents on disk; real-time collaboration runs P2P over WebRTC with no server or account. - **Components & auto-layout.** Reusable components and variants, plus flex/CSS-grid auto-layout via Yoga. **Bring your own AI key.** Starry connects to OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, or MiniMax. No backend, no account — your prompts go straight to the provider you choose. ## Who it's for Designers who want to ship without handoff friction. Engineers who'd rather generate a screen than redraw it. Teams that need Figma-compatible editing with real programmatic access. If you live between "idea" and "running app," Starry is for you. --- # How Starry compares to Figma, Google Stitch, and Sketch Starry is AI-native: describe an interface in plain language and it generates real, editable, auto-layout UI, then exports production-ready code (React (JSX) and HTML). It imports native Figma `.fig` files, so you are never locked in, and it runs an MCP server so AI coding tools (Cursor, Claude Code, Codex) can read and write your canvas. - **vs Figma:** Figma is a collaborative design canvas; Starry adds prompt-to-UI and direct code export, and imports your `.fig` files. - **vs Google Stitch:** Both generate UI from prompts; Starry also exports editable React/HTML, imports Figma, and has an MCP server. Stitch outputs code snippets only. - **vs Sketch:** Sketch is a native Mac app licensed per editor; Starry is AI-first with code export and MCP. Sketch has no built-in AI and no MCP server. See the full comparison at https://starry.design/compare.html and the long-form article at https://starry.design/blog/starry-vs-figma-stitch-sketch.html (also in 简体中文 · 繁體中文 · 日本語 · 한국어 · Deutsch · Español · Français). --- # Install & open Starry is a native desktop app built on Tauri v2 — for macOS, Windows, and Linux — and it also runs in the browser as a PWA. No account is required to start designing. ## Desktop app - **macOS** — install with Homebrew: `brew install starryai` - **Any platform** — download the latest installer from the Starry website (starry.design). You'll find a `.dmg` / `.app` for macOS, an `.msi` for Windows, and `.deb` / `.AppImage` for Linux. - The app is a self-contained native binary; on macOS the installed `.app` is about 117 MB (size varies slightly by platform). **Private by default.** Starry runs locally with no account, and your files never leave your machine unless you choose to share them. ## Web app Visit starry.design — the official site lets you start designing in your browser, no download required. Add it to your home screen for an app-like experience. ## System requirements - macOS 12+, Windows 10+, or Linux - ≈150 MB of free disk space - No GPU required; local design needs no internet (AI features need a provider key) ## Open your first file On first launch Starry creates a local workspace on your machine. Your designs are saved as `.pen` and `.fig` files — both are real, open design formats (it reads native Figma `.fig` files), and you can commit them to Git just like any source file. 1. Launch Starry (desktop) or open the web app. 2. Start from a blank canvas, or open a `.pen` / `.fig` file from inside the app or your OS file browser. 3. Ready to use AI? Add an API key for any provider — see the beginner's guide. --- # Quick start From a blank canvas to a working screen in a few minutes. This walks the core loop: describe, review, refine. ## 1. Open the AI chat When you open Starry, the AI chat is already there — use the input box at the bottom of the canvas, or click the sparkle (agent) icon at the top of the left rail. The first time, add an API key for any provider — OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, or MiniMax. ## 2. Describe a screen Tell Starry what to build. Be specific about the screen's purpose and the pieces it should contain. ``` Write a welcome letter from Starry — a centered card with a headline, a short paragraph, and a green "Continue" button at the bottom. ``` ## 3. Review the canvas Starry creates the frames and lays them out with auto-layout, then names the layers. Select anything and ask for a change. ## 4. Export or keep iterating Happy with it? Export to code. Want changes? Just keep talking — the canvas and the code stay in sync. *Tip: short, iterative prompts beat one giant spec. Generate a skeleton, then refine section by section.* --- # Beginner's guide This guide walks you from a fresh install to your first AI-generated screen, one step at a time. The one thing you must do before Starry's AI works is connect a model. ## What you'll need - Starry installed (desktop or web). - An API key from any supported AI provider. Starry has no backend and no account, so *you* bring the key and your prompts go straight to the provider you choose. **No key, no AI — but the editor still works.** You can open, edit, and export `.fig` / `.pen` files without any key. The key only unlocks the chat assistant. ## Step 1 — Download & open Starry runs as a desktop app or right in your browser — no sign-up needed. Launch Starry and open a blank canvas (or a `.pen` file). You're ready to set up the AI. ## Step 2 — Connect a model (add your API key) This is the only setup step the AI needs. Starry supports many providers — pick one you already have a key for, or create a free one. ### Supported providers - **OpenRouter** — a single key unlocks hundreds of models (Claude, GPT, Gemini, DeepSeek, Qwen, Kimi…). - **Anthropic** (Claude), **OpenAI** (GPT), **Google AI** (Gemini), **DeepSeek**, **Z.ai** (GLM), **MiniMax**. - **Any OpenAI-compatible endpoint** — 通义千问, 豆包, Kimi, 零一万物, 百川, 阶跃星辰, and more. Just paste the provider's base URL. ### Add your key 1. Open the chat: click the sparkle (agent) icon at the top of the left rail, or use the input box at the bottom of the canvas. 2. Add your API key for the provider you want. If you don't have one yet, grab it from that provider's console. 3. Once the key is saved, the chat is ready. Starry calls the provider directly from your device; the key never leaves your machine. ### Get your key — provider console links | Provider | Get an API key | | --- | --- | | OpenRouter | openrouter.ai/keys | | Anthropic | console.anthropic.com/settings/keys | | OpenAI | platform.openai.com/api-keys | | Google AI | aistudio.google.com/apikey | | DeepSeek | platform.deepseek.com/api_keys | | Z.ai (GLM) | docs.z.ai/devpack/quick-start | | MiniMax | platform.minimax.io/user-center/basic-information/interface-key | | 通义千问 (Tongyi / Qwen) | 阿里云百炼 控制台 | | 豆包 (Doubao) | 火山方舟 控制台 | | Kimi (Moonshot) | platform.moonshot.cn/console/api-keys | | 零一万物 (Yi) | platform.lingyiwanwu.com/apikeys | ### Verify the connection Send a test message in the chat — for example "hello". If the model replies, you're connected. ## Step 3 — Write your first design With a model connected, just type in the chat what you want in plain language. Starry builds real, editable layers with auto-layout. > Write a welcome letter from Starry — a centered card with a headline, a short paragraph, and a green "Continue" button at the bottom. ## Step 4 — Export to code Starry turns any selection into clean, handoff-ready code — JSX styled with Tailwind, or plain HTML. ## Step 5 — (Optional) connect your editor Add Starry's MCP server to Claude Code, Cursor, or any MCP client. --- # Keyboard shortcuts `⌘` is the Command key on macOS; on Windows/Linux it's `Ctrl`. ## Tools | Shortcut | Tool | | --- | --- | | V | Select | | K | Scale | | F A | Frame | | S | Section | | R | Rectangle | | O | Ellipse | | L | Line | | T | Text | | P | Pen | | H | Hand | ## Files | Shortcut | Action | | --- | --- | | ⌘S | Save | | ⌘⇧S | Save as | | ⌘O | Open file | | ⌘⇧I | Import | | ⌘⇧E | Export the selection as PNG | | ⌘N / ⌘T | New tab | | ⌘W | Close tab | ## Editing | Shortcut | Action | | --- | --- | | ⌘Z | Undo | | ⌘⇧Z / ⌘Y | Redo | | ⌘A | Select all | | ⌘D | Duplicate | | Backspace / Delete | Delete | | ⌥Delete | Delete, bypassing confirmation | | ⌘G | Group | | ⌘⇧G | Ungroup | | ⌘⌥G | Frame selection | | ⌘⌥K | Create component | | ⌘⇧K | Create component set | | ⌘⌥B | Detach instance | | ⌘⇧H | Toggle visibility | | ⌘⇧L | Toggle lock | | ] / [ | Bring to front / Send to back | | ⇧H | Flip horizontal | | ⇧V | Flip vertical | | ⌥⇧U | Boolean union | | ⌥⇧S | Subtract | | ⌥⇧I | Intersect | | ⌥⇧E | Exclude | | ⌥⇧F | Flatten | | Enter | Confirm or enter text | | Escape | Deselect / exit | ## Canvas | Shortcut | Action | | --- | --- | | ⌘= | Zoom in | | ⌘- | Zoom out | | ⌘0 | Zoom to 100% | | ⌘1 | Fit view | | ⌘2 | Zoom to selection | | ⌘⇧C | Eyedropper (pick a screen color) | | ⌘\ | Toggle the UI chrome | | ⇧A | Toggle auto-layout on the selection | Every menu action also shows its shortcut next to it — in the Edit menu or the right-click menu. --- # Writing effective prompts Starry treats your prompt as the source of truth for the interface. The AI works directly on the canvas — 100+ tools create shapes, set fills and strokes, manage auto-layout, build components and variables, run boolean operations, and export assets. ## Prompts that work - **Name the screen and its goal.** "A mobile login screen", "a SaaS pricing page". - **List the key components.** Inputs, buttons, cards, nav. - **State the layout intent.** Columns, centered, sidebar, grid. - **Give scale clues.** "Top nav 1440 wide, dark" or "2×2 card grid". - **Describe images, don't name them.** For photo placeholders, use an English search query: "aerial city skyline sunset", not "image1". Hint the orientation too. - **Short and iterative beats long and one-shot.** Generate a skeleton first, then refine section by section. ## How Starry builds 1. **Plan** — a quick text outline of the blocks, dimensions, and layout approach. 2. **Skeleton** — the whole page appears as gray placeholder blocks, like a wireframe with correct proportions. 3. **Fill** — each skeleton section is replaced, one by one, with the real content. 4. **Polish** — photo placeholders are filled from the stock library, and Starry verifies the result. After generating, Starry runs a built-in check for layout, accessibility, and design-system issues, and fixes the meaningful ones before showing the summary. ## Iterating in natural language Select any node and ask for a change — "make this button green", "add a subtitle above the title". Starry edits the real layer, not a redraw. ## Components & variants As you build, Starry assembles reusable components and groups variants into component sets. Switch variants from the inspector; later exports keep those tokens. **AI, not magic.** Starry generates editable structure you own, and checks its own work — but review the layers the way you would a teammate's pull request. --- # Auto layout & CSS Grid Auto layout is Starry's flexbox engine, powered by Yoga WASM — the same layout model React Native uses. Turn it on for a container and its children arrange themselves. ## Turn it on Select a frame, then in the inspector's Layout section toggle Auto layout (or press ⇧A). Choose a layout mode: Horizontal (row), Vertical (column), Wrap, or Grid. To wrap loose selections into a layout frame, select them and press ⌘⌥G. ## Spacing & alignment - **Gap** — spacing between children along the main axis. - **Padding** — space inside the container around its children. - **Justify** — alignment along the main axis: start, center, end, or between. - **Items** — alignment across the cross axis: start, center, end, or stretch. ## Sizing - **Hug** — the container shrinks to fit its children. - **Fill** — a child stretches to fill its parent (requires the parent to use auto layout). - **Grow** — a child expands to share remaining space among siblings. A fill child needs a fill-capable chain: nested auto-layout containers must set fill at *every* level to stretch. And hug/fill can't be circular — at least one child needs a concrete size. ## Wrap In Wrap mode, children flow onto new lines when they run out of room. Always set a row gap when wrapping, or the rows will touch. ## CSS Grid In Grid mode you define tracks instead of a single axis: set columns and rows (e.g. `1fr 1fr` or `200px 1fr`), column and row gaps, and place children explicitly with column start / row start / column span / row span. ## Stay on a grid Stick to a 4px spacing grid (4, 8, 12, 16, 24, 32, 48) for consistency. Inside a group *less* than between groups, which is less than between sections — and padding should be at least as large as the gap in the same container. **AI builds it too.** When Starry generates a screen it uses auto layout throughout — flex rows and columns, fill, gap — so the result is fluid and responsive. --- # Exporting code Designs are never stranded. Turn any artboard into clean, handoff-ready code with pixel-perfect parity to the canvas — from the editor, the CLI, or an AI coding tool. ## Supported outputs - **JSX** — React components, in two styles: `tailwind` (Tailwind utility classes) or `starryai` (the editor's own compact prop syntax). - **HTML** — standalone markup, ready to drop anywhere. - **SVG** — vector output of any selection. - **`.fig`** — native Figma file, for round-tripping with Figma. - **Design tokens** — your variable collections emitted as CSS variables, one value set per mode (light, dark…). - **PNG / JPG / WEBP** — raster exports with scale and quality control. ## Export from the editor Select the nodes you want, then use Copy as in the code menu: - **JSX** — selection as React JSX, straight to the clipboard. - **SVG** — vector markup of the selection. - **CSS** — a complete stylesheet: layout, fills, border radius, strokes, opacity, shadows and blur, rotation, blend modes, auto-layout, and typography. - **JSON** — the raw node structure. - **Node ID** — handy for scripting and MCP calls. ## Export from the CLI The CLI exports whole documents headlessly — perfect for CI. Formats: `png`, `jpg`, `webp`, `svg`, `pdf`, `html`, `jsx`, `fig` (default `png`). ``` starryai export design.fig -f jsx --style tailwind starryai export design.fig -f html starryai export design.fig -f png -s 2 -o design@2x.png starryai export design.fig -f jpg -q 85 --page "Pricing" ``` Options: `-o/--output` output path, `-s/--scale` (default 1), `-q/--quality` 0–100 for JPG/WEBP (default 90), `--page `, `--node `, `--style starryai|tailwind` for JSX (default `starryai`). ## Design tokens Your variables become real CSS custom properties. Starry walks every variable collection, resolves aliases, and emits one value per mode. ## Export with AI tools The same exporters are exposed as MCP tools (`get_jsx`, `export_svg`, `export_image`, `export_pdf`, `diff_jsx`), so Claude Code, Cursor, or Starry's own chat can read a design and produce code. The code-to-design path is also exact: JSX exports use the same syntax as the render tool. Run the CLI in CI to batch-export assets, lint for typography violations, and diff design changes automatically during code review. The output is yours — no lock-in. --- # Figma interop Starry reads and writes native Figma `.fig` files, so your existing designs open with full fidelity — vectors, text, styles, and components all transfer. ## Open a .fig file Drop a `.fig` onto the canvas, or open it from the file browser or your OS. Starry imports it natively — no conversion step. ## Copy & paste Select frames in Figma, copy, then paste into Starry (and back the other way). Nodes land exactly as-is. ## Edit in either tool Refine in Figma or in Starry — the open format keeps both readable. ## Then export to code Once your design lives in Starry, export it to code — JSX (Tailwind) or HTML. **Live and reversible.** The connection is open and two-way — move work back and forth as your team needs. --- # CLI reference The `starryai` CLI inspects, analyzes, and exports design files headlessly — no editor needed. Install it globally: ``` npm install -g @starryai/cli ``` ## Inspect documents - **tree** — print the node tree. - **find** — find nodes by name or type. - **node** — show detailed properties of a node by ID. - **query** — query nodes using XPath selectors. - **info** — show document info (pages, node counts, fonts). - **pages** — list the pages in a document. - **variables** — list design variables and collections. - **selection** — read the current selection from the running app. ``` starryai tree design.fig starryai find design.pen --type TEXT starryai node design.fig --id 1:23 starryai info design.fig ``` ## Analyze and lint - **analyze** — analyze colors, typography, spacing, and repeated clusters. - **lint** — lint documents for consistency, structure, and accessibility issues. - **formats** — list supported document and export formats. ## Convert and export - **convert** — convert a document to another writable format. - **export** — export to PNG, JPG, WEBP, SVG, PDF, HTML, JSX, or `.fig`. ## Script the editor - **eval** — execute JavaScript with the Figma Plugin API against the running app — every editor operation can be scripted. Combine with MCP and ACP for fully programmable pipelines: lint on every commit, extract tokens, and generate code from designs automatically. --- # Liquid Glass effect Liquid Glass is Starry's Figma-compatible glass effect: it turns any layer into a refractive, frosted glass panel with editable light, refraction, depth, dispersion, Splay, and Frost controls. The renderer matches Figma closely. ## Add the effect Select a layer, then in the right-hand inspector open Effects and add a Liquid Glass effect. You can also ask the AI — "make this card liquid glass". Two things happen automatically when Glass is applied: - **The layer's fill drops to 20% opacity** (if it was more opaque). - **Only one Glass effect per node.** ## Tune the look - **Light angle** (45°) — direction of the light that creates edge highlights. - **Light intensity** (50%) — how bright the highlights are. - **Refraction** (30%) — how strongly the background is bent through the glass. - **Depth** (20) — how thick the glass edge looks. - **Dispersion** (20%) — the chromatic red/blue tint along the edges. - **Splay** (50%) — how widely highlights spread out. - **Frost** (0) — blur radius of the background; the frosted, "matte" glass look. Glass samples whatever is already painted behind it — a busy, colorful background makes the effect pop. **One backdrop only.** Liquid Glass and Background Blur share the same backdrop — Starry renders only the first of the two. ## Figma round-trip Glass effects survive `.fig` import and export. --- # Design systems A design system is a style spec you hand to the AI: a Markdown document describing your tokens, spacing, typography, and component rules. The active design system is injected into every generation. ## Built-in presets - **Minimal** — pure white background, a single indigo accent, 4px spacing grid, and 6/8/16 radius. - **iOS HIG** — Apple's Human Interface Guidelines: system colors, the SF type scale, 44pt touch targets, and continuous (squircle) corners. - **Material 3** — Google's M3: the `#6750A4` primary palette, Roboto type scale, 4dp grid, and elevation levels. ## Switch the active system In the chat input at the bottom of the canvas, hover the book icon to open the design-system picker and switch instantly. ## Create your own - **Create** — start from a blank template and write your spec in Markdown. - **Edit** — custom systems are fully editable, with a live preview and an explicit save. - **Import** — drop in a `.md` / `.markdown` file. - **Export** — download it as a `.md` file. - **Delete** — remove custom systems (with confirmation). Write the way the presets do — concrete tokens, not vague adjectives. List the exact colors, a type scale with sizes and weights, a spacing grid, corner radii, and any component rules. **How it takes effect.** When you generate, Starry injects the active system into the AI's instructions, and the built-in `verify_design` check also flags design-system violations. --- # Components library The components library lists every reusable component and component set in the current document — search them, preview them, and drop instances onto the canvas. ## Browse and search Every entry shows its name, and when relevant: a variant summary, a description, a Library badge when it came from a team library, and a warning when variant values collide. ## Preview and insert Click an entry to open its details. Insert an instance three ways: click the + button, double-click the row, or open the details and click Insert instance. Instances land centered on the canvas and stay linked to their main component. ## Create components Select the layers you want to reuse, then choose Create component (or Create component set to group variants). The AI also assembles components as it builds. **Variants travel.** When you export code, component tokens are preserved. --- # Variables library Variables are named values you can bind to properties — colors, numbers, text, and booleans. Bind a fill to a color variable and change it in one place to update the whole design. ## Variable types - **Color** — palette swatch, for fills, strokes, and more. - **Number** — for spacing, radii, sizes, opacity… - **Text** — strings, e.g. a brand name or label. - **Boolean** — toggles, e.g. show/hide an element. ## Collections and modes The panel lists your variable collections. Each collection is shown as a table — one column per **mode**. Modes let the same variables hold different values per context, e.g. Light and Dark. ## Add and remove variables Click Create variable at the bottom and pick a type. Each row is a variable; set its value per mode in the cells. **One source of truth.** Bind properties to variables and switching modes (light ↔ dark) or editing a value updates every place that uses it. --- # MCP & editor tools Starry ships an MCP server so any AI coding tool can inspect, modify, and export your designs headlessly. 100+ tools, the same ones the built-in chat uses. ## Connect your editor Install the server, then point your client at it. Works with Claude Code, Cursor, Windsurf, Codex, and any MCP-capable tool. ``` npm install -g @starryai/mcp ``` ```json { "mcpServers": { "starryai": { "command": "starryai-mcp" } } } ``` For scripts and CI, run the HTTP server instead — it listens at `http://localhost:3100/mcp`. ## Coding agents in the chat Run Claude Code, Codex, or Gemini CLI right inside Starry's chat panel. They connect over MCP and use the same 100+ tools. ACP and external MCP clients can run at once; Starry serializes document writes so concurrent agents don't overwrite each other. The MCP server is optional. Starry is fully usable on its own; MCP just closes the loop with your codebase. --- # ACP & agents Starry can host a local AI coding agent — Claude Code, Codex, or Gemini CLI — and let it draw straight onto the canvas. This is powered by the Agent Client Protocol (ACP). ## What ACP is ACP (Agent Client Protocol) is the transport Starry uses to connect a local coding agent. Starry spawns the agent's CLI, injects an authenticated `starryai` MCP server as its tool source, and streams the whole conversation through the chat panel. The agent uses the same 100+ canvas tools. **ACP vs MCP.** MCP lets an external client (your editor) call Starry. ACP lets Starry call an agent and give that agent the canvas. They can run at the same time; Starry serializes document writes. ## Requirements - **Desktop app.** ACP spawns a local process, so it only works in the desktop app. - **Node.js with npm.** All three agents are installed as global npm packages. - **The agent CLI must be installed.** Starry probes each command with ` --version`. - **No API key in Starry.** The agent brings its own authentication. ## Install an agent ### Claude Code ``` npm i -g @agentclientprotocol/claude-agent-acp claude-agent-acp --version ``` ### Codex ``` npm i -g @zed-industries/codex-acp codex-acp --version ``` ### Gemini CLI ``` npm i -g @google/gemini-cli gemini --version ``` ## Connect it in Starry Open Settings → ACP. Installed agents appear with an "Installed" badge; if none show up, click Refresh status. 1. **Install an agent** — pick one and run its install command. 2. **Use it as a model** — open the model menu and choose the agent under "Your agents". 3. **Let it edit the canvas** — just chat. ## How a turn works When you send a prompt, Starry opens an ACP session, launches the agent, and hands it a design-context system prompt. The agent calls canvas tools; Starry applies the changes to the live canvas as real, editable nodes. ## Permissions Before certain tool calls the agent asks for permission; Starry shows a dialog you approve or reject. Unanswered requests auto-reject after 60 seconds. Choose how much to confirm in Settings → ACP: Always ask / Canvas actions auto-approved (default) / Fully auto-approved. ## Troubleshooting - **"No local agents detected."** Run the install command, then click Refresh status. - **Codex ACP can't read its model cache.** Update it: `npm i -g @zed-industries/codex-acp@latest`, then restart Starry. - **"AI agent error, please retry."** An ACP protocol-level error; check the agent's own CLI for auth or quota issues. --- # Local-first & collaboration Starry is local-first: your work stays on your machine by default and plays nicely with Git and the tools you already use. ## Files on your machine Every project is a plain `.pen` file — commit it, branch it, review it like code. The `.pen` format is Kiwi binary + Zstd + ZIP: open, not proprietary. ## Real-time collaboration Share a link to co-edit live. Peers connect directly over WebRTC — no server, no account. You see each other's cursors, selections, and presence; click an avatar to follow their viewport. ## Components & auto-layout Build reusable components and component sets, and lay everything out with flex or CSS-grid auto-layout via Yoga WASM. You stay in control of the source. Starry never claims ownership of your designs or the code it exports. --- # Model management Starry is model-agnostic: pick any provider, add your own API key, and start designing. ## Supported providers Starry ships with 20 providers out of the box: - **Global hubs** — OpenRouter: one key unlocks 100+ models. - **Direct providers** — Anthropic (Claude), OpenAI (GPT), Google AI (Gemini), DeepSeek, Z.ai (GLM), MiniMax. - **China-friendly providers** — 通义千问 (Qwen), 豆包 (Doubao), Kimi, 零一万物 (Yi), 百川智能 (Baichuan), 阶跃星辰 (StepFun). - **More global providers** — xAI (Grok), Mistral, Cohere, Perplexity. - **Bring your own endpoint** — OpenAI-compatible, Anthropic-compatible, or a fully custom provider with any base URL and model ID. ## Add a model Click Add model in Settings → Models. Fill in: API key, Model ID, Model name (optional), Base URL (for compatible/custom), Protocol & API type. Use Test connection to verify the endpoint and Multimodal test to detect whether the model accepts images. ## Edit and remove Click any model row to edit. Hover a row to reveal the remove (×) button — removal only appears when you have more than one model. ## Switch models Pick the active model from the model menu in the chat input. ACP agents show up under "Your agents" there, not in the model list. Tip: with OpenRouter, one key unlocks models from every provider — great for comparing Claude, GPT, Gemini, DeepSeek, Qwen and more. --- # Stock photo keys Starry can fill shapes with real stock photos when the AI generates an interface. This is optional — without keys, Starry uses placeholder colors. ## Add keys Open Settings → Stock photo. Two optional keys are supported: - **Pexels API key** (primary) — free from pexels.com/api. - **Unsplash access key** (alternative) — from unsplash.com/oauth/applications. ## How AI uses them When generating a screen, Starry's `stock_photo` tool places real Pexels images onto leaf shapes (Rectangle/Ellipse) — a hero image, a card thumbnail, a portrait avatar. All photos are fetched in one batched call, and you can hint the orientation: landscape (default), portrait, or square. If a key is missing or returns 401, Starry tells you to add or check it — it doesn't silently fall back to hand-drawn gradients. --- # FAQ - **Can Starry use AI to generate an interface?** Yes. Describe what you want in plain language and Starry's AI generates the interface — layout, components, and auto-layout — then exports production-ready code (React (JSX) and HTML). It's a real, editable, runnable UI, not a static mockup. - **Can I drop the exported code straight into my project?** Yes. Starry exports clean, production-ready code (React (JSX) and HTML) with layout parity to the canvas. The code is yours — drop it into your project, no lock-in. - **Can I bring in my existing Figma designs?** Yes. Starry imports native `.fig` files — vectors, text, and styles transfer faithfully, and you can keep refining in either tool. - **Can I use Starry from my own editor?** Yes. Starry runs an MCP server so AI coding tools like Cursor, Claude Code, and Codex can read and write your canvas — generate UI code from your editor without switching context. - **Is my design data safe?** Yes. Starry is local-first: files stay on your machine by default and work with Git. Cloud collaboration is optional and end-to-end encrypted. - **Is Starry available yet? How do I try it?** Starry is launching soon. Join the waitlist to get early access and be among the first to try it.