diff --git a/components/project/traces/trace-sheet.tsx b/components/project/traces/trace-sheet.tsx
index 241100fe..3cafbaa3 100644
--- a/components/project/traces/trace-sheet.tsx
+++ b/components/project/traces/trace-sheet.tsx
@@ -1,4 +1,5 @@
 import ConversationView from "@/components/shared/conversation-view";
+import LanggraphView from "@/components/shared/langgraph-view";
 import TraceGraph, { AttributesTabs } from "@/components/traces/trace_graph";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -15,7 +16,12 @@ import {
   convertTracesToHierarchy,
 } from "@/lib/trace_utils";
 import { getVendorFromSpan } from "@/lib/utils";
-import { ChevronLeft, CodeIcon, MessageCircle } from "lucide-react";
+import {
+  ChevronLeft,
+  CodeIcon,
+  MessageCircle,
+  NetworkIcon,
+} from "lucide-react";
 import { useEffect, useState } from "react";
 
 export function TraceSheet({
@@ -33,8 +39,9 @@ export function TraceSheet({
   const [selectedVendors, setSelectedVendors] = useState<string[]>(
     trace.vendors
   );
+  const [includesLanggraph, setIncludesLanggraph] = useState<boolean>(false);
   const [spansView, setSpansView] = useState<
-    "SPANS" | "ATTRIBUTES" | "CONVERSATION"
+    "SPANS" | "ATTRIBUTES" | "CONVERSATION" | "LANGGRAPH"
   >("SPANS");
   const [span, setSpan] = useState<any | null>(null);
   const [attributes, setAttributes] = useState<any | null>(null);
@@ -43,6 +50,7 @@ export function TraceSheet({
   useEffect(() => {
     setSelectedTrace(trace.trace_hierarchy);
     setSelectedVendors(trace.vendors);
+    if (trace.vendors.includes("langgraph")) setIncludesLanggraph(true);
     if (!open) setSpansView("SPANS");
   }, [trace, open]);
 
@@ -65,7 +73,9 @@ export function TraceSheet({
               setEvents={setEvents}
             />
           )}
-          {(spansView === "ATTRIBUTES" || spansView === "CONVERSATION") &&
+          {(spansView === "ATTRIBUTES" ||
+            spansView === "CONVERSATION" ||
+            spansView === "LANGGRAPH") &&
             span &&
             attributes &&
             events && (
@@ -98,6 +108,16 @@ export function TraceSheet({
                       <MessageCircle size={16} className="mr-2" />
                       LLM Conversations
                     </Button>
+                    {includesLanggraph && (
+                      <Button
+                        className="w-fit"
+                        variant={"secondary"}
+                        onClick={() => setSpansView("LANGGRAPH")}
+                      >
+                        <NetworkIcon size={16} className="mr-2" />
+                        Langgraph
+                      </Button>
+                    )}
                   </div>
                 </div>
                 <div className="overflow-y-scroll h-[85vh]">
@@ -111,6 +131,9 @@ export function TraceSheet({
                   {spansView === "CONVERSATION" && span && (
                     <ConversationView span={span} />
                   )}
+                  {spansView === "LANGGRAPH" && (
+                    <LanggraphView trace={trace.sorted_trace} />
+                  )}
                 </div>
               </div>
             )}
@@ -136,7 +159,9 @@ function SpansView({
   setSelectedTrace: (trace: any[]) => void;
   selectedVendors: string[];
   setSelectedVendors: (vendors: string[]) => void;
-  setSpansView: (spansView: "SPANS" | "ATTRIBUTES" | "CONVERSATION") => void;
+  setSpansView: (
+    spansView: "SPANS" | "ATTRIBUTES" | "CONVERSATION" | "LANGGRAPH"
+  ) => void;
   setSpan: (span: any) => void;
   setAttributes: (attributes: any) => void;
   setEvents: (events: any) => void;
diff --git a/components/shared/vendor-metadata.tsx b/components/shared/vendor-metadata.tsx
index ab3cef18..34447d83 100644
--- a/components/shared/vendor-metadata.tsx
+++ b/components/shared/vendor-metadata.tsx
@@ -251,7 +251,7 @@ export function VendorLogo({
     );
   }
 
-  if (vendor.includes("langchain")) {
+  if (vendor.includes("langchain") || vendor.includes("langgraph")) {
     const color = vendorColor("langchain");
     return (
       <Image
diff --git a/lib/utils.ts b/lib/utils.ts
index 989fa00c..803c698e 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -692,6 +692,11 @@ export function getVendorFromSpan(span: Span): string {
     serviceName.includes("langchain")
   ) {
     vendor = "langchain";
+  } else if (
+    span.name.includes("langgraph") ||
+    serviceName.includes("langgraph")
+  ) {
+    vendor = "langgraph";
   } else if (
     span.name.includes("llamaindex") ||
     serviceName.includes("llamaindex")
diff --git a/package.json b/package.json
index e9721ece..a184d55b 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
 		"react-query": "^3.39.3",
 		"react-resizable-panels": "^2.0.20",
 		"react-window": "^1.8.10",
-		"reactflow": "^11.11.2",
+		"reactflow": "^11.11.4",
 		"shiki-processor": "^0.1.3",
 		"sonner": "^1.3.1",
 		"sql-bricks": "^3.0.1",