The Airship UI: Building a D&D Campaign Home
The Airship UI
Why is it that most D&D campaign websites look like a 1998 geocities wiki crossed with a tax form? We have the entire modern web at our disposal, and yet we still organize our fantasy worlds in nested accordion menus.
I wanted something different for my group's campaign, Zephyr's Oath (I'm still waiting on approval from the DM on the name, but we're rolling with it for now). Specifically, I wanted a digital home base that didn't just store information, but actually felt like the airship we spend all our time on.
So, I built Zephyr's Oath.
The goal was full immersion. If you need to check the inventory, you don't go to an "Inventory" tab β you go to the Cargo Hold, and the UI looks the part. When you view the character pages, the art and the layout are deliberately styled to match the ship's aesthetic. Itβs an exercise in taking a theme and refusing to break character, even for utility.
Of course, the problem with highly stylized, immersive UI is that finding specific lore from six months ago can become a nightmare. You don't want to click through three decks of an airship just to remember the name of that one shopkeeper in the port town.
To fix that, I wired up a chatbot powered by Cloudflare. But it doesn't just know the lore by magic. I was thrilled to find out that Archivist has an MCP (Model Context Protocol) server that I actively use to download and grep through session notes, campaign content, characters, NPCs, and inventory data.
I take all that context and inject it into a full RAG (Retrieval-Augmented Generation) system. I use Cloudflare Vectorize to store the embeddings alongside the raw data in Cloudflare D1. When you ask the bot a question, Cloudflare Workers AI handles the retrieval and generation, while Cloudflare AI Gateway routes and manages the inference calls.
You just ask the bot a question, and it digs through the data to give you an answer. It's like having a very fast, slightly robotic quartermaster who actually took notes during session zero (me, it's me).
It turns out that if you want a tool that your players will actually use, you have to make it fun to look at. A little bit of theatrical design goes a long way.