Text Is Not Enough
I built a profile-aware AI chatbot that returns rendered React components — not just text — with 7 tools, 16 personalities, and zero hallucinations.
The Default Nobody Questions
Chatbots always come back as text. You ask a question, you get a paragraph. Maybe some bullet points if you're lucky. Text is not a good user experience. It's a default that nobody questions.
I questioned it.
Where It Started
The first version was a Gemini web builder default. Functional. Generic. It answered questions about my resume the way every portfolio chatbot does — a wall of text with some keywords bolded. I used it for about a day before I started rebuilding it.
The rebuild wasn't cosmetic. I threw out the wrapper and built a production system. Vercel AI SDK on the frontend. Gemini Flash Lite on the backend. Rate limiting. Content moderation. Token budgets. Error boundaries. The kind of infrastructure you'd expect in a shipped product, not a portfolio experiment.
One Knowledge Base, Sixteen Personalities
Here's what made it interesting. Each of the 16 profiles on this portfolio has its own chatbot personality. Same knowledge base. Different emphasis.
Ask the AI engineer profile about my experience, and the chatbot leads with multi-agent systems, LLM integrations, prompt engineering. Ask the engineering manager profile the same question, and it leads with team growth, delivery velocity, hiring. The suggestions it offers are different per profile. The tone shifts. The priorities shift.
At build time, a script reads every profile YAML and bundles it into a single profile-contexts.json file. The Lambda handler loads the right context based on which profile the visitor is viewing. Same facts, different framing.
The Chatbot Returns Components, Not Text
This is the part that matters most.
When you ask about my skills, the chatbot doesn't describe them. It renders an interactive skills card — the same component you'd see on the profile page. Ask about a specific job, and you get an experience card with the company, role, achievements, and tech stack. Ask about metrics, and you get a KPI dashboard.
Seven tools power this. getExperience returns rendered experience cards. getMetrics returns a KPI dashboard. getSkills returns an interactive skill breakdown. suggestProfile recommends which of the 16 profiles fits what you're looking for. getTestimonials pulls peer recommendations. getDetailedStory returns STAR-format narratives. getStrategyTimeline shows a 90-day plan.
Every tool call is visible in the chat UI. You can see what the chatbot decided to look up and why. Transparency, not magic.
The chatbot doesn't know things Tyler hasn't verified. That's not a limitation. That's the architecture.
How Does the Chatbot Work?
The portfolio chatbot uses Gemini Flash Lite via the Vercel AI SDK, with a Lambda backend that includes rate limiting, content moderation, and token budgets. Each of the 16 profiles provides its own context at build time via bundled profile-contexts.json. Seven tool calls return rendered React components — experience cards, KPI dashboards, skill breakdowns — instead of plain text. The chatbot can only access verified data from resume-base.ts.
The zero-hallucination claim isn't a marketing line. The chatbot can only access data from resume-base.ts and the profile contexts I've written. It doesn't browse the internet. It doesn't invent achievements. If it doesn't have data for a question, it says so.
Every tool returns a uiComponent field that tells the frontend which React component to render. The frontend doesn't parse markdown into components. It receives structured data and renders the real thing.
What Comes Next
I want the chat to reach into the page itself. Someone asks about a project, and the relevant experience card on the page pulses. They ask about skills, and the skills section scrolls into view with a highlight. The chatbot becomes a guide to the portfolio, not a separate experience bolted on top.
Five minutes of conversation should yield more than ten minutes of browsing. That's the bar.
See It Live
Open the chat on any profile page. Try the default profile, then switch to AI engineer and ask the same question. Watch the personality shift.
The engine post covers how the 23 canvas backgrounds work. This post covers the other half — how the portfolio talks back.
In This Series
- One Afternoon, 23 Backgrounds — The 23 canvas engines behind every page
- One Resume Is Not Enough — How YAML drives 16 portfolio variants
- Text Is Not Enough — The profile-aware AI chatbot
- Why Everything Is Glass — The glassmorphism design system
- Ask ChatGPT Who Tyler Wall Is — Infrastructure and AI discoverability
Frequently Asked Questions
What happens if the chatbot doesn't know something?
It says so. The grounding instructions require it to acknowledge gaps rather than guess. If a question falls outside the data in resume-base.ts and the profile contexts, the chatbot tells you it doesn't have that information instead of making something up.
Can the chatbot be jailbroken?
It has rate limiting, content moderation, token budgets, and boundary instructions. It won't generate code, reveal its system prompt, or role-play as something else. The guardrails are the same ones I'd build for a production system at work — because that's what this is.
What model powers it?
Gemini Flash Lite via the Vercel AI SDK, deployed as an AWS Lambda behind API Gateway. I chose Flash Lite for speed and cost — responses come back fast enough to feel conversational, and the token budget keeps costs predictable even under load.