Building a Chatbot for my Portfolio in one evening 🤖

As a developer, I'm always looking for ways to showcase my skills and make my portfolio more interactive. Recently, I had the idea to add an AI chatbot to my portfolio. This post details how I went from idea to implementation in just a few hours.

💡 The Idea

I wanted to add a quick AI project to my portfolio, something that would be both functional and demonstrate my ability to work with modern technologies. After exploring different options, I decided to experiment with the Vercel AI SDK, which promised a straightforward integration with my existing Next.js portfolio.

The goal was simple: create a chatbot that could answer questions about me, my experience, and my work without visitors having to dig through my entire site. A personal assistant of sorts, available 24/7.

🛠️ Implementation

📦 Setting Up the Foundation

The first step was to find good documentation on how to integrate with OpenAI's API. Vercel's AI SDK documentation provided exactly what I needed - clear examples of how to create a ChatGPT-like interaction in a Next.js application.

Next, I set up a developer account on OpenAI's platform to get my API key and add credits to my account. It only took a few minutes.

⚠️ Danger: Don't share your API key with anyone! And don't push it to your repository! Add it to your .env.local file instead and use a .gitignore file to avoid committing it to your repository.

💻 Building the Chat Interface

I started by creating a dedicated page for the chat interface. This allowed me to focus on getting the functionality right before integrating it into the broader site.

Using the Vercel AI SDK, I implemented the basic API calls with a generic prompt system. The SDK includes support for message streaming out of the box, which was amazing to see.

The UI components came together quickly - a message list to display the conversation, an input field for user questions, and some basic styling to make it look good.

🔧 Customizing the Experience

Once I had the basic chat functionality working, it was time to make it actually useful. Rather than implementing a full RAG (Retrieval-Augmented Generation) system, which would have been overkill for the amount of content I gave to the chatbot, I took a simpler approach.

I updated the system prompt to include specific information about me, my projects, and articles. This approach worked perfectly - the chatbot could provide accurate information without the complexity of a document retrieval system.

const systemPrompt = `You are a helpful assistant on the Portfolio of Nicolas Laforêt.
You are able to answer questions about Nicolas Laforêt, his projects and articles [...]

Here is the list of all his articles:
${articlesString}

Here is the list of all his projects:
${projectsString}

Here is an about section about Nicolas Laforêt:
${aboutString}

Here is a contact section about Nicolas Laforêt:
${contactString}

...

Respond to the user in Markdown format.`

After some prompt engineering and testing, I was happy with how the chatbot responded to questions about my work and experience.

The SDK allowed me to choose the model I wanted to use by only changing the model parameter in the streamText function.

const result = streamText({
  system: systemPrompt,
  model: openai('gpt-4o-mini'),
  messages,
})

Still getting inspiration from ChatGPT, I ended up adding four suggested questions to the chatbot UI, to help the user get started:

💬 The Floating Chat Window

The final step was to make the chatbot accessible throughout the site. I decided to implement a floating chat window in the bottom right corner of every page - the kind you might see on SaaS websites or customer support platforms.

This involved:

1. Creating a small floating button that expands into the chat interface when clicked
2. Making sure the component persisted across page navigation
3. Adding smooth animations for opening and closing the chat window
4. Ensuring it worked well on both desktop and mobile devices

Screenshot of the chatbot window with the user's question, and the chatbot's response.

📚 Lessons Learned

Building this chatbot taught me several valuable lessons:

1. Start small and iterate - By beginning with a dedicated chat page before expanding to a site-wide feature, I kept the project manageable.

2. Leverage existing tools - The Vercel AI SDK saved me countless hours of implementation time.

3. Simple solutions often work best - While RAG systems are powerful, a well-crafted system prompt was sufficient for my needs.

4. UX matters - The floating window design makes the chatbot accessible without being intrusive.

5. It's not that expensive - Running a chatbot on your personal website is surprisingly cheap. With all the extensive testing I did, I ended up spending $0.05.

🤔 What's Next?

While I'm happy with the current implementation, there's always room for improvement:

• Fine-tuning the system prompt for even better responses
• Adding analytics to see what visitors are asking about
• Potentially implementing a lightweight RAG system as my content grows

📝 Conclusion

Adding an AI chatbot to my portfolio was a fun weekend project that added real value to my site. Visitors can now get instant answers about my work, and I have a practical demonstration of my ability to work with AI tools and modern web technologies.

If you're a developer looking to stand out, consider adding interactive elements like this to your portfolio. Not only do they showcase your technical skills, but they also create a more engaging experience for potential employers or clients.

---

Try it out!

Well, you're already on my portfolio, so you can try it out by clicking on the chat icon in the bottom right corner or going to the chat page!

---

Follow me on Instagram! Let's connect and build in public together. 💪