> ## Documentation Index
> Fetch the complete documentation index at: https://docs.totemlabs.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Your game online

> Connect Totem, publish one browser game, and receive a link you can share.

export const TerminalBlock = ({label = "Totem", state = "ready", children}) => <div className="totem-terminal">
    <div className="totem-terminal__head">
      <span>{label}</span>
      <span className="totem-terminal__state">{state}</span>
    </div>
    <div className="totem-terminal__body">{children}</div>
  </div>;

export const StepChip = ({number, title, color = "accent", children}) => {
  const colors = {
    accent: "var(--totem-accent)",
    tool: "var(--totem-tool)",
    score: "var(--totem-score)",
    live: "var(--totem-live)"
  };
  return <div className="totem-step" style={{
    "--totem-step-color": colors[color] || colors.accent
  }}>
      <span className="totem-step__number" aria-hidden="true">{number}</span>
      <div>
        <p className="totem-step__title">{title}</p>
        <div className="totem-step__body">{children}</div>
      </div>
    </div>;
};

export const StatusBadge = ({state = "available", children}) => {
  const labels = {
    available: "Available",
    "early-access": "Early access",
    planned: "Planned",
    internal: "Internal draft"
  };
  return <span className={`totem-status totem-status--${state}`}>
      {children || labels[state] || state}
    </span>;
};

<StatusBadge state="available" />

By the end of this page, your browser game will have a Totem link that you can open and share.

## Before you start

You need:

* A Totem account.
* A GitHub account.
* A built browser game with `index.html` at the root.
* Claude Code, Cursor, Codex, or another MCP-capable AI tool.

<StepChip number="01" title="Sign in and claim your handle" color="accent">
  Sign in to the Totem dashboard with GitHub. Choose a handle using 2–39 lowercase letters, digits, or single hyphens. It cannot start or end with a hyphen.
</StepChip>

Your shareable links use this shape:

```text theme={null}
https://play.totemlabs.io/<handle>/<game-slug>
```

If you rename your handle later, old links keep working.

<StepChip number="02" title="Create an API key" color="tool">
  Create a key in the dashboard. It begins with `ttm_`. Copy it when it appears. Totem shows the plaintext once and cannot retrieve it later.
</StepChip>

Store the key in your MCP client's secret store. Do not paste it into your game files or commit it to Git.

<StepChip number="03" title="Connect your AI tool" color="score">
  Add Totem as an HTTP MCP server, then set its Authorization header to `Bearer <your Totem API key>`.
</StepChip>

```json MCP JSON theme={null}
{
  "mcpServers": {
    "totem": {
      "type": "http",
      "url": "https://api.play.totemlabs.io/mcp"
    }
  }
}
```

Use your client's secure header or secret setting for the key:

```http theme={null}
Authorization: Bearer ttm_<your-key>
```

You can also give your AI tool a standing instruction for future game sessions:

```markdown CLAUDE.md / AGENTS.md theme={null}
## Put my game online with Totem

When my game is ready, use Totem to put it online.

Follow every step Totem gives you.

Add a square 512×512 PNG named icon-512.png at the build root — it becomes the game's icon.

When the game is online, show me the game link.

Do not share passwords, secret keys, or private files.
```

<StepChip number="04" title="Tell your AI tool to publish" color="accent">
  Open the project that contains your finished game and ask your AI tool to put it online.
</StepChip>

<TerminalBlock label="Your AI tool" state="ready">
  <span>> put my game online</span>
</TerminalBlock>

Your tool creates the game, uploads a gzip-compressed tar archive, publishes it, and returns the result. Totem's MCP server explains each next step as it goes.

<StepChip number="05" title="Open your game link" color="live">
  A successful publish response includes the game link. Open it before sharing it with players.
</StepChip>

```text theme={null}
https://play.totemlabs.io/moonforge/afterlight
```

## Complete example

| Item             | Example                                          |
| ---------------- | ------------------------------------------------ |
| GitHub account   | `moonforge-dev`                                  |
| Totem handle     | `moonforge`                                      |
| Game name        | `Afterlight`                                     |
| Game slug        | `afterlight`                                     |
| Build entry file | `index.html`                                     |
| Final link       | `https://play.totemlabs.io/moonforge/afterlight` |

The creator signs in, claims `moonforge`, creates and safely stores a `ttm_` key, connects the MCP server, and asks the AI tool to publish the current build. Totem returns the final link only after the build passes validation and goes live.

## Next

* Read [What Totem can host](/build-requirements) before publishing a new engine or export format.
* Read [How publishing works](/publishing) for the upload, validation, and go-live sequence.
* Use [When publishing fails](/troubleshooting) when Totem returns an error code.