Skip to main content
This is an optional extension of the Running Agents on Sandboxes tutorial. Complete the main tutorial first.

​
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

Create a tunnel to the dev server

Create a tunnel to port 3000 where the Next.js dev server is running. This will give you a public URL that you can share.
# Create a tunnel to port 3000
tunnel = await devbox.net.create_tunnel(port=3000)
preview_url = tunnel.url
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 and the tunnel is open. 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.

​
Next Steps