Build a Full-Stack AI Agent with LangGraph, React and Docker

from typing import TypedDict, Literal
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
import uvicorn
import os

from langchain_openai import ChatOpenAI, OpenAIEmbeddings
from langchain.prompts import ChatPromptTemplate
from langchain.memory import ConversationSummaryMemory
from langchain.tools import tool
from langchain.agents import create_openai_tools_agent, AgentExecutor
from langchain.document_loaders import TextLoader
from langchain.vectorstores import FAISS
from langchain.chains import RetrievalQA
from langgraph.graph import StateGraph, END

# --- SETUP ---
api_app = FastAPI()
api_app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

llm = ChatOpenAI(model="gpt-4o-mini")
memory = ConversationSummaryMemory(llm=llm)

@tool
def add_numbers(a: int, b: int) -> int:
    """Add two numbers"""
    return a + b

tools = [add_numbers]

agent_prompt = ChatPromptTemplate.from_messages([
    ("system", "You are a helpful assistant."),
    ("human", "{input}"),
    ("placeholder", "{agent_scratchpad}")
])

agent = create_openai_tools_agent(llm, tools, agent_prompt)
agent_executor = AgentExecutor(agent=agent, tools=tools, memory=memory)

# --- RAG ---
loader = TextLoader("data.txt")
docs = loader.load()
embeddings = OpenAIEmbeddings()
vectorstore = FAISS.from_documents(docs, embeddings)
rag_chain = RetrievalQA.from_chain_type(llm=llm, retriever=vectorstore.as_retriever())

# --- GRAPH ---
class State(TypedDict):
    question: str
    route: Literal["rag", "agent"]
    answer: str

def router(state: State):
    if "secret" in state["question"].lower(): return {"route": "rag"}
    return {"route": "agent"}

def rag_node(state: State):
    return {"answer": rag_chain.invoke(state["question"])["result"]}

def agent_node(state: State):
    return {"answer": agent_executor.invoke({"input": state["question"]})["output"]}

graph = StateGraph(State)
graph.add_node("router", router)
graph.add_node("rag", rag_node)
graph.add_node("agent", agent_node)
graph.set_entry_point("router")
graph.add_conditional_edges("router", lambda x: x["route"], {"rag": "rag", "agent": "agent"})
graph.add_edge("rag", END)
graph.add_edge("agent", END)
app_logic = graph.compile()

# --- API ---
class UserRequest(BaseModel):
    question: str

@api_app.post("/chat")
def chat_endpoint(req: UserRequest):
    result = app_logic.invoke({"question": req.question})
    return {"answer": result["answer"]}

if __name__ == "__main__":
    uvicorn.run(api_app, host="0.0.0.0", port=8000)

import { useState } from "react";

function App() {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);

  const sendMessage = async () => {
    const newMessages = [...messages, { sender: "User", text: input }];
    setMessages(newMessages);
    
    // Note: We use 'localhost' here, but this might change with Docker!
    const response = await fetch("http://localhost:8000/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ question: input }),
    });
    const data = await response.json();
    setMessages([...newMessages, { sender: "AI", text: data.answer }]);
    setInput("");
  };

  return (
    

      
🤖 AI Analyst
      {messages.map((m, i) => 
{m.sender}: {m.text}
)}
       setInput(e.target.value)} />
      Send
    
  );
}
export default App;