Mordecai: Dungeon Guide meets LLMs
Imagine an AI chat bot that was also a world weary, grizzled dungeon guide. All you need is Princess Donut by your side and you’re ready to take down the Syndicate from the inside in the relative comfort of your heart covered boxer shorts.
Learning Goals
- Understand the current landscape of tooling in the Javascript world
- Get something up and running as fast as possible
- Create a person LLM chatbot in a custom tone and style
Links
Stack/Tooling
- Typescript
- React
- Next.js for routing
- Postgres, hosted on Neon
- Built/deployed on Vercel
- Vercel AI Gateway as an LLM proxy
- Claude Code VS Code extension
- Gemini for image creation, prompt engineering
Main Takeaways
Modern JS tooling is very good, even the rough edges are smoother than they were.
Structured natural language is the new API. This deserves more thought and experimentation.
Reflections
I used to build a lot of Slack chatbots back in the day, so an LLM chat UI seemed like a good first project.
My goal was to get something live as fast as possible, so I used a Next.js starter project. I got this up and running on Vercel pretty quickly.
A lot of what I found reminds me of webdev from the late 2010s with better ergonomics. Typescript is fully first class, Vercel gives an mature UI experience without sacrificing the CLI, DB hosting with Neon was a breeze to set up.
I used Gemini to generate the logo. I used that logo to have Claude generate a markdown style guide for me. It took a few iterations, but once the style guide was in a good place, I could use Claude Code make the styling updates I wanted. This was a pretty easy process with a bit of back and forth. The resulting style updates were written back to the style guide for future reference. I am intrigued with structured natural language as an API. This is something I want to think more about.
Editing tone of the LLM was easy, the system prompt was stored in it’s own file. I used meta-prompting with Gemini to get the voice right. This was a process I’ve used with custom GPTs, which is essentially what this project is.
Vercel’s AI Gateway was a nice abstraction to work with. It was easy to choose the models the user has access to. An AI gateway like this seems like a great way to do quality checks across models and providers. I’m interested in LLM quality testing, so I want to come back to this.
I like that Javascript APIs and frameworks have evolved to the point that they work more seamlessly between front and backend development. Using the same framework (Next.js) and native the fetch API along with native Request and Response objects are good examples. I’m sure there rough edges I haven’t encountered yet, but this is the closest I’ve seen Javascript get to it’s promise of seamless transitioning from front and backend work.
How could I finish without mentioning the REPLs. Oh my God the REPLs! The progress on CLI tooling has been really unsung. I used to love colored output or a CLI loading bar… Claude’s full fledged TUI blew me away.
This was a good start, but I’m going to move on. I’ll see if I can build something without starting from an example project next.