Building an AI Agent with LangGraph, TypeScript, Next.js, TailwindCSS, and Pinecone

Introduction AI agents are evolving beyond simple chatbots into powerful workflow orchestrators. In this guide, we'll build a fully functional AI agent using LangGraph, TypeScript, Next.js, TailwindCSS, and Pinecone for vector-based memory storage. By the end of this tutorial, you'll have a working AI-powered assistant that can process user queries, retrieve knowledge from a Pinecone vector database, and dynamically generate responses. Project Architecture Tech Stack Overview ✅ LangGraph – To define AI workflows and agent orchestration. ✅ Next.js (TypeScript) – For the front-end and API layer. ✅ TailwindCSS – For UI styling. ✅ Pinecone – For vector-based memory storage and retrieval. ✅ OpenAI API – For LLM-based response generation. Step 1: Setting Up the Project 1. Initialize the Next.js Project npx create-next-app@latest ai-agent-app --typescript --tailwind --use-npm cd ai-agent-app npm install @pinecone-database/pinecone langgraph openai axios dotenv 2. Configure Pinecone for Vector Storage Create a .env.local file and add: NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key NEXT_PUBLIC_PINECONE_API_KEY=your_pinecone_api_key NEXT_PUBLIC_PINECONE_ENVIRONMENT=your_pinecone_env NEXT_PUBLIC_PINECONE_INDEX=your_pinecone_index Step 2: Building the AI Agent Backend with LangGraph 1. Create LangGraph Workflow (/lib/langgraph.ts) import { OpenAI } from "openai"; import { Pinecone } from "@pinecone-database/pinecone"; import { Graph, Node, Edge } from "langgraph"; type AIContext = { query: string; response: string }; const openai = new OpenAI(process.env.NEXT_PUBLIC_OPENAI_API_KEY!); const pinecone = new Pinecone({ apiKey: process.env.NEXT_PUBLIC_PINECONE_API_KEY!, environment: process.env.NEXT_PUBLIC_PINECONE_ENVIRONMENT!, }); const aiGraph = new Graph(); // Define AI processing node const aiNode = new Node(async (ctx) => { const vectorStore = pinecone.index(process.env.NEXT_PUBLIC_PINECONE_INDEX!); const results = await vectorStore.query({ topK: 5, query: ctx.query }); const messages = [ { role: "system", content: "You are an AI assistant." }, { role: "user", content: `${ctx.query}\nRelevant Data: ${JSON.stringify(results)}` }, ]; const completion = await openai.chat.completions.create({ model: "gpt-4", messages, }); ctx.response = completion.choices[0].message.content; }); aiGraph.addNode("AI Processing", aiNode); aiGraph.addEdge(new Edge("Start", "AI Processing")); export { aiGraph }; Step 3: Creating the Next.js API Route Create a new API route in /pages/api/ask.ts: import { NextApiRequest, NextApiResponse } from "next"; import { aiGraph } from "../../lib/langgraph"; export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" }); const { query } = req.body; if (!query) return res.status(400).json({ error: "Missing query" }); const context = { query, response: "" }; await aiGraph.run(context); return res.json({ response: context.response }); } Step 4: Building the Frontend UI with TailwindCSS Update the pages/index.tsx file: import { useState } from "react"; export default function Home() { const [query, setQuery] = useState(""); const [response, setResponse] = useState(""); const handleSubmit = async () => { const res = await fetch("/api/ask", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query }), }); const data = await res.json(); setResponse(data.response); }; return ( AI Agent Chat setQuery(e.target.value)} className="w-full p-2 border rounded mt-4" /> Ask {response && {response}} ); } Final Steps: Running the AI Agent 1. Start the Next.js Server npm run dev 2. Test the AI Agent Open http://localhost:3000 Enter a query and see AI-powered responses with knowledge retrieval from Pinecone. Conclusion & Next Steps You now have a fully functional AI agent built with LangGraph, Pinecone, and Next.js!

Feb 16, 2025 - 23:20

Building an AI Agent with LangGraph, TypeScript, Next.js, TailwindCSS, and Pinecone

Introduction

AI agents are evolving beyond simple chatbots into powerful workflow orchestrators. In this guide, we'll build a fully functional AI agent using LangGraph, TypeScript, Next.js, TailwindCSS, and Pinecone for vector-based memory storage.

By the end of this tutorial, you'll have a working AI-powered assistant that can process user queries, retrieve knowledge from a Pinecone vector database, and dynamically generate responses.

Project Architecture

Tech Stack Overview

✅ LangGraph – To define AI workflows and agent orchestration.

✅ Next.js (TypeScript) – For the front-end and API layer.

✅ TailwindCSS – For UI styling.

✅ Pinecone – For vector-based memory storage and retrieval.

✅ OpenAI API – For LLM-based response generation.

Step 1: Setting Up the Project

1. Initialize the Next.js Project

npx create-next-app@latest ai-agent-app --typescript --tailwind --use-npm
cd ai-agent-app
npm install @pinecone-database/pinecone langgraph openai axios dotenv

2. Configure Pinecone for Vector Storage

Create a .env.local file and add:

NEXT_PUBLIC_OPENAI_API_KEY=your_openai_api_key
NEXT_PUBLIC_PINECONE_API_KEY=your_pinecone_api_key
NEXT_PUBLIC_PINECONE_ENVIRONMENT=your_pinecone_env
NEXT_PUBLIC_PINECONE_INDEX=your_pinecone_index

Step 2: Building the AI Agent Backend with LangGraph

1. Create LangGraph Workflow (`/lib/langgraph.ts`)

import { OpenAI } from "openai";
import { Pinecone } from "@pinecone-database/pinecone";
import { Graph, Node, Edge } from "langgraph";

type AIContext = { query: string; response: string };

const openai = new OpenAI(process.env.NEXT_PUBLIC_OPENAI_API_KEY!);
const pinecone = new Pinecone({
  apiKey: process.env.NEXT_PUBLIC_PINECONE_API_KEY!,
  environment: process.env.NEXT_PUBLIC_PINECONE_ENVIRONMENT!,
});

const aiGraph = new Graph<AIContext>();

// Define AI processing node
const aiNode = new Node(async (ctx) => {
  const vectorStore = pinecone.index(process.env.NEXT_PUBLIC_PINECONE_INDEX!);
  const results = await vectorStore.query({ topK: 5, query: ctx.query });

  const messages = [
    { role: "system", content: "You are an AI assistant." },
    { role: "user", content: `${ctx.query}\nRelevant Data: ${JSON.stringify(results)}` },
  ];

  const completion = await openai.chat.completions.create({
    model: "gpt-4",
    messages,
  });

  ctx.response = completion.choices[0].message.content;
});

aiGraph.addNode("AI Processing", aiNode);
aiGraph.addEdge(new Edge("Start", "AI Processing"));

export { aiGraph };

Step 3: Creating the Next.js API Route

Create a new API route in /pages/api/ask.ts:

import { NextApiRequest, NextApiResponse } from "next";
import { aiGraph } from "../../lib/langgraph";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") return res.status(405).json({ error: "Method Not Allowed" });

  const { query } = req.body;
  if (!query) return res.status(400).json({ error: "Missing query" });

  const context = { query, response: "" };
  await aiGraph.run(context);

  return res.json({ response: context.response });
}

Step 4: Building the Frontend UI with TailwindCSS

Update the pages/index.tsx file:

import { useState } from "react";

export default function Home() {
  const [query, setQuery] = useState("");
  const [response, setResponse] = useState("");

  const handleSubmit = async () => {
    const res = await fetch("/api/ask", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query }),
    });
    const data = await res.json();
    setResponse(data.response);
  };

  return (
    <div className="container mx-auto p-6">
      <h1 className="text-2xl font-bold">AI Agent Chat</h1>
      <input
        type="text"
        placeholder="Ask a question..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        className="w-full p-2 border rounded mt-4"
      />
      <button onClick={handleSubmit} className="mt-4 bg-blue-500 text-white p-2 rounded">Ask</button>
      {response && <p className="mt-4 p-3 bg-gray-100 rounded">{response}</p>}
    </div>
  );
}

Final Steps: Running the AI Agent

1. Start the Next.js Server

npm run dev

2. Test the AI Agent

Open http://localhost:3000
Enter a query and see AI-powered responses with knowledge retrieval from Pinecone.

Conclusion & Next Steps

You now have a fully functional AI agent built with LangGraph, Pinecone, and Next.js!