Getting Started

Quick Start

This guide takes any static browser game — plain HTML, Vite, or any bundler output — and puts it live at https://<your-game>.metaloot.app with player sign-in and multiplayer already provisioned. Total time: a few minutes.

Prerequisites#

  • Node.js 20+ — the CLI and SDK both require it.
  • A Metaloot account — sign up free at metaloot.app.
  • A browser game that builds to static files with an index.html at the root (or nothing at all — you can start from an empty folder).

1. Install the CLI and Sign In#

npm install -g @metaloot/cli   # or use npx @metaloot/cli
metaloot login

metaloot login opens your browser, you approve the machine, and a CLI token is stored locally at ~/.config/metaloot/credentials.json. Check who you are with metaloot whoami. On CI or a headless machine, use a scoped API token instead — see API Tokens.

2. Deploy#

From your game's folder:

metaloot deploy

The CLI:

  • Runs your build if there is one, then finds the output folder (dist or build by default; override with --dir, or --dir . for plain HTML projects; skip building with --no-build).
  • Uploads the files and atomically flips your site live at https://<name>.metaloot.app.
  • Creates the game's page on the portal and provisions auth and multiplayer on the same domain.
  • Writes a metaloot.json next to your package.json recording the game id, slug, and output dir — commit it so future deploys (and CI) target the same game.

Re-run metaloot deploy any time to ship an update — deploys are atomic and usually live in under ten seconds. Use --game <game-id> to target a game created earlier on the portal, or --name "My Game" to set the title on first deploy.

3. Add Player Sign-In (Optional)#

Your deployed domain already serves the auth endpoints and a sign-in widget. From game code, the session is one call away:

game.js
const session = await window.metaloot.session;
if (session.signedIn) {
  console.log("player:", session.user.id, session.user.name);
} else {
  window.metaloot.signIn(); // sends the player to Sign in with Metaloot
}

The player id is stable across sessions — key saves and profiles on it. To hide the injected sign-in widget and build your own UI, add <meta name="metaloot-auth-widget" content="off" /> to your HTML. Full details in Authentication.

4. Go Multiplayer (Optional)#

Rooms, presence, and message relay are already running on your domain — no package to install:

game.js
import { joinRoom } from "/__metaloot/multiplayer.js";

const room = await joinRoom("lobby");
room.on("join", (player) => console.log(player.name, "joined"));
room.on("message", ({ from, data }) => handleInput(from, data));
room.send({ kind: "move", x: 3, y: 7 });

See Multiplayer for presence, shared room state, and the signed-out case.

5. Add Game Assets (Optional)#

Generate a 3D model from a prompt and stream it straight into your game:

metaloot assets generate --prompt "low-poly treasure chest" \
  --name "Treasure Chest" --visibility public --wait
game.js
import { loadAssetObjectUrl } from "@metaloot/sdk";

const url = await loadAssetObjectUrl("treasure-chest-1a2b3c4d");
new GLTFLoader().load(url, (gltf) => scene.add(gltf.scene));

More in Assets — rigging with animations, curated packs, and private assets.

Where to Go Next#

Hosting your game elsewhere? You can still use Sign in with Metaloot via the @metaloot/auth adapter — see Authentication. Multiplayer and the asset proxy require Metaloot hosting.