Floor 6: The Arena (Web Interface)

Files on this floor: web/src/views/NewGameView.vue, web/src/party.ts

CORDULA’S LOG, FLOOR 6. Under Pioneer Square the old storefronts are still there, buried, and the Fremont Troll sits at the end of the arena like a judge who has seen too much. The audience could see us now. We could not see the show. We needed what the viewers had: the sheet, the rolls, the choices, all on one screen. Once we had it, Barnaby performed. I did not know an octopus could hit his marks. The ratings did.

System AI: “Floor 6. Time to show the audience what you built. Pick who speaks for the party, point it at port 8009, and press Enter. No pressure. Only billions of viewers.”

Floor Objective

You’ve built a Narrator with custom tools, an MCP server and A2A agents. Test it in real life with our basic web interface.

Web Interface

System AI: “The arena is a public HTTPS page that calls your localhost. The browser allows it because 127.0.0.1 is you. Nobody else is invited. Yet.”

Once all your agents and MCP servers are running, use the web interface at https://bryanchasko.github.io/aiRPG-seattle-dungeon-crawl/.

The interface lives in this repository under web/ (Vue 3 + Vite). To run it on your own machine instead, with Node.js 22.12 or later:

cd aiRPG-seattle-dungeon-crawl/web
npm ci
npm run dev

Connect Your Narrator

NEW ACHIEVEMENT UNLOCKED!

[OPENING NIGHT JITTERS]

Reward: You received a [Bronze Box]. Inside: one character sheet, one Start button, and a stage light pointed directly at you.

In the web interface:

• Pick who you play. The party is set: Cordula Vance (she/her, Human (Seattle Native), Amphibious Breacher) is the default, or speak as Barnaby (he/him, Uplifted Giant Pacific Octopus, Benthic Dragoon), the party leader. Shelly the geoduck and Chonks the spiny lumpsucker come along as companions either way
• In Server URL, enter the URL shown in your Narrator Orchestrator terminal: http://127.0.0.1:8009
• Click Enter the Dungeon

The web interface runs in your browser and talks to the Narrator running on the same machine. Browsers let this HTTPS page reach http://127.0.0.1:8009 because it is localhost.

The character panel shows the sheet the Character Agent saved on Floor 5, with GROOVE and MANA under the six ability scores. If you skipped the Floor 5 registration, the first turn registers the party. Pick a suggested action, or type your own: “Challenge the Rain-Shell Tourist Pod to a dance-off” works, and so does “Have Barnaby sneak us past them”. This floor’s opponent is the Pitch-Deck Founder, with the Fremont Troll judging. Type this to face them:

Challenge the Pitch-Deck Founder to a dance-off in the Underground, with the Fremont Troll judging. Run all three rounds.

Check: the panel shows Cordula with GROOVE 17 and MANA 8 (or Barnaby with 11 and 11), and the first turn comes back as a notification, three choices and a battle log, within about ten seconds.

CORDULA: The screen came up in a dead storefront under Pioneer Square: my sheet on the left, the battle log down the side, three choices at the bottom, one of them a terrible idea, as advertised. For the first time since the pier folded I could see what the viewers saw. I did not love it. Barnaby, on the other hand, found the camera within a second and turned a color I can only call stage-ready.

Monitor performance: watch your terminal logs to see how your Narrator processes requests:

Processing request...
Tool #1: a2a_client
Tool #2: roll_dice
response='...' actions_suggestions=[...] details='...' dice_rolls=[...]
INFO:     127.0.0.1:53210 - "POST /inquire HTTP/1.1" 200 OK

Customization ideas:

• Modify system prompts to change your Narrator’s personality
• Add new custom tools for different mechanics
• Integrate additional MCP servers for new capabilities

CORDULA: The Pitch-Deck Founder wanted a dance-off for our “attention share.” The Fremont Troll judged from the end of the arena, one stone eye on each of us. I called Endurance and held a drill cadence until the founder ran out of slides. Barnaby closed on Presence with a full-body light show, timed to the beat, hitting every mark. The log on the screen showed every roll. The ratings ticker in the corner went vertical. Barnaby noticed. He is going to be insufferable about it.

SYSTEM DESIGN, LAYER 6: THE HUD. In a LitRPG the reader sees the System through its interface: the floating character sheet, the notification boxes, the battle log. The web interface is that HUD, and it can only exist because Floor 5 forced the Narrator into StoryOutput: response becomes the notification, dice_rolls the battle log, actions_suggestions the three choices (one of them always a terrible idea). Design the data first and the interface follows. See The System.

Troubleshooting

System AI: “Safari has not been tested. The System does not test Safari. Chrome or Firefox, Crawler.”

Browser:

• Do not run this in Safari: it has not been tested
• Use Google Chrome or Mozilla Firefox, both work

“Connection Refused” error:

• Verify your Narrator is running on port 8009
• Check that no firewall is blocking the connection

“Invalid Server URL” message:

• Make sure the URL is exactly http://127.0.0.1:8009, with no space or path after the port
• Check for typos in the URL entry

Slow response times:

• Monitor your local machine’s resource usage
• Check your internet connection stability
• Consider optimizing your agent’s model configuration

Side Passages (optional)

CORDULA: The arena keeps two scores nobody showed us: the Hype the audience gives, and the deals the sponsors want.

• The Hype Meter, sidequest: a hook turns tool and model events into Hype, and a meter in the web interface shows it
• Sponsor Interrupt, sidequest: an interrupt pauses the turn so you accept or refuse a sponsor deal in the browser

Floor Clear

Floor cleared, Crawler. You’ve connected your Narrator to a web interface and tested it end to end.

Loot you’re keeping:

• Connecting your local Narrator to the web interface
• Testing your agent’s responses through the web interface
• Following your agent’s tool calls in the terminal

Stairwell: Explore Floor 7 for advanced enhancements you can add to your system.

NEW ACHIEVEMENT UNLOCKED!

[OPENING NIGHT]

Reward: You received a [Bronze Box]. Inside: a browser tab, a character sheet, and the faint smell of stage fright.

System AI: “It works end to end. Do not tell the sponsors it was easy.”