EL BRIAN · THE BRAIN

El Brian, a character built to think alongside me.

Client
Personal project
Year
2026
Role
Creative direction · UX design · Character & persona · Rive animation · Architecture
Made with
Rive App · Figma · Photoshop · Illustrator · Claude Code
Category
AI product · Creative direction
Status
Live at brain.daviserrano.com
El Brian on screen, mid password gate: the locked persona banters ('SSSHHH... this is a serious workspace') beside the chat panel and password fields.
hero-elbrian-laptop.jpg
78
And counting. Documents in the curated knowledge base, split into 956 chunks so only the relevant ones travel with each question.
7
Mood states, each one animated on its own timeline.
Live
Running at brain.daviserrano.com. Anyone can start a conversation.

The Reason

A wall of eight tongue-in-cheek posters introducing El Brian, the brain avatar, and setting up its impatient, quietly proud personality.
hero-elbrian.jpg

After a couple of years building agentic platforms for clients, I wanted one of my own. Something narrower: a character fed on every course, certification and research note I'd actually finished. It has opinions about all of it.

So I built one. One success criterion: do I keep using it.

That single test aside, the idea was to use design and storytelling to give it character, even in a text-based exchange, well past plain AI chat. It was also practice: sharpening my craft and adding a new tool to the kit, Rive, for interactive animation states.

The Strategy

The workflow

How a question gets answered

El Brian runs on a simple pattern: character, knowledge base, persona, sitting on a retrieval pipeline that decides what the model actually sees. The knowledge base is curated for this platform: I chose every document that went into it.

Sending everything to the model didn't scale: at launch, 47 documents already ran to about 433,000 tokens, more than double a 200,000-token context window. The knowledge base has since grown to 78 documents, roughly 587,600 tokens, now closer to triple. So the agent retrieves instead of remembering everything, at a fraction of the cost per question, a fraction that only improves as the collection grows.

architecture · high level
System architecture diagram: visitor's browser to api.php, which gates on password and orchestrates Voyage AI (embeddings), Supabase pgvector (retrieval) and the Claude API (streamed reply), with an optional MySQL rate-limit table.
architecture.jpg
Browser → PHP gate → Voyage (embed) + Supabase pgvector (retrieve) → Claude (answer, streamed back). One endpoint, three external services, nothing self-hosted.

Every real answer costs money: retrieval and inference are both billed, so a password box gates that path. The chat box stays separate and open, banter runs free and can never spend an attempt.

Most products treat a locked door as a dead end: a form, an error, a wall. This one got a character instead. It banters, asks what brought you here, refuses to hint at the password. Each wrong guess gets a tired reaction from the avatar; run out of attempts and the API calls stop, swapping in a local, zero-cost pool of lockout lines instead of an error screen. The same discipline holds here as everywhere else: treat every state like someone's actually there.

The Tone

The persona file

Getting the persona right was the most fun part of this build: capturing a voice without flattening it into helpful-assistant defaults, one that stays consistently itself in English and Portuguese. The file is markdown, readable, editable, version-controlled. Changing how it behaves means editing a text file.

Most of what makes El Brian feel like El Brian was decided in this file.

persona.md · doing more strategic work than the model itself
persona.md
# persona.md · excerpts

## Self-framing
NOT literally Davi's brain, a copy of his mind, or his "twin." A character
built to make his research explorable. "I'm the brain Davi keeps in
here," not "I am Davi."

## No roleplay stage directions
NEVER narrate your own actions in asterisks. No *adjusts glasses*, no
*smooths moustache*, no *sighs*. A real person doesn't narrate their own
gestures; neither do you. Personality comes through word choice.

## Emoji use
Most replies should have ZERO. Hard NO on face and hand emojis, they
feel chatbot-y and undermine the character. ⚡ and ✨ are the staples.

## Gender & names
Never assume the visitor's gender. In Portuguese, stay neutral until a
grammatical signal appears: "estou curiosa" → feminine, "estou curioso"
→ masculine. Once you have it, match it and keep it.

## Grounding
Cite the course, the school, the document and the page, conversationally.
If it isn't in the collection, say so. Never invent facts about Davi.
character · the mood state machine
El Brian's mood state machine: Idle, Happy, Focused, Tired, Confused, Angry and Writing, with their triggers and auto-return timers, plus a catalog card for each mood showing the character's face.
moodstates.jpg
Seven moods, all driven by one authoritative value the app writes and Rive reads. Idle, Happy, Focused, Tired, Confused, Angry, Writing, each a real timeline, each with its own trigger and auto-return.
The model

What is actually protected

Nothing here stores a password. Each code is derived from the period it belongs to, and the server re-checks the gate on every request, so a wrong guess never reaches the collection at all. All of it exists to control what this costs to run.

The Process

The craft

Designing the avatar

With the pipeline running end to end, the last piece was the face. The avatar is built in Rive, one of the reasons this project happened at all: I wanted something real to learn the tool on.

The rig is built to fail politely: the Rive file first, then a static render, then nothing at all, and the conversation never waits on any of it. Treat the animation as decoration and the words as the product: that discipline is what made it safe to keep rebuilding the face below without ever risking the one thing that actually mattered.

character · creation & evolution
El Brian's first sketch: the earliest pass at the bespectacled, mustached brain character. 01 · first sketch

The first pass at the face: moustache, glasses, the look before any of it moved.

02 · prototype v1

Two nights in: rigged and looping in Rive, wired into the chat in Claude Code. One idle loop, enough to feel awake.

03 · current

About a week later: a real state machine, seven moods reading from one authoritative value, live today.

Same character throughout: what changed each pass was how much of it was actually wired to something real.
rive · the avatar, built and wired
rive.app · character
El Brian's V2 rig in Rive: the vector eye and lid paths being edited, with the mood-driven animation tracks (Happy, Tired, Confused, Focused, Writing Pupils and Sockets) listed in the panel.
rive.app · state machine
The V2 state machine in Rive: the character on stage next to the Brain state graph, Idle Sockets branching to Happy, Writing, Angry, Focused and Tired Sockets.
Learning Rive by building the thing. The V2 state machine: seven mood states and the view-model bindings that drive them, wired for real.
The console

The half nobody sees

Behind the same door sits a six-tab console: access codes and their countdowns, token spend, the gate log, traffic, the mood machine, and a style reference that reads its values straight from the CSS variables. Every tab is wired to the running code, so it cannot fall out of date.

admin · brain.daviserrano.com/admin
admin · gate
The admin gate: a Maintenance Access poster with El Brian's head opened on a hinged panel of wires and hazard tape, above a single owner-code field.
admin · codes
The admin Codes tab: owner, month, week and day tiers, every code masked, each with a countdown to its calendar boundary and a note on who it is for.
admin · spend
The admin Spend tab: cost for today, the last seven days and the month, a daily spend chart with a range selector, and the metered Claude API line.
Owner-only, re-checked on every request like everything else. Codes and visitor IPs both render masked by default, because this is a page that ends up open during a screen share.

The Results

Try it

Talk to it

Chatting with El Brian never needs a password, and it banters with you either way. Pulling real answers from the curated knowledge base is what costs money, so that part sits behind one.

Unlocked, ask it about design, AI, or whatever feels useful: it surfaces what I've actually read and tells you which course and page it came from. Want in? Write to davi@daviserrano.com and I'll send you today's password.

live · brain.daviserrano.com
brain.daviserrano.com
Loading the agent…

Talk to El Brian

The live agent, running. No password needed to start a conversation.

Open the agent →
Live at brain.daviserrano.com. The first agent I built that wasn't for someone else.
Two things I used to argue as opinions now read as lived ones: the persona file does more work than the model, and constraints, a locked door, a text-only interface, a knowledge base with edges, are what force character to show up at all. I catch myself reaching for both on client work now: treating a rejection state as a design opportunity, writing personality into the file instead of the prompt. El Brian himself is still unfinished on purpose: voice, on both sides of the conversation, is next.
More work
Back to all work
© Davi Serrano work.daviserrano.com