Chat Playgrounds
Use chat playgrounds to build and preview applications in your AWS account.
Use AI chat playgrounds to build, preview, and deploy applications directly within your Amazon Web Services (AWS) account.
About the Playground Workspace
An AI chat playground is an isolated development workspace with a running sandbox. monolayer provisions and connects the sandbox in your AWS account.
This guide describes how the playground workspace, the agent sandbox, the live preview, and the Visual Inspector function.
The workspace has two primary areas:
- AI Chat Panel: Lets you send prompts, select models, and review execution history.
- Live Preview: Shows a live preview of your running application inside a browser frame.
The Agent Sandbox
An agent sandbox is an isolated EC2 instance sandbox where your coding agent runs.
- Automated Builds: When you prompt the agent to make a change, it operates directly on your source code within this sandbox—editing files, installing dependencies, and running builds.
- No Local Setup Required: The sandbox automatically hosts and runs the application live. Any changes made by the coding agent are instantly compiled and served directly to your preview window.
- Isolated & Secure: The EC2 instance runs inside your own AWS account.
Live Preview
The App Preview is an interactive, live web container located alongside your playground AI chat. It lets you see and interact with your application immediately as the coding agent implements features, modifications, and bug fixes.
Rather than switching browser tabs, you can view changes, navigate pages, and visually inspect design properties in one unified workspace.
Features
The top navigation bar of the App Preview provides tools to control and interact with your live application:
- Browser Navigation: Use the Back and Forward buttons to navigate through your app's session history.
- Instant Reload: Click the Reload button to trigger a hard refresh of the preview frame and pull in the latest changes.
- URL Path Display: View the exact relative path of the page you are currently viewing.
- Open in New Tab: Open the current path in a new browser tab to test responsiveness or use external developer tools.
- Maximize / Minimize: Click the toggle icon to collapse the chat panel and expand the preview to fill your screen, or shrink it back to continue chatting.
- Visual Inspector: An overlay that mounts directly inside your running application.
Visual Inspector
The Visual Inspector is a design and styling overlay that mounts directly inside your running application.
You can use the Visual Inspector to select, tweak, and experiment with your design visually:
- Select and tweak CSS: Hover and click on any element in your preview to inspect its current layout, spacing, and styles. You can adjust margins, colors, borders, and typography visually, and write notes.
- Apply changes to source code: Push your visual tweaks or comments directly to your coding agent.