Conversational build // RAG + streamed responses

Live

Portfolio AI Chat

Chat widget on this very site that uses RAG over Markdown project descriptions to answer questions about the work shown here. React frontend with SSE streaming; Astro backend as a proxy.

AstroReactTypeScriptSSETailwind CSSMDX
Source ↗
  • OutputGrounded answers
  • RuntimeReact + SSE
  • IndexProject MDX
Portfolio assistantReady
Portfolio AI Chat mark

Ask about the work, inspect matched projects, and follow the answer as it streams in.

Overview

Portfolio AI Chat gives the portfolio a conversational entry point. Visitors can ask what Victor built, which technologies he used, or why a project was designed a certain way. The answer is grounded in the same project and expertise content that powers the site, so the chat can lead directly to the relevant project page instead of becoming a disconnected FAQ.

Rony chat in its initial state

Live conversation

Rony streams the answer into the conversation as it arrives. When the bot identifies useful documents, the project grid switches to a matched view and surfaces the related work. A question such as “What can I ask Rony about?” can bring the chat, the retrieval sources, and the project cards into the same flow.

Rony answering a visitor question with matched projects

Architecture

The feature is split into small boundaries so the browser only owns presentation and conversation state:

Layer Responsibility
React chat island Collects messages, renders Markdown-like responses, shows streaming status, and reports matched sources.
Astro /api/chat Validates the request and forwards the SSE stream without exposing the bot’s internal port to the browser.
rony-chat-bot Runs the Rony agent, retrieves relevant project context, and emits response chunks, sources, and lifecycle events.
Project index Publishes the MDX collection through /projects.json, which the bot consumes when it reindexes.

The portfolio remains the source of truth. A content update becomes searchable after the bot reindexes the JSON feed, so the rendered site and the conversational index do not need separate copies of project files.

Interaction design

  • Progressive response — server-sent events show the first useful chunk without waiting for a complete answer.
  • Stable layout — the chat log has a bounded scroll area, keeping the hero and project grid from jumping while tokens arrive.
  • Source-aware navigation — returned source slugs switch the grid into “Matched projects” mode and keep the answer connected to the work it references.
  • Two visual Rony modes — the dog control can switch between the classic sprite and the alternate animated treatment without changing the conversation.
  • Resettable context — resetting the chat clears the visible conversation, matched cards, and server conversation id together.

Try the chat

  1. Open the home page and choose Chat with Rony.
  2. Ask about a project, its stack, or a design decision.
  3. Watch the answer stream in, then open a matched project from the cards above the chat.

The current experience is designed for questions about the portfolio rather than general-purpose browsing. Focused prompts produce the most useful project matches.

Files of note

  • src/components/Chat.tsx — conversation state, SSE parsing, response rendering, source callbacks, and Rony mode switching.
  • src/pages/api/chat.ts — request validation and streaming proxy boundary.
  • src/pages/projects.json.ts — project catalogue consumed by the bot during reindexing.
  • src/content/projects/**/*.mdx — the searchable project source material.