Skip to content
Tools— browse docs
On this page

Step 1: What you're building

An oracle-roll tool that calls a real external API from its own api/ folder — five steps, no account or key required to start.

Let's say you're making a world where you're running your group's campaign down The Salt Road and you needed to settle an uncertain outcome — does the bridge hold, does the caravan get spotted — with an answer nobody at the table could argue was fudged. Here's how you build that.

You've built collaborative documents in Getting Started's tutorial — every field syncing through Yjs, entirely inside your browser. An oracle roll is different: the fairness only means something if the number came from somewhere other than Math.random() sitting right there in your own source, readable by anyone who opens dev tools.

Here's where you're headed:

oracle roll — where you're headed
src/tool.tsx, running
Starting the example…

Press Ask the oracle. Wait half a second — that's the shape of every network call you'll write in this build: press a button, wait, get an answer, sometimes fail. (This one calls a mock right here in your browser, not the real random.org. Step 3 says exactly why, and shows you the real version.)

You will learn

  • How to give a tool a second, server-only folder — api/ — that never enters the browser bundle
  • How to call your own endpoint from the UI with useApi, and handle it when the call fails
  • Why process.env is always empty in a tool, and where a real secret lives instead
  • How config.secrets and config.fetch turn "don't leak this" into something the platform enforces

How this works

Same shape as every build on this site: each step is a small, editable version of the tool above, seeded with whatever the last step left you with. A couple of steps show you server code this browser tab genuinely cannot run — the callout right there says so, and shows you what you can run instead. Stuck? Every editable step has a Show me button.