Skip to main content
A browser preview is a private link to an web application that is running on Devin’s machine. When Devin starts a dev server in a session, it can expose the port and give you a link that you can open in your web browser. Previews work with any tech stack. If it serves HTTP on a port, Devin can preview it. The app and its data stay on Devin’s machine - nothing is uploaded to a third party service.
This page is about previews in Devin sessions. For previews of a local dev server in Devin Desktop, see Devin Desktop Previews.

​
Opening a preview

Devin opens a preview when it starts an app you should look at. You can also ask for one, for example “preview the app”. Devin posts an Open preview card in the chat. Click it to open the app in the Preview tab of the session. Cmd-click, Ctrl-click or middle-click the card to open the preview in a new browser tab instead. In a session started from Slack, the thread gets an Open preview link.

​
Preview URLs

A preview URL looks like this:
The name comes from the name Devin gives the preview. The id is random, so the URL can’t be guessed. The URL belongs to the session. It stays the same if Devin restarts the app or moves it to another port. A preview in a different session gets a different URL. Preview URLs also support individually addressing ports devin exposes on the machine using an alternate syntax:
These ports must be exposed by Devin, but once they are, they become generally accessible.

​
Who can open a preview

Previews are private. Nothing is exposed to the public internet. Anyone who opens a preview URL must be signed into Devin. After that, a preview follows the access of its session. If you can send messages to the session, you can open its preview. By default, that is everyone in your organization who can use Devin sessions, so you can send the link to a teammate and it just works. If the session is limited to its owner or to specific people, only those people can open the preview. Everyone else sees a page saying the preview is unavailable.

​
What you can do in the Preview tab

The Preview tab works like a small browser. It has buttons for forward, back, reload, zoom, find in page, and a device size switch for desktop, tablet and mobile widths. You can also annotate things on the page and tell Devin what to change. When using the “Selecting” button in a session, simply click an element or drag over an area, add a note, and send it to the chat. Devin gets the element you picked along with your note.

​
Apps with more than one port

A preview can cover several ports, such as a frontend on one port and a backend API on another. Devin lists all of them when it opens the preview, and the preview opens on the first one. The Ports menu in the Preview tab switches between them. Your frontend does not need to know about the preview URL. If the page calls http://localhost:8000, the preview sends that request to port 8000 on Devin’s machine. A service worker that the preview installs rewrites these requests in your browser, and WebSocket connections are handled the same way. Because the request stays on the preview’s own address, you don’t need to change CORS settings. This only reaches ports that Devin has exposed for the preview.

​
What your app sees

Your server sees the request as coming from localhost. The preview sets the Host and Origin headers to localhost before the request reaches your app, so dev servers that check the host name work without extra configuration. Devin keeps using localhost too, both when it runs the app and when it tests it. A few things behave differently from running the app on your own computer:
  • Service workers. The preview uses its own service worker, so your app can’t register one. If your app is a PWA, turn the service worker off in development or accept that automatic port rewriting might not work.
  • Cookies. Cookies that your app sets inside the Preview tab are kept separate from cookies set when the preview is open in its own browser tab. If you sign in to your app in one place, you may need to sign in again in the other.
  • Sign-in with an identity provider. Your browser is on the preview URL, not on localhost. A provider such as Microsoft Entra ID, Okta or Google rejects the sign-in if only localhost is registered as a redirect URL. See Tunneling Ports.
  • HTTPS dev servers. Your browser sees Devin’s certificate, not your server’s. See HTTPS Loopback.

​
Tunneling Ports

Some services only work when your browser is really on localhost. The most common one is sign-in through an identity provider. The provider only accepts the redirect URLs you have registered, and most development setups register http://localhost:<port>. A preview has its own URL, so the provider turns it down. For these cases, you can tunnel the port from Devin’s machine to your own computer. The app then opens at http://localhost:<port> in your browser, the same as if it were running on your computer, and the provider accepts it. There are two ways to tunnel a port:
  • Devin Desktop. Open the session in Devin Desktop and forward the port from there.
  • SSH. Run devin forward <session> 3000, or pass -L 3000:localhost:3000 to devin ssh or plain ssh. See Forward ports.
A tunnel only reaches the computer that runs it, so it is not a link you can send to a teammate. Use a preview for sharing and a tunnel for the cases that need localhost. If you would rather stay on the preview, you can add the session’s preview URL to the provider’s list of redirect URLs, or give the app a development sign-in that skips the provider. Devin can also sign in at localhost in its own browser. See Interactive Browser.

​
HTTPS Loopback

A dev server that serves HTTPS on its port works in a preview with no extra setup. Devin detects that the port speaks HTTPS and connects to it that way. Your browser does not see your server’s certificate. The preview URL is served with Devin’s certificate. The connection to your dev server is made on Devin’s machine, and your certificate is not checked there, so self-signed development certificates work without warnings. This only matters in a narrow set of cases, such as an app that expects the browser to see one specific certificate.

​
Sleeping sessions

Devin’s machine goes to sleep when the session is idle. You don’t need to wake it yourself. Opening the preview wakes the machine, and the app comes back at the same URL. The first page load can take a few seconds. The machine stays awake while the preview is in use and goes back to sleep about 5 minutes after the last request. A preview stops working when the session is archived or ends.

​
Previews and Devin Apps

A preview is tied to one session. It is meant for looking at work in progress, reviewing a change, or showing a teammate what Devin built. For most work, a preview is all you need. Devin Apps are for a different job: an internal tool, dashboard or similar app that your team keeps using after the session’s work is done. If that is what you are building, you can ask Devin to publish the preview as a Devin App. Devin Apps are served the same way as previews, from Devin’s machine, but they get a stable URL and their own comprehensive sharing settings.