Two nooks of the web I love to revisit are the personal sites of Lele Zhang and Rachel Chen. They both have personal chats, and I've wanted to tinker on one of my own for a while. So I built one.

What it does

floGPT lives in a slide-in panel on the right side of the site. It answers questions about me: what I'm working on, what I'm reading, my background, my writing. It speaks in first person as me. It's not a general assistant, just an about page you can talk to.

How it works

The panel is a FloChatPanel component, a fixed right drawer with resizable width. Under the hood it uses the AI SDK (@ai-sdk/react) with a TextStreamChatTransport hitting a /api/chat route, which streams responses from Claude Haiku via the Anthropic SDK.

The system prompt defines who floGPT is: my background, my writing, where I've lived, how to respond. The model is claude-haiku-4-5-20251001: fast and token-efficient.

Responses render as streaming markdown via react-markdown with remark-gfm. Custom CSS defines the typography (.chat-markdown) to match the site's sans-serif feel rather than inheriting prose styles.

Stack

• Framework: Next.js App Router
• AI: Anthropic Claude Haiku via @ai-sdk/anthropic
• Streaming: AI SDK TextStreamChatTransport
• Markdown: react-markdown + remark-gfm
• Animation: Agent Elements with lottie-react for the spiral loader
• Scroll: Base UI ScrollArea
• Styling: Tailwind v4 with a custom token system