Live demos — powered by Surf

See Surf in action

Two real apps — a design tool and a bookstore — fully agent-ready via Surf commands.

Demo 01

PixelForge

A design tool where every canvas action is a typed Surf command. Agents can build designs without a browser or vision model.

Open liveSource
pixelforge-pearl.vercel.app

Surf commands exposed

canvas.create— Create a new canvas with dimensions
canvas.addRect— Add a rectangle with fill, stroke, shadow
canvas.addText— Add text with font, size, color
canvas.setGradient— Apply linear or radial gradient fill
canvas.setShadow— Add drop shadow to element
canvas.setFont— Load any Google Font
canvas.setBlur— Apply blur effect
canvas.setBorderRadius— Round element corners
canvas.addImage— Add image from URL
canvas.undo— Undo last action
canvas.exportPNG— Export canvas as PNG

Pipeline example

Build a design in one request
POST https://pixelforge-pearl.vercel.app/surf/pipeline
{
  "steps": [
    { "command": "canvas.create",      "params": { "width": 800, "height": 600 } },
    { "command": "canvas.addRect",     "params": { "x": 100, "y": 100, "width": 300, "height": 200, "fill": "#0057FF" } },
    { "command": "canvas.setGradient", "params": { "type": "linear", "from": "#0057FF", "to": "#00C9B1" } },
    { "command": "canvas.addText",     "params": { "text": "Made by an agent", "fontSize": 32, "color": "white" } }
  ]
}

Prompt your agent: “Fetch the Surf manifest from pixelforge-pearl.vercel.app and build a gradient logo.”

Demo 02

Surf Bookstore

A full e-commerce backend — search, cart, checkout, reviews — all as typed Surf commands. Run it locally with Docker in under 30 seconds.

18 books10 commandsAuth + rate limitingSSE events
View source

Surf commands exposed

books.search— Search by title, author, or genre with price filters
books.get— Get detailed info about a book by ISBN
books.featured— Staff picks and bestsellers
reviews.list— All reviews for a book with average rating
reviews.add— Post a review (auth required)
cart.add— Add a book to your cart by ISBN
cart.get— View cart contents and subtotal
cart.remove— Remove a book from cart
cart.checkout— Complete purchase and clear cart (auth required)
store.info— Store details — hours, location, genres in stock
booksreviewscartstore

Checkout pipeline

search → cart.add → checkout in one round-trip
# Full shopping experience in one pipeline (~47ms total)
POST http://localhost:3000/surf/pipeline
Authorization: Bearer demo-token-123

{
  "steps": [
    {
      "command": "books.search",
      "params": { "query": "Dune", "maxPrice": 20 },
      "as": "results"
    },
    {
      "command": "cart.add",
      "params": { "isbn": "$results.books.0.isbn", "quantity": 1 }
    },
    {
      "command": "cart.checkout"
    }
  ]
}

Prompt your agent: “Fetch the Surf manifest from localhost:3000. Search for Dune, add it to the cart, and checkout. Token: demo-token-123.”

Run locally in 30 seconds

Docker quick-start
# Clone and run the Surf Bookstore demo locally
git clone https://github.com/hauselabs/surf
cd surf/apps/demo

docker build -t surf-bookstore .
docker run -p 3000:3000 surf-bookstore

# Discover commands
curl http://localhost:3000/.well-known/surf.json

# Browse books
curl -X POST http://localhost:3000/surf/execute \
  -H "Content-Type: application/json" \
  -d '{"command":"books.featured"}'

# DevUI → http://localhost:3000/__surf

Includes a DevUI at localhost:3000/__surf — browse all commands interactively in your browser.

Build your own

Both demos are open source. Add Surf to your site in minutes.

Read the docs →Integration guidesGitHub ↗