fix(main.tsx): rename UIMessage→UIMsgLocal to avoid SDK type conflict

langgraph/src/main.tsx

@@ -4,8 +4,7 @@ import { LoadExternalComponent } from "@langchain/langgraph-sdk/react-ui";
 import type { Message } from "@langchain/langgraph-sdk";
 
 // UIMessage is not exported directly — use a local shape
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type UIMsgLocal = { id: string; type: string; name: string; props: Record<string, unknown>; metadata?: { message_id?: string } };
-type UIMessage = { id: string; type: string; name: string; props: Record<string, unknown>; metadata?: { message_id?: string } };
 import { useState, useRef, useEffect } from "react";
 import ComponentMap from "./agent-uis/index.tsx";
 import "./index.css";
@@ -17,7 +16,7 @@ function App() {
   const [input, setInput] = useState("");
   const bottomRef = useRef<HTMLDivElement>(null);
 
-  const thread = useStream<{ messages: Message[]; ui: UIMessage[] }>({
+  const thread = useStream<{ messages: Message[]; ui: UIMsgLocal[] }>({
     apiUrl: LANGGRAPH_URL,
     assistantId: "agent",
     messagesKey: "messages",
@@ -59,12 +58,10 @@ function App() {
 
         {thread.messages.map((message, idx) => {
           // Render UI cards attached to this message
-          const uiItems = (thread.values?.ui ?? []).filter(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            (ui: UIMessage) =>
+          const uiItems = ((thread.values as any)?.ui ?? []).filter(
-              "metadata" in ui &&
+            (ui: UIMsgLocal) => ui.metadata?.message_id === message.id,
-              (ui as UIMessage & { metadata?: { message_id?: string } })
+          ) as UIMsgLocal[];
-                .metadata?.message_id === message.id,
-          );
 
           if (message.type === "human") {
             return (
@@ -98,7 +95,7 @@ function App() {
                   </div>
                 )}
                 {/* UI cards */}
-                {uiItems.map((ui: UIMessage) => (
+                {uiItems.map((ui: UIMsgLocal) => (
                   <LoadExternalComponent
                     key={ui.id}
                     stream={thread}
@@ -117,13 +114,13 @@ function App() {
         {/* Streaming UI cards not yet attached to a completed message */}
         {thread.isLoading &&
           (thread.values?.ui ?? [])
-            .filter((ui: UIMessage) => {
+            .filter((ui: UIMsgLocal) => {
               const attachedToExisting = thread.messages.some(
                 (m) => m.id === ui.metadata?.message_id,
               );
               return !attachedToExisting;
             })
-            .map((ui: UIMessage) => (
+            .map((ui: UIMsgLocal) => (
               <LoadExternalComponent
                 key={ui.id}
                 stream={thread}