Building AI-Powered Portfolios with LangGraph and Gemini

Why AI in a Portfolio?

A portfolio site is typically a static showcase. But what if visitors could ask questions about your work, get AI-generated summaries of your projects, and search semantically across your content? That's what I set out to build.

The Stack

• LangGraph.js — orchestrating multi-step AI workflows as stateful graphs
• Google Gemini — the underlying language model (via @langchain/google-genai)
• Next.js 15 App Router — for SSR, API routes, and streaming

The Chat Graph

LangGraph lets you model an AI workflow as a directed graph with typed state. Here's the core chat graph:

const ChatState = Annotation.Root({
  messages: Annotation<BaseMessage[]>({
    reducer: (x, y) => x.concat(y),
    default: () => [],
  }),
});
 
const graph = new StateGraph(ChatState)
  .addNode("chat", chatNode)
  .addEdge(START, "chat")
  .addEdge("chat", END)
  .compile();

The chatNode invokes Gemini with a persona-driven system prompt, making the assistant knowledgeable about my background and projects.

Streaming from Next.js

LangGraph's .streamEvents() method emits token-by-token events. I pipe these to a ReadableStream SSE response from a Next.js API route, then consume them with EventSource on the client.

What's Next

• Persistent conversation memory with a vector store
• RAG over blog posts for the search feature
• Automated project summary generation on deploy