Skip to main content
This is an optional extension of the Running Agents on Sandboxes tutorial. Complete the main tutorial first.
Our starter image is what starts when you start a devbox. You get the following packages available to your devbox:Core tools: curl, ca-certificates, jq, sudo, git
Extras: dnsutils, iputils-ping, less, vim, wget, rsync, gh
Python stack: Python 3.12, pip, uv
Node stack: Node 22.15.0, npm, Yarn 1.22.22 via corepack

​
Overview

Instead of just pushing code changes, you can start a Next.js development server and create a tunnel to share a live preview link in your pull request. This allows reviewers to see the changes in action before merging.
1

Install dependencies and start the dev server

Install the project dependencies and start a Next.js development server. Make sure to bind to 0.0.0.0 so the tunnel can access it from outside the devbox.
# Create a named shell and navigate to the project directory
shell = devbox.shell("preview-shell")
await shell.exec("cd ~/sample-todo-nextjs")

# Install dependencies
await shell.exec("npm install")

# Start the Next.js dev server in the background
server_command = await shell.exec_async(
  "HOSTNAME=0.0.0.0 npm run dev"
)
print("Next.js dev server started")
2

Enable a tunnel to the dev server

Enable a tunnel on the Devbox to access port 3000 where the Next.js dev server is running. This will give you a public URL that you can share.
# Enable a tunnel on the devbox
tunnel = await runloop.api.devboxes.enable_tunnel(
    devbox.id,
    auth_mode="open"
)

# Construct the preview URL for port 3000
preview_url = f"https://3000-{tunnel.tunnel_key}.tunnel.runloop.ai"
print(f"Live preview URL: {preview_url}")
3

Post the preview link to the PR

Post the preview URL as a comment on your pull request so reviewers can view the changes live.
import os
from github import Github  # Requires PyGithub library

# Initialize GitHub client
g = Github(os.environ["GH_TOKEN"])
repo = g.get_repo("runloopai/sample-todo-nextjs")
pr = repo.get_pull(pr_number)

# Post the preview link as a comment
comment = f"🚀 Live preview of changes: {preview_url}\n\nYou can view the updated color scheme in action at the link above."
pr.create_issue_comment(comment)
print(f"Posted preview link to PR #{pr_number}")
The tunnel URL will remain active as long as the devbox is running. Reviewers can click the link to see your changes in real-time. If you suspend the devbox, the tunnel will be unavailable until you resume it and re-enable the tunnel.

​
Next Steps