Please note, this feature is our first version of Play AI beta. We’re eager to hear your thoughts and continue shipping updates!
Overview
Play’s new AI View is a web-based view for displaying and interacting with AI-generated results created when you use Play’s /generate prompt. When you submit a prompt, Play uses Claude to generate structured outputs that can be modules, pages, or complete multi-screen flows. These results are rendered within the AI View using a web-based preview layer, allowing you to review and experiment with the AI generated content directly on the Play canvas.
In essence, the AI View bridges Play’s integrated design editor with LLM–powered generation, offering a similar experience to “vibe coding” tools like Lovable — but directly within the Play ecosystem.
Just like with native iOS controls, you can enable Interaction Mode in the macOS editor to interact with your AI View without viewing your prototype.
Generate AI View
Create an AI View by prompting Play AI with the /generate command.
/generate a cart page with order summary
/generate a graph with BPM
/generate a todo list app
/generate a real-time stock ticker strip
/generate a circular progress ring with steps
Edit AI View
You can continue to edit the AI View using prompts. Click the edit icon or double click the element to open the AI View popup, which includes a text field for continuous prompts.
Connect AI View to Play Prototype
AI Views can connect directly to your Play prototype through outlets. Within the AI View editor, you can assign an outlet to any layer in the HTML hierarchy, making that layer available as a target in an AI Event trigger.
To create an outlet, hover over a layer and click the + icon that appears. Give the outlet a clear, recognizable name.
In your AI Event trigger, select that outlet as the target. You can then choose how the event is triggered—when the layer is tapped or panned—and add any resulting actions that should occur in your prototype.
