I've been working on adding a chatbot to my personal portfolio.

Previously, the website was pretty straightforward. Visitors could browse my About Me, Education, Experience, and Projects pages to learn more about me. Everything was there, but the experience was mostly static.

I wanted to experiment with a more interactive way for visitors to explore my background and work, so I decided to introduce an AI chatbot.

Making Portfolio Information Conversational

The idea is simple: instead of navigating through different pages to find information, visitors can just ask.

For example:

• What is your educational background?
• What technologies have you worked with?
• Tell me about your previous experience.
• What projects have you worked on?

The chatbot responds in the first person, as if visitors are having a conversation with me.

I also wanted to keep its scope relatively focused. It should answer based on the information available on my portfolio, rather than making up experience, qualifications, or project details. If something isn't covered by the available content, it should acknowledge that.

How I Handle Different Types of Questions

One of the more interesting parts of this implementation is how the chatbot retrieves information.

Not every question requires the same amount of data, so I separated the retrieval logic into two categories.

1. General Profile Questions

For questions about my background, education, and working experience, the chatbot uses profile information retrieved directly from Payload CMS.

This information is relatively small and unlikely to change frequently, so it can be provided as context when generating a response.

2. Project-related Questions

Projects are handled differently.

Instead of including the entire project collection in every request, I implemented a tool-calling mechanism that allows the AI to retrieve project information from Payload CMS when needed.

This means the chatbot only fetches project data when a visitor asks something related to my projects.

I prefer this approach because the project collection may grow over time. Loading everything into every conversation would introduce unnecessary context and increase token consumption.

The Visitor Experience

On the frontend, I added a small animated character that visitors can interact with.

They can drag it around the page, open the chatbot, and start asking questions. Responses are streamed and displayed with a typing effect rather than appearing all at once.

For now, the chatbot only supports English. I'd rather provide a consistent experience in one language than claim to support multiple languages without being confident about the response quality.

Behind the Scenes

The implementation uses:

• Next.js – API route and frontend interaction.
• Vercel AI SDK – Handling AI responses, streaming, and tool calling.
• Payload CMS – Providing structured portfolio content.
• Rate limiting and daily usage limits – Keeping API consumption under control.
• Honeypot protection – Helping filter automated bot submissions.
• Conversation history limits – Preventing requests from growing unnecessarily large.

Since this is a publicly accessible chatbot, I also had to consider things beyond simply getting the AI to respond.

Without proper usage controls, a small feature like this could quickly become an unexpected source of API costs or abuse.

What I Learned

This was a fun addition because it brought together several areas I've been interested in exploring:

• Building interactive frontend experiences.
• Working with AI streaming responses.
• Connecting AI models with structured CMS content.
• Implementing tool calling for on-demand data retrieval.
• Thinking about performance, token consumption, and API usage.

More importantly, it made me think beyond simply displaying information on a webpage.

The challenge was not just making an AI chatbot work. It was figuring out how to let AI interact with existing content in a controlled and efficient way.

Give It a Try

The portfolio still works the same way as before. You can browse through the different sections and explore my projects.

But if you prefer a more conversational experience, you can now ask the chatbot instead.

Sometimes, it's easier to ask than to search.