AI Panel Interface

Panel States

The AI panel displays different states during operation:

Idle State: Ready for your input. When there's no chat history, four suggested prompts are displayed to help you get started. Ready for your input. When there's no chat history, four suggested prompts are displayed to help you get started. Click a suggested prompt to populate the input field. Prompts are entered but not automatically submitted.

Processing State: AI is analyzing your request. You'll see status indicators like "Fetching..." or "Analyzing..."

Editing State: AI is actively modifying your prototype. A banner appears at the bottom of the canvas showing "ProtoPie AI is taking control" with a [Stop] button to cancel if needed.

Chat Behavior

• Submitted prompts appear at the top of the chat area
• Chat history is not saved across sessions—closing the tab or resetting clears history
• To start fresh, click the reset button in the panel header

Using @ Mentions

Type @ to mention specific layers in your prompt. This provides better context to the AI and generates more precise interactions compared to describing layers by name alone.

Example: "Make @ButtonLayer turn gray when tapped"

Response Controls

After AI responds, you have several options:

👍 / 👎 Feedback: Rate response quality to help improve the AI.

Copy Response: Copies the entire response content (including code blocks) to your clipboard.

Rewrite: Regenerates a different response for the same prompt.

• Only available for the latest response
• Disappears if you send a new prompt or make manual edits

AI Response Types

Studio AI provides different response formats depending on your request:

Text Responses

Plain text explanations with formatting support, including headers, body text, links, inline code, blockquotes, and tables. Used for explanations, documentation answers, and general responses.

Mermaid Diagrams

AI can generate visual diagrams using Mermaid.js syntax when you ask it to draw flowcharts, user flows, or other diagrams. The flowcharts are based on existing objects and interactions from the workspace. Diagrams render as interactive images with options to:

• Copy code: Copy the Mermaid.js source code
• Download as image: Save the rendered diagram as .svg

Formula Blocks

Code blocks specifically for ProtoPie formulas, displayed with:

• Syntax highlighting
• Copy button
• How to use link to ProtoPie formula documentation

Code Blocks

General code examples (JSON, JavaScript, etc.) with language label, syntax highlighting, and Copy button.

Resource Cards

When AI references documentation, it displays interactive resource cards:

Official Articles: ProtoPie icon, article title and breadcrumb path, "Official Article" label

YouTube Videos: Video thumbnail, "Youtube Video" label

External Links: Globe icon with URL

Multiple resources display in a carousel with pagination.

Plan Block

For interaction creation, AI shows its planning process:

While planning: Displays "Planning..." with expandable content showing the full analysis.

When complete: Collapses to "Planned" with checkmark. Content includes:

• Goal: What AI intends to create
• Structure: Elements to be used
• Creation Order: Step-by-step execution plan
• Interactions: Trigger → Response mapping

Task Block

Shows execution progress for interaction creation:

In progress: "Working..." with spinning icon

Done: "X tasks done" with checkmark

Each task shows the action type (Add, Edit, Delete, etc.) and affected elements. Checkmarks indicate completed tasks, spinners show in-progress tasks.