Building a professional AI chatbot for a personal website presents unique challenges. You need something that's both technically sophisticated and user-friendly, capable of representing your expertise while maintaining appropriate boundaries. When I decided to add an AI assistant to my site, I knew Vercel's AI ecosystem would provide the perfect foundation.
The result? A floating chatbot that can discuss my professional work, field engineering experience, and technical expertise—all while maintaining strict safety guidelines and delivering a seamless user experience. The choice of technology stack matters more than ever when building AI-powered features, and Vercel's AI SDK abstracts away the complexity of streaming responses, providing React hooks and utilities that make building conversational interfaces straightforward. Instead of manually handling streaming protocols, I could focus on the user experience.
AI Gateway provides a single endpoint for accessing multiple AI models, with built-in rate limiting, caching, and analytics. This means I can switch between models or add new ones without changing my application code. Combined with Vercel's edge infrastructure, which ensures that AI responses are fast and consistent worldwide, it creates the perfect environment for a good conversational experience.
Starting with my existing Next.js 15 project, I installed the necessary AI SDK packages. The key insight here is using the modular approach—importing only what you need rather than the entire AI SDK package. The core of the chatbot is an API route that handles streaming responses:
// app/api/chat/route.ts
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
export const runtime = 'edge';
export async function POST(req: Request) {
try {
const { messages } = await req.json();
const result = streamText({
model: openai('gpt-4o', {
apiKey: process.env.AI_GATEWAY_API_KEY,
baseURL: 'https://gateway.ai.vercel.com/v1',
}),
messages,
maxTokens: 1000,
temperature: 0.7,
system: `You are Ben Seymour's AI assistant...`,
});
return result.toUIMessageStreamResponse();
} catch (error) {
// Error handling
}
}
The beauty of this approach is its simplicity. The AI SDK handles all the streaming complexity, while AI Gateway provides a unified interface to the underlying models. Rather than implementing a full Retrieval-Augmented Generation (RAG) system, I chose a "Static Knowledge Base" approach. The challenge with full RAG is that Edge Runtime limitations prevent file system access, complex indexing and retrieval systems add latency, and there's significant maintenance overhead. Instead, I embedded comprehensive information about my professional background directly into the system prompt:
system: `You are Ben Seymour's AI assistant. Ben is a Senior Director of Field Engineering at Vercel, responsible for EMEA & APJ regions. He's also an author, entrepreneur, and web technology expert based in Oxford, UK.
Key facts about Ben:
- Senior Director of Field Engineering at Vercel (EMEA & APJ)
- Author of "Practical Responsive Images" (2015)
- Founder of Storyus, Haktive, Save Your Past, Be9ing
- Previously worked at Cloudinary in technical pre-sales and field engineering
- Expert in Next.js, web development, technical pre-sales, field engineering
- Based in Oxford, UK
- Specializes in responsive images, web performance, technical leadership
Ben's Remote Work Experience & Philosophy:
- Remote worker since 2007 (mostly for Silicon Valley startups)
- Over 25 years of experience working in remote roles supporting US/UK markets
- Developed unique perspective on building and leading high-performing teams across time zones and cultures
- Believes in work-life integration (not just balance) - bringing your whole self to work and taking work home when meaningful
- Operates a double desk environment for better work-life integration with separate desks, Macs, notebooks, and phones
- Focuses on async communication, documentation, and structured handoffs for effective remote work
- Flexible schedule with availability for early mornings (APAC) and evenings (West Coast)
- Emphasizes transparency, collaboration, and continuous learning in remote team management
- Believes in "No Surprises" principle for feedback and communication
- Invests heavily in team building and intentional remote team culture
IMPORTANT SAFETY GUIDELINES:
- ONLY discuss Ben's professional work, technical expertise, and public information
- DO NOT discuss politics, personal opinions, or sensitive topics
- DO NOT speculate about Ben's private life, family, or personal matters
- DO NOT provide information about Ben's current salary, compensation, or financial details
- DO NOT discuss internal company matters, confidential information, or proprietary details
- DO NOT engage with questions about controversial topics, political views, or social issues
- If asked about sensitive topics, politely redirect to Ben's professional expertise
- If you don't know something specific about Ben, say so and offer to help with general questions about his areas of expertise
Keep responses conversational, informative, and focused on Ben's professional background and expertise.`
This approach provides several advantages: immediate availability with no indexing delays, consistent responses every time, easy maintenance by updating the prompt, and cost effectiveness with no additional storage or retrieval costs. The floating chatbot uses a custom React component with manual state management:
// components/FloatingChatBot.tsx
'use client';
import { useState } from 'react';
import styles from './FloatingChatBot.module.css';
export default function FloatingChatBot() {
const [isOpen, setIsOpen] = useState(false);
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
if (!input.trim()) return;
// Client-side sensitive query filtering
if (isSensitiveQuery(input)) {
setMessages(prev => [...prev, {
id: Date.now(),
role: 'assistant',
content: "I can only discuss Ben's professional work and technical expertise. Please ask me about web development, field engineering, or his professional background instead."
}]);
setInput('');
return;
}
// Handle normal queries with streaming
// ... streaming implementation
};
}I implemented both client-side and server-side safety measures. The client-side filtering catches sensitive topics before they're sent to the API, while the system prompt also includes comprehensive safety guidelines that instruct the AI to avoid sensitive topics and redirect to professional expertise. The floating interface uses custom CSS modules instead of Tailwind or shadcn, maintaining consistency with the existing site design:
/* Floating Toggle Button */
.floatingToggle {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
transition: all 0.3s ease;
z-index: 1000;
}
/* Chat Panel */
.chatPanel {
position: fixed;
bottom: 20px;
right: 20px;
width: 400px;
height: 600px;
background: rgba(255, 255, 255, 0.98) !important;
backdrop-filter: blur(10px);
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
border: 2px solid rgba(0, 123, 255, 0.2);
z-index: 1001;
}The AI SDK provides streamlined development with the useChat hook and streaming utilities that eliminate boilerplate code. It offers full TypeScript support with proper type definitions, built specifically for React and Next.js, and includes comprehensive error handling and retry mechanisms. AI Gateway delivers a unified API with a single endpoint for multiple AI models, built-in protection against API abuse, detailed usage and performance metrics, transparent pricing and usage tracking, and easy switching between different AI models. The Edge Runtime performance is impressive: fast responses worldwide through global distribution, low latency with edge computing, automatic scaling based on demand, and built-in redundancy and failover for reliability.
Initially, I tried using the useChat hook but encountered hydration issues that caused page content to disappear. The manual approach with useState provided more control and eliminated these problems. The Edge Runtime limitations made full RAG implementation complex, so the static approach provides 90% of the benefits with 10% of the complexity, making it the pragmatic choice for this use case. Maintaining consistency with the existing site design was crucial, so custom CSS modules allowed me to integrate seamlessly with the existing design system while maintaining full control over the styling.
The floating interface features a non-intrusive toggle button in the bottom-right corner, works seamlessly on desktop and mobile, has excellent readability with proper color contrast, and includes polished interactions and transitions. Technical performance is strong with edge-optimized streaming responses, reliable safety through dual-layer filtering that prevents inappropriate content, consistent branding that matches the site's design language, and proper ARIA labels and keyboard navigation for accessibility. Content quality focuses on professional topics only, covers my full professional background comprehensively, respects privacy and confidentiality with appropriate boundaries, and provides valuable information about my expertise.
The static knowledge base approach proved that sometimes the simplest solution is the best. Don't over-engineer when a straightforward approach meets your needs. Implementing both client-side and server-side safety measures provides defense in depth—the AI's behavior is only as good as your safety guidelines. The floating interface design was crucial for adoption, as users need to discover and use the feature easily without it interfering with their browsing experience. Edge runtime and streaming responses make the difference between a sluggish and a responsive chatbot experience.
While the current implementation works well, there are several areas for future improvement: periodic updates to the knowledge base, analytics integration to track usage patterns and popular questions, multi-language support, voice interface with speech-to-text and text-to-speech capabilities, and context awareness to remember conversation history across sessions.
Conclusion
Building an AI chatbot with Vercel's AI SDK and AI Gateway provided an excellent foundation for creating a professional, safe, and performant conversational interface. The combination of Next.js, Vercel's edge infrastructure, and the AI SDK created a development experience that was both powerful and straightforward.
The key insight? The right technology choices—Vercel's AI ecosystem, static knowledge base approach, and custom UI components—enabled me to build something that feels native to my site while providing genuine value to visitors interested in my professional expertise.
For technical leaders looking to add AI capabilities to their sites, I recommend starting with Vercel's AI SDK and AI Gateway. The developer experience is excellent, the performance is outstanding, and the ecosystem provides everything you need to build professional AI features.
The future of web development is AI-powered, and Vercel's infrastructure makes that future accessible today.
This implementation demonstrates how modern AI tools can be integrated into personal websites to create engaging, professional experiences. The combination of Vercel's AI SDK, AI Gateway, and Next.js provides a powerful foundation for building conversational interfaces that enhance rather than distract from the user experience.