Skip to main content
The Preview is your app, live, running on the session’s machine and framed in the workspace next to the chat. It opens by itself the moment the agent starts a server that serves a page, and it reloads at the end of every turn so you always see the finished work. To show the agent a part of the page or draw on it, see Point at and draw on your app. For the other tabs around it, see The workspace.
The Preview tab of the workspace, in a tab strip that reads Plan, Preview, Shell, Database, Secrets, README.md and server.js, with the round + button, the GitHub button, Share, the Publish pill and the files button at its right. The toolbar below shows, from left to right: three device icons for Desktop, Tablet and Mobile, with Desktop highlighted; Back and Forward arrows; Reload preview; a port pill reading node · 3000 with a blue dot and a down chevron; and the Logs button. At the right end sit a pen for Draw, a dashed pointer for Select and the Open in new tab icon. The Harbor Sailing School app fills the frame: its header with the logo, Our classes, Before you sail and a My bookings button; the line A little adventure is on the horizon over the headline Good days start on the water., then Find your first tack or your next adventure. There's a place on board for you.; a sailboat photo with a Meet you at the harbor. label and a round LESS LAND MORE SEA badge at its corner; This week's classes, with a count of 3 and a date pill reading Oct 26 – Nov 1, 2026 and This week, above the filters All classes, Beginner, Intermediate and All levels; and three class cards, Beginner Dinghy, Intermediate Keelboat and Sunset Sail, with their dates, times and instructors Maya Chen, Oliver Brooks and Sophie Laurent.

The Preview's toolbar: the device switch on the left, the app's own navigation and port in the middle, and the tools on the right.

​
How does my app get here?

Alpha watches the session’s machine for anything listening on a port. Once something listens, a Preview tab joins the workspace. When a port’s / answers with a web page, the tab opens on it. You never switch the Preview on yourself, because it follows what is actually running. Three rules decide what you see: If nothing listens for a few seconds, the tab goes away until something does. A restart doesn’t make it blink. Closing the tab with its × only hides it, and the app keeps running. While the app runs, the + menu brings the tab back.

​
Use the toolbar

The toolbar works like a small browser for your app. Back and Forward move through the app’s own history, single-page routes included, and never move Alpha’s own address bar. People you share the session with see the same Preview, without Draw, Select or Edit.

​
Switch ports

When your app runs more than one server, such as a web front end and an API, the port pill lists them all. Ports that serve a page come first, with a check on the one on screen. The rest sit under “Also listening · no page to frame”, each with its reason.
The Preview's port menu open under the port pill, which reads node · 3000 with a blue dot and an up chevron, between the Reload button and the Logs button. The menu holds one row, node · 3000, with a check mark at its right. Behind the menu, the app's Our classes and Before you sail links show through.

With one server running, the menu holds one port, checked as the one on screen.

Click a row (“Open it anyway”) to frame that port regardless.

​
Test other widths

Pick Tablet · 834px or Mobile · 390px to narrow the frame to that width. The app’s own layout rules apply, so you see its real phone layout, not a scaled-down desktop. Desktop fills the workspace again.
The Preview tab with its toolbar: the Mobile device icon is highlighted, the port pill reads node · 3000, and Draw, Select and Open in new tab sit at the right. The Harbor Sailing School app sits in a narrow, rounded frame centred on the dark workspace. At this width the header holds only the Harbor Sailing School logo and a My bookings button, without the Our classes and Before you sail links. Under the line A little adventure is on the horizon, the headline Good days start on the water. spans the frame, followed by Find your first tack or your next adventure. There's a place on board for you. and Small crews. Fresh air. A new perspective. The sailboat photo, with its Meet you at the harbor. label and a round LESS LAND MORE SEA badge at the corner, sits below the text instead of beside it. Under the photo come the MAKE ROOM FOR THE SEA label, the This week's classes heading with its count of 3, and the date pill Oct 26 – Nov 1, 2026 · This week.

Mobile narrows the frame, and the app's phone layout takes over.

To check a width the switch doesn’t offer, use Open in new tab and resize that browser window.

​
Sign in through another site

Sign-in pages such as Google’s refuse to be shown inside another page. So when your app sends the frame to another site, such as a sign-in or a checkout, Alpha opens that site in a window of its own. If you clicked something in the app, the window opens by itself. Otherwise click Continue to that site. Finish there, and the app picks up in the Preview. If the frame ends up on another site’s page anyway, a pill along the bottom says so, such as “weather.example.com is outside the app.”, with Open in new tab and Back to the app. If sign-in keeps looping in the frame, use Open in new tab, where cookies behave as in any browser tab. To add sign-in to your app, see App sign-in.
Each port has its own preview address, and that address is the only key. Anyone you give it to can use your app while the machine is awake, including any data the app shows without sign-in. Share the address only with people you’d show the app to.

​
Read the logs

Click Logs to open a panel under the frame. Console shows the app’s browser console and uncaught errors, with a “Page loaded” divider at each load. Beside it is one tab per server the agent started, showing that server’s log. Drag the panel’s top edge to resize it, up to 70% of the Preview’s height. With the edge focused, ↑ and ↓ resize it too. People you share the session with see Console only.

​
What happens while the machine wakes?

A machine sleeps once you’ve been away for about 30 minutes, and opening the session wakes it. See Sleep, wake and reset. Grey placeholder bars cover the frame until the app is back, usually within seconds. Where your Alpha keeps saved copies, the Preview doesn’t wait. It shows the app at once from a copy taken as the machine went to sleep, with a note along the bottom. When the live app is ready, it fades in at the same address and scroll position, without a reload. Edit waits for the live page. The copy holds only what your app shows a visitor who isn’t signed in. A signed-in page is never saved, so it can’t reach anyone else. If you’re signed in to your app, you see the signed-out copy until the live app takes over.
If you don’t see a saved copy while a machine wakes, it isn’t turned on for your Alpha. The Preview waits for the live app instead.

​
Why does the Preview show a message?

The frame, or a preview address opened in its own tab, says why there’s no app. Most fixes are one sentence to the agent. More are in Troubleshooting and FAQ.
The agent starts servers through Alpha, which reports success only once the Preview can reach the port. Those servers keep running between turns and through sleep. See Inside a session’s machine.

​
Next steps

Point at and draw on your app

Click a button in the Preview and the agent gets its selector, its styles and, where it can tell, its source file.

Add sign-in to your app

Turn on sign-in for your app and see who has signed up in the Auth tab.

Sleep, wake and reset

What keeps the machine awake, and what to do if it won’t come back.

Publish your app

Give the app a permanent address that doesn’t depend on the session’s machine.