a4b810620f
New top-level nav section documenting OpenPencil's programmability: - CLI: inspecting, exporting, analyzing, scripting (eval) - JSX Renderer: elements, style props, visual diffing - MCP Server: moved from Reference (setup + tool list) - AI Chat: setup, 87 tools, example prompts - Collaboration: room sharing, cursors, follow mode Restructured sidebar: - Programmable added to nav bar (7 locales) - Context Menu moved from User Guide to Reference - MCP and eval-command removed from Reference
48 lines
1.9 KiB
Markdown
48 lines
1.9 KiB
Markdown
---
|
|
title: AI Chat
|
|
description: Built-in AI assistant with 87 tools for creating and modifying designs.
|
|
---
|
|
|
|
# AI Chat
|
|
|
|
Press <kbd>⌘</kbd><kbd>J</kbd> (<kbd>Ctrl</kbd> + <kbd>J</kbd>) to open the AI assistant. Describe what you want — it creates shapes, sets styles, manages layout, works with components, and analyzes your design.
|
|
|
|
## Setup
|
|
|
|
1. Open the AI chat panel (<kbd>⌘</kbd><kbd>J</kbd>)
|
|
2. Click the settings icon
|
|
3. Enter your OpenRouter API key
|
|
4. Choose a model (Claude, GPT-4, Gemini, etc.)
|
|
|
|
No backend, no subscription — your key talks directly to OpenRouter.
|
|
|
|
## What It Can Do
|
|
|
|
The assistant has 87 tools across these categories:
|
|
|
|
- **Create** — frames, shapes, text, components, pages. Renders JSX for complex layouts.
|
|
- **Style** — fills, strokes, effects, opacity, corner radius, blend modes.
|
|
- **Layout** — auto-layout, alignment, spacing, sizing.
|
|
- **Components** — create components, instances, component sets. Manage overrides.
|
|
- **Variables** — create/edit variables, collections, modes. Bind to fills.
|
|
- **Query** — find nodes, read properties, list pages, fonts, selection.
|
|
- **Analyze** — color palette, typography audit, spacing consistency, cluster detection.
|
|
- **Export** — PNG, SVG, JSX with Tailwind classes.
|
|
- **Vector** — boolean operations, path manipulation.
|
|
|
|
## Example Prompts
|
|
|
|
- "Create a card with a title, description, and a blue button"
|
|
- "Make all buttons on this page use the same border radius"
|
|
- "What fonts are used in this file?"
|
|
- "Change the background of the selected frame to a gradient from blue to purple"
|
|
- "Export the selected frame as SVG"
|
|
- "Find all text nodes with font size less than 12"
|
|
|
|
## Tips
|
|
|
|
- Select nodes before asking — the assistant knows what's selected.
|
|
- Be specific about colors, sizes, and positions for precise results.
|
|
- The assistant can modify multiple nodes in one message.
|
|
- Use "undo" in the editor if you don't like the result.
|