Play: Create Better Apps 4+

Introducing Play AI

The future of design isn’t just about AI generating code — it’s AI and creators working together in one seamless environment. With this release, we’re introducing the first phase of Play AI, built directly into Play — not a separate product.
Use AI to design, prototype, generate views, and export to Xcode — all from inside the Play editor.

What’s new
- Prototype with Natural Language: Use /interaction and describe interactions like “on tap, open Profile in a sheet” or “make this draggable,” and Play AI builds it instantly.
- Design & Apply Effects: Quickly add components, apply effects like Liquid Glass, or make system-wide changes with a single command.
- Generate with AI View: Instantly create screens, widgets, or flows from prompts — all directly within your project.
- Select and Rename: Use Play AI to avoid grunt work
- command & select (grunt work)
- content (image & text)

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.

Availability
Play AI is currently in beta and available to all users on any plan. During the beta phase, we’ve set a daily credit limit, which may change as we continue testing and tuning performance.
After beta, Play AI will transition to a tiered credit system — with different credit amounts included for each paid plan.


Other Updates

Set Color Action
Set any fill—background color, text color, symbol tint color, etc.—using a *Set Color action*. Colors can be set with RGBA, HSL, or HSB values, with a Hex code or variable, or with a color style or the color picker.

Haptic Updates
- Adjust playback for custom haptics in Set Haptic actions.
- Disable haptics through interactions using a Mute Haptic action.

Other Improvements
- We’ve reworked many of our prefabs! You’ll see slightly different names in the prefabs list.
- New properties are available in the expression editor for text, textfields, buttons, and sliders.
- Alerts and action sheets can now be triggered from nav bar items.
- Code export now supports tab bar and nav bar.