Build a Same-style app

~25 min TypeScript Python

What you’re building: Clone and rebuild a UI from a screenshot or URL.

Primitives you’ll use: Sandbox, Agent and harness, Deployment (App Engine)

Agent prompt

Start with your coding agent

Choose what you are building. The brief names the product it is modelled on, maps it onto MIOSA, and lists the exact commands. Copy it into OSA, Claude Code, Codex, or Cursor.

Template coming soon

1 What are you building?

Leave it empty and your agent will propose 3 names, pick one, and use it for resources, the domain and branding.

3 Configure

Harness
Model
Scale
Extras

4 Your prompt

Reference product

Same, by Same (https://same.new): an AI tool that clones and rebuilds a website or interface from a URL or screenshot.

How it works: The user supplies a URL or screenshot; the agent inspects the page (layout, styles, assets) and generates a working project that matches it.

Key capabilities:

Rebuild a UI from a URL or screenshot

Editable, working code

Live preview

Publish the result

Build an app LIKE Same. It is not affiliated with Same: do not copy its name, branding or assets. Open https://same.new first, confirm the capabilities above, and note anything this brief missed.

How it maps onto MIOSA

Each project is an isolated workspace -> one MIOSA sandbox per project

The agent writes and edits the code -> agent runs (`miosa prompt`, client.runs) streaming events against the project sandbox, files written inside it

Live preview while it builds -> a sandbox preview URL (`miosa preview create`)

One-click publish -> a MIOSA deployment (`miosa deploy create`), immutable and versioned

Inspecting the source page -> a MIOSA computer (persistent Linux desktop with a browser) or a headless browser in the sandbox, plus screenshots to compare

Goal

Build an app like Same on MIOSA, as a multi-tenant product sold to my customers. Each customer is isolated in its own workspace; I meter usage and bill them.

Product name: propose 3 product names, pick one, and use it for resource names, the domain and branding. Until you pick, <product-name> stands for it in the commands below.

Scale: a prototype.

Set up

npm i -g @miosa/cli

miosa login && miosa whoami

miosa api-key create <product-name>-key --preset agent

export MIOSA_API_KEY="msk_u_..."

miosa org

miosa connections add models # your own model provider key

Resources

Sandbox: the agent's isolated Linux workspace

miosa create <product-name>-box --template nextjs --wait

Agents and harnesses: what a run can use

miosa agent harnesses

Deployment: a stable, versioned URL

miosa deploy create --from-sandbox <product-name>-box --name <product-name> --wait

Data and storage

Your control plane stores projects (id, owner, sandbox id, preview URL, deployment id, status), chat messages per project, and a version list (snapshot id, deployment version). The generated app's files live only in the project sandbox's /workspace.

Generated apps are stateless unless the user asks for data; add a per-project Postgres at that point.

Auth and tenancy

Your organization is the platform; customers never get a MIOSA account, they sign into YOUR product. One workspace per customer, created as they onboard, isolates their machines, runs and data.

miosa workspace create <product-name>-customer-1

Tag every machine and run with the customer id in `metadata`, and never query across customers. Meter usage per customer with GET /api/v1/usage and set who pays with PUT /api/v1/bill-to (/docs/platform/usage-and-billing).

Agent loop

Harness: OSA is MIOSA's own harness and works with any model provider you connect, including your own model.

Model: Anthropic (Claude). Calls use my own provider key (`miosa connections add models`); MIOSA platform keys are never used.

Sessions: one chat per project or conversation, so the agent keeps its context. The first `miosa prompt` on a sandbox uses `--new-chat` (a chat id is printed); every later turn passes `--chat <chat-id>`. `--reuse chat` keeps one new machine per chat so files persist.

Streaming: follow a run with `miosa run follow <run-id>` or client.runs.streamEvents(run.id), and steer or stop it with `miosa run steer` and `miosa run interrupt`.

The harness works INSIDE the project sandbox: it writes files, runs the build and starts the dev server there. Do not build locally and upload the result.

When the build fails, feed the compiler output back as the next turn on the same chat ("fix the build") until it exits 0.

Steps

1. Create one sandbox per project, inside the customer's workspace, named from the project id.

miosa create <product-name>-box --template nextjs --wait

Check: The sandbox is running and `miosa exec` returns output.

2. Hand the user's prompt to the agent. It writes the files into /workspace, installs and builds.

miosa prompt --sandbox <product-name>-box --harness osa --model <anthropic-model-id> --chat <chat-id> "Build what the user asked for under /workspace; run npm install and npm run build; fix errors until it builds"

Check: /workspace holds the app and `miosa exec <product-name>-box -- npm run build` exits 0.

3. Start the app as a background process and open a preview the UI can embed.

sandbox.process.start("npm run dev", { name: "web", cwd: "/workspace" })

miosa preview create <product-name>-box 3000 --name web

Check: The preview URL answers 200 and shows the app; it updates when the agent edits files.

4. Iterate: every follow-up message is another turn on the same chat. Snapshot before each change so the user can go back, and fork to compare two approaches.

sandbox.snapshots.create("before <change>")

sandbox.fork()

Check: The previous version can be restored, and a fork leaves the original untouched.

5. Publish. A server-rendered app becomes a dynamic deployment; a static export publishes from /workspace/out.

miosa deploy create --from-sandbox <product-name>-box --name <product-name> --dir /workspace --port 3000 --run-command "npm start" --wait

Check: The deployment returns a public_url that answers, and it is a new immutable version.

Limits and costs

Set an explicit `timeout_sec` (1h suits interactive building) and `idle_timeout_sec` so abandoned projects pause and stop billing; persistent sandboxes keep /workspace and installed dependencies.

Use a published template (nextjs) instead of reinstalling dependencies for every project.

One sandbox per active project is the cost driver: pause idle ones, destroy abandoned ones.

Prototype: keep it to one machine at the default size, skip replicas and custom hostnames you do not need, and delete everything when you are done.

Acceptance checks

The app builds and the preview shows it.

Each project is isolated in its own sandbox.

The published URL answers and an earlier version can be restored.

Each customer is isolated in its own workspace and usage is metered against them.

Everything it created can be deleted with nothing left running.

What your choices added

  • Build a product. a workspace per customer, per-customer metering and bill-to
  • Agent suggests a name. proposes 3 product names and picks one; commands use <product-name>
  • Harness: OSA. dispatches with `miosa prompt --harness osa`
  • Model: Anthropic. your own provider key
  • Prototype. one small machine, no extras, easy to delete

What you're building

an AI tool that clones and rebuilds a website or interface from a URL or screenshot Modelled on Same, by Same.

The user supplies a URL or screenshot; the agent inspects the page (layout, styles, assets) and generates a working project that matches it.

Primitives you'll use: Sandbox · Agent and harness · Deployment (App Engine)

  • Rebuild a UI from a URL or screenshot
  • Editable, working code
  • Live preview
  • Publish the result

Source: same.new. Same is a trademark of its owner; this guide is not affiliated with or endorsed by them.

What you need on MIOSA

Each row is one thing to create before you start. The number matches the step that uses it.

  1. Organization and API key Scopes every call; a workspace key is all a worker needs. miosa api-key create app-key --preset agent Docs
  2. Sandbox The isolated Linux workspace the agent writes code and runs commands in. miosa create app-box --template nextjs --wait Docs
  3. A workspace per customer Isolates each customer’s machines, deployments, and data as they onboard. miosa workspace create customer-1 Docs
  4. Branding and white-label Your name and slug on previews, deployments, and the desktop; customers never see MIOSA. miosa org Docs
  5. Usage metering and bill-to Usage per customer, and which account pays for new machines. miosa org bill Docs
  6. Agent and harness Turns a prompt into work: pick the harness and model a run uses. miosa agent harnesses Docs
  7. Deployment (App Engine) Publishes the app to an immutable, versioned URL with rollback. miosa deploy create --from-sandbox app-box --name app --wait Docs

Architecture

How it maps onto MIOSA

Each project is an isolated workspace -> one MIOSA sandbox per project

The agent writes and edits the code -> agent runs (`miosa prompt`, client.runs) streaming events against the project sandbox, files written inside it

Live preview while it builds -> a sandbox preview URL (`miosa preview create`)

One-click publish -> a MIOSA deployment (`miosa deploy create`), immutable and versioned

Inspecting the source page -> a MIOSA computer (persistent Linux desktop with a browser) or a headless browser in the sandbox, plus screenshots to compare

Data and storage

Your control plane stores projects (id, owner, sandbox id, preview URL, deployment id, status), chat messages per project, and a version list (snapshot id, deployment version). The generated app's files live only in the project sandbox's /workspace.

Generated apps are stateless unless the user asks for data; add a per-project Postgres at that point.

Auth and tenancy

Your organization is the platform; customers never get a MIOSA account, they sign into YOUR product. One workspace per customer, created as they onboard, isolates their machines, runs and data.

miosa workspace create same-customer-1

Tag every machine and run with the customer id in `metadata`, and never query across customers. Meter usage per customer with GET /api/v1/usage and set who pays with PUT /api/v1/bill-to (/docs/platform/usage-and-billing).

Agent loop

Harness: OSA is MIOSA's own harness and works with any model provider you connect, including your own model.

Model: Anthropic (Claude). Calls use my own provider key (`miosa connections add models`); MIOSA platform keys are never used.

Sessions: one chat per project or conversation, so the agent keeps its context. The first `miosa prompt` on a sandbox uses `--new-chat` (a chat id is printed); every later turn passes `--chat <chat-id>`. `--reuse chat` keeps one new machine per chat so files persist.

Streaming: follow a run with `miosa run follow <run-id>` or client.runs.streamEvents(run.id), and steer or stop it with `miosa run steer` and `miosa run interrupt`.

The harness works INSIDE the project sandbox: it writes files, runs the build and starts the dev server there. Do not build locally and upload the result.

When the build fails, feed the compiler output back as the next turn on the same chat ("fix the build") until it exits 0.

Steps

  1. Create one sandbox per project, inside the customer's workspace, named from the project id.

    miosa create same-box --template nextjs --wait

    Check: The sandbox is running and `miosa exec` returns output.

  2. Hand the user's prompt to the agent. It writes the files into /workspace, installs and builds.

    miosa prompt --sandbox same-box --harness osa --model <anthropic-model-id> --chat <chat-id> "Build what the user asked for under /workspace; run npm install and npm run build; fix errors until it builds"

    Check: /workspace holds the app and `miosa exec same-box -- npm run build` exits 0.

  3. Start the app as a background process and open a preview the UI can embed.

    sandbox.process.start("npm run dev", { name: "web", cwd: "/workspace" })
    miosa preview create same-box 3000 --name web

    Check: The preview URL answers 200 and shows the app; it updates when the agent edits files.

  4. Iterate: every follow-up message is another turn on the same chat. Snapshot before each change so the user can go back, and fork to compare two approaches.

    sandbox.snapshots.create("before <change>")
    sandbox.fork()

    Check: The previous version can be restored, and a fork leaves the original untouched.

  5. Publish. A server-rendered app becomes a dynamic deployment; a static export publishes from /workspace/out.

    miosa deploy create --from-sandbox same-box --name same --dir /workspace --port 3000 --run-command "npm start" --wait

    Check: The deployment returns a public_url that answers, and it is a new immutable version.

Limits and costs

Set an explicit `timeout_sec` (1h suits interactive building) and `idle_timeout_sec` so abandoned projects pause and stop billing; persistent sandboxes keep /workspace and installed dependencies.

Use a published template (nextjs) instead of reinstalling dependencies for every project.

One sandbox per active project is the cost driver: pause idle ones, destroy abandoned ones.

Prototype: keep it to one machine at the default size, skip replicas and custom hostnames you do not need, and delete everything when you are done.

Acceptance checks

The app builds and the preview shows it.

Each project is isolated in its own sandbox.

The published URL answers and an earlier version can be restored.

Each customer is isolated in its own workspace and usage is metered against them.

Everything it created can be deleted with nothing left running.

Next steps

Was this page helpful?