Lessons from Building an AI Chatbot with Only 2 Tools

Jessica Cheng

1. Why Add a Chatbot to a UX Portfolio?

Most portfolios are static. You scroll, skim, maybe read one case study. But what if someone could ask about my experience with onboarding flows? Or dig into projects involving experimentation or stakeholder alignment?

That’s what led me to build a chatbot, a conversational layer over my portfolio. It acts as an AI-powered FAQ that helps people explore my work without needing to click through every page.

2. The Only Two Tools I Used

Vercel AI SDK: Handles routing, streaming, and edge functions. Minimal setup.

OpenAI API: Powers the language model.

No vector database. No orchestration frameworks. Just a lightweight setup and a focused use case.

Here’s the only piece of code I needed to get the chatbot running:


import { openai } from '@ai-sdk/openai';
import { streamText, UIMessage, convertToModelMessages } from 'ai';

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model: openai('gpt-4o'),
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

From the Vercel AI SDK docs.

3. 2 ways to structure the AI's Knowledge (The hardest part)

A chatbot is only as good as what it knows. So the big question was: how do I feed it my content?

Option A: Static JSON

Pros:

Faster build

Easy to update

Cons:

High token usage

No semantic search, because it relies on keyword match

Option B: Embeddings

Pros:

Smarter matching

Lower token usage per call

Easier to scale as content grows

Cons:

More setup (chunking, vector math, etc.)

Retrieval quality depends on chunking strategy

Higher learning curve

4. Cost and Token Efficiency

Cost was a real concern. Every message a user sends costs money, and it’s hard to predict how much each interaction will add up.

The good news? You can cap your OpenAI spend at $5 to safely prototype and test the concept, without risking surprise charges from runaway usage.

5. What’s Next? (And What I’d Improve)

Next Steps

Try open-source models like Mistral or Ollama to reduce API costs and gain more control.

Explore fine-tuning to deliver more consistent answers for questions about process, tools, and frameworks.

What Worked

A clear onboarding prompt - “Ask me about my work: projects, tools, decisions.”

Useful fallback responses for common questions like “What’s your role in X?”

What I’d Improve

Show sample questions to reduce blank-slate anxiety for first-time users.

Include lightweight feedback like “Was this helpful?” to refine answers over time.

Wrap-Up: Should You Try This?

You can get 80% of the way there with just 2 tools. The last 20% are tuning, feedback, utility.

This space is only getting more accessible. Open-source models are improving, and API prices are dropping fast. That’s a great reason to start small and experiment now.

Let's make something users will love!

If you're looking for a product designer who can bridge the gap between design and code, I'm here to help!

Contact Me