Build an AI Agent Web App with LangGraph and CopilotKit

project/
  ui/              # Next.js frontend
    app/
      api/copilotkit/route.ts
      page.tsx
    components/
      ResearchCanvas.tsx
      Progress.tsx
      ModelSelector.tsx
      Resources.tsx
  agent/           # Python LangGraph backend
    agent.py       # Graph definition
    chat.py        # Chat node with tool binding
    search.py      # Tavily search node
    download.py    # Resource download node
    delete.py      # Resource deletion node
    state.py       # Agent state types
    model.py       # Model selection
    demo.py        # FastAPI server

from dataclasses import dataclass, field
from typing import List, Optional
from langchain_core.messages import BaseMessage

@dataclass
class Resource:
    url: str
    title: str = ""
    description: str = ""

@dataclass
class LogEntry:
    message: str
    done: bool = False

@dataclass
class AgentState:
    model: str = "openai"
    research_question: str = ""
    report: str = ""
    resources: List[Resource] = field(default_factory=list)
    logs: List[LogEntry] = field(default_factory=list)
    messages: List[BaseMessage] = field(default_factory=list)

from langgraph.graph import StateGraph, END
from langgraph.checkpoint.memory import MemorySaver

from state import AgentState
from chat import chat_node
from search import search_node
from download import download_node
from delete import perform_delete_node

def route_after_chat(state: AgentState) -> str:
    """Decide where to go after the chat node based on tool calls."""
    messages = state.messages
    last_message = messages[-1] if messages else None

    if not last_message or not hasattr(last_message, "tool_calls"):
        return END

    for tool_call in last_message.tool_calls:
        if tool_call["name"] == "search":
            return "search_node"
        if tool_call["name"] == "delete_resource":
            return "delete_node"

    return END

# Build the graph
workflow = StateGraph(AgentState)

workflow.add_node("download", download_node)
workflow.add_node("chat", chat_node)
workflow.add_node("search_node", search_node)
workflow.add_node("delete_node", perform_delete_node)

# Entry point: download any initial resources
workflow.set_entry_point("download")

# After downloading, go to chat
workflow.add_edge("download", "chat")

# After chat, conditionally route based on tool calls
workflow.add_conditional_edges("chat", route_after_chat, {
    "search_node": "search_node",
    "delete_node": "delete_node",
    END: END,
})

# Search and delete loop back to chat
workflow.add_edge("search_node", "chat")
workflow.add_edge("delete_node", "chat")

memory = MemorySaver()
graph = workflow.compile(checkpointer=memory)

from langchain_openai import ChatOpenAI
from langchain_core.messages import SystemMessage, HumanMessage

def chat_node(state: AgentState, config: dict) -> dict:
    model_name = state.model or "openai"
    research_question = state.research_question
    report = state.report
    resources = state.resources

    # Format resources for the prompt
    resource_context = ""
    for r in resources:
        if r.description:
            resource_context += f"\n- {r.title}: {r.description[:2000]}"

    # Initialize the model with tools bound
    llm = ChatOpenAI(model="gpt-4o-mini", temperature=0)
    llm_with_tools = llm.bind_tools([search_tool, delete_tool, write_report_tool])

    system_prompt = f"""You are a research assistant. Help the user research their topic.

Research question: {research_question}
Current report draft: {report}
Available resources:
{resource_context}

Use the search tool to find relevant information.
Use the write_report tool to update the research draft.
Use the delete_resource tool if the user wants to remove a resource."""

    messages = [SystemMessage(content=system_prompt)] + state.messages

    response = llm_with_tools.invoke(messages)

    # Check for write_report tool call
    if response.tool_calls:
        for tc in response.tool_calls:
            if tc["name"] == "write_report":
                return {
                    "report": tc["args"]["report"],
                    "messages": [response],
                }

    return {"messages": [response]}

from tavily import TavilyClient
import os

tavily = TavilyClient(api_key=os.environ["TAVILY_API_KEY"])

def search_node(state: AgentState, config: dict) -> dict:
    messages = state.messages
    last_message = messages[-1]

    search_queries = []
    for tool_call in last_message.tool_calls:
        if tool_call["name"] == "search":
            search_queries.append(tool_call["args"]["query"])

    logs = []
    all_results = []

    for query in search_queries:
        logs.append({"message": f"Searching: {query}", "done": False})

        # Emit intermediate state for the UI
        config["callbacks"][0].on_custom_event(
            "state_update",
            {"logs": logs}
        )

        response = tavily.search(query, max_results=5)
        all_results.extend(response.get("results", []))

        logs[-1]["done"] = True

    # Use LLM to extract the 3-5 most relevant resources
    llm = ChatOpenAI(model="gpt-4o-mini", temperature=0)

    extraction_prompt = f"""Extract the 3-5 most relevant resources from these search results.
Return them as a list with URL, title, and a brief description.

Search results:
{all_results}"""

    extraction = llm.invoke([HumanMessage(content=extraction_prompt)])

    # Process extracted resources
    new_resources = parse_resources(extraction.content)

    return {
        "resources": state.resources + new_resources,
        "logs": [],
    }

import requests
from html2text import HTML2Text

h2t = HTML2Text()
h2t.ignore_links = False
h2t.ignore_images = True

def download_resource(url: str) -> str:
    headers = {"User-Agent": "Mozilla/5.0 (compatible; ResearchBot/1.0)"}
    response = requests.get(url, headers=headers, timeout=10)
    return h2t.handle(response.text)

def download_node(state: AgentState, config: dict) -> dict:
    resources = state.resources
    logs = []

    for i, resource in enumerate(resources):
        if not resource.description:
            logs.append({"message": f"Downloading: {resource.url}", "done": False})

            config["callbacks"][0].on_custom_event(
                "state_update",
                {"logs": logs}
            )

            content = download_resource(resource.url)
            resources[i].description = content[:5000]

            logs[-1]["done"] = True

    return {"resources": resources, "logs": []}

import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime";
import OpenAI from "openai";

const openai = new OpenAI();
const adapter = new OpenAIAdapter({ openai });

export async function POST(req: Request) {
  const runtime = new CopilotRuntime({
    remoteActions: [
      {
        url: process.env.REMOTE_ACTION_URL || "http://localhost:8000",
      },
    ],
  });

  const { handleRequest } = runtime;
  return handleRequest(req, adapter);
}

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import { ResearchCanvas } from "@/components/ResearchCanvas";

export default function Page() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <div className="flex h-screen">
        <div className="flex-1 overflow-auto">
          <ResearchCanvas />
        </div>
        <div className="w-96 border-l">
          <CopilotChat
            labels={{ title: "Research Assistant" }}
            instructions="Help the user research their topic. Use search to find information and write a research draft."
          />
        </div>
      </div>
    </CopilotKit>
  );
}

"use client";
import { useCopilotAction, useCoAgentState } from "@copilotkit/react-core";
import { useState } from "react";

interface AgentState {
  model: string;
  research_question: string;
  report: string;
  resources: Array<{
    url: string;
    title: string;
    description: string;
  }>;
  logs: Array<{
    message: string;
    done: boolean;
  }>;
}

export function ResearchCanvas() {
  const { state, setState } = useCoAgentState<AgentState>({
    name: "research_agent",
    initialState: {
      model: "openai",
      research_question: "",
      report: "",
      resources: [],
      logs: [],
    },
  });

  const [newResourceUrl, setNewResourceUrl] = useState("");

  // Handle resource deletion with user confirmation
  useCopilotAction({
    name: "delete_resource",
    description: "Remove a resource from the research context",
    handler: async ({ url }) => {
      setState((prev) => ({
        ...prev,
        resources: prev.resources.filter((r) => r.url !== url),
      }));
    },
  });

  function addResource() {
    if (!newResourceUrl.trim()) return;

    setState((prev) => ({
      ...prev,
      resources: [
        ...prev.resources,
        { url: newResourceUrl, title: "", description: "" },
      ],
    }));
    setNewResourceUrl("");
  }

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6">Research Canvas</h1>

      {/* Research question input */}
      <input
        value={state.research_question}
        onChange={(e) =>
          setState((prev) => ({ ...prev, research_question: e.target.value }))
        }
        placeholder="What would you like to research?"
        className="w-full border rounded px-4 py-3 mb-6 text-lg"
      />

      {/* Progress logs */}
      {state.logs.length > 0 && (
        <div className="mb-6 space-y-2">
          {state.logs.map((log, i) => (
            <div key={i} className="flex items-center gap-2 text-sm">
              <span className={log.done ? "text-green-600" : "text-yellow-600"}>
                {log.done ? "Done" : "Working..."}
              </span>
              <span>{log.message}</span>
            </div>
          ))}
        </div>
      )}

      {/* Resources */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold mb-3">Resources</h2>
        <div className="flex gap-2 mb-3">
          <input
            value={newResourceUrl}
            onChange={(e) => setNewResourceUrl(e.target.value)}
            placeholder="https://example.com/article"
            className="flex-1 border rounded px-3 py-2"
          />
          <button
            onClick={addResource}
            className="px-4 py-2 bg-black text-white rounded"
          >
            Add
          </button>
        </div>
        <div className="grid grid-cols-2 gap-3">
          {state.resources.map((resource, i) => (
            <div key={i} className="border rounded p-3">
              <p className="font-medium truncate">
                {resource.title || resource.url}
              </p>
              <p className="text-sm text-gray-500 truncate">{resource.url}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Research draft */}
      <div>
        <h2 className="text-lg font-semibold mb-3">Draft</h2>
        <textarea
          value={state.report}
          onChange={(e) =>
            setState((prev) => ({ ...prev, report: e.target.value }))
          }
          className="w-full border rounded p-4 min-h-[300px] font-mono text-sm"
          placeholder="The research draft will appear here..."
        />
      </div>
    </div>
  );
}

# Terminal 1: Start the Python agent
cd agent
poetry install
poetry run demo
# Runs on http://localhost:8000

# Terminal 2: Start the Next.js frontend
cd ui
pnpm install
pnpm dev
# Runs on http://localhost:3000