diff --git a/typescript-sdk/apps/dojo/public/images/Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg b/typescript-sdk/apps/dojo/public/images/Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg
new file mode 100644
index 000000000..f55e74033
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg b/typescript-sdk/apps/dojo/public/images/Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg
new file mode 100644
index 000000000..6d6af4c77
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg b/typescript-sdk/apps/dojo/public/images/Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg
new file mode 100644
index 000000000..40adf209f
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg b/typescript-sdk/apps/dojo/public/images/Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg
new file mode 100644
index 000000000..7258d812d
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg b/typescript-sdk/apps/dojo/public/images/Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg
new file mode 100644
index 000000000..40716614f
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg b/typescript-sdk/apps/dojo/public/images/Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg
new file mode 100644
index 000000000..6442112a2
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg b/typescript-sdk/apps/dojo/public/images/Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg
new file mode 100644
index 000000000..3cb13e404
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg b/typescript-sdk/apps/dojo/public/images/Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg
new file mode 100644
index 000000000..a1f03f824
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg b/typescript-sdk/apps/dojo/public/images/Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg
new file mode 100644
index 000000000..c8e85d3f2
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg differ
diff --git a/typescript-sdk/apps/dojo/public/images/Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg b/typescript-sdk/apps/dojo/public/images/Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg
new file mode 100644
index 000000000..de88f84af
Binary files /dev/null and b/typescript-sdk/apps/dojo/public/images/Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg differ
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
index c44cd0b1f..4fbfbbea6 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
@@ -4,6 +4,7 @@ import "@copilotkit/react-ui/styles.css";
 import "./style.css";
 import { CopilotKit, useCoAgentStateRender } from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
+import { useTheme } from "next-themes";
 
 interface AgenticGenerativeUIProps {
   params: Promise<{
@@ -33,6 +34,7 @@ interface AgentState {
 }
 
 const Chat = () => {
+  const { theme } = useTheme();
   useCoAgentStateRender<AgentState>({
     name: "agentic_generative_ui",
     render: ({ state }) => {
@@ -40,35 +42,138 @@ const Chat = () => {
         return null;
       }
 
+      const completedCount = state.steps.filter(step => step.status === "completed").length;
+      const progressPercentage = (completedCount / state.steps.length) * 100;
+
       return (
         <div className="flex">
-          <div className="bg-gray-100 rounded-lg w-[800px] p-4 text-black space-y-2">
-            {state.steps.map((step, index) => {
-              if (step.status === "completed") {
-                return (
-                  <div key={index} className="text-sm">
-                    ✓ {step.description}
-                  </div>
-                );
-              } else if (
-                step.status === "pending" &&
-                index === state.steps.findIndex((s) => s.status === "pending")
-              ) {
-                return (
-                  <div key={index} className="text-2xl font-bold text-slate-700">
-                    <Spinner />
-                    {step.description}
-                  </div>
-                );
-              } else {
+          <div className={`relative rounded-xl w-[700px] p-6 shadow-lg backdrop-blur-sm ${
+            theme === "dark" 
+              ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
+              : "bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80"
+          }`}>
+            {/* Header */}
+            <div className="mb-5">
+              <div className="flex items-center justify-between mb-3">
+                <h3 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                  Task Progress
+                </h3>
+                <div className={`text-sm ${theme === "dark" ? "text-slate-400" : "text-gray-500"}`}>
+                  {completedCount}/{state.steps.length} Complete
+                </div>
+              </div>
+              
+              {/* Progress Bar */}
+              <div className={`relative h-2 rounded-full overflow-hidden ${theme === "dark" ? "bg-slate-700" : "bg-gray-200"}`}>
+                <div 
+                  className="absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-1000 ease-out"
+                  style={{ width: `${progressPercentage}%` }}
+                />
+                <div className={`absolute top-0 left-0 h-full w-full bg-gradient-to-r from-transparent to-transparent animate-pulse ${
+                  theme === "dark" ? "via-white/20" : "via-white/40"
+                }`} />
+              </div>
+            </div>
+
+            {/* Steps */}
+            <div className="space-y-2">
+              {state.steps.map((step, index) => {
+                const isCompleted = step.status === "completed";
+                const isCurrentPending = step.status === "pending" && 
+                  index === state.steps.findIndex((s) => s.status === "pending");
+                const isFuturePending = step.status === "pending" && !isCurrentPending;
+
                 return (
-                  <div key={index} className="text-sm">
-                    <Spinner />
-                    {step.description}
+                  <div 
+                    key={index} 
+                    className={`relative flex items-center p-2.5 rounded-lg transition-all duration-500 ${
+                      isCompleted 
+                        ? theme === "dark" 
+                          ? "bg-gradient-to-r from-green-900/30 to-emerald-900/20 border border-green-500/30"
+                          : "bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200/60"
+                        : isCurrentPending
+                        ? theme === "dark"
+                          ? "bg-gradient-to-r from-blue-900/40 to-purple-900/30 border border-blue-500/50 shadow-lg shadow-blue-500/20"
+                          : "bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60 shadow-md shadow-blue-200/50"
+                        : theme === "dark"
+                          ? "bg-slate-800/50 border border-slate-600/30"
+                          : "bg-gray-50/50 border border-gray-200/60"
+                    }`}
+                  >
+                    {/* Connector Line */}
+                    {index < state.steps.length - 1 && (
+                      <div className={`absolute left-5 top-full w-0.5 h-2 bg-gradient-to-b ${
+                        theme === "dark" ? "from-slate-500 to-slate-600" : "from-gray-300 to-gray-400"
+                      }`} />
+                    )}
+
+                    {/* Status Icon */}
+                    <div className={`flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center mr-2 ${
+                      isCompleted 
+                        ? theme === "dark"
+                          ? "bg-gradient-to-br from-green-500 to-emerald-600 shadow-lg shadow-green-500/30"
+                          : "bg-gradient-to-br from-green-500 to-emerald-600 shadow-md shadow-green-200"
+                        : isCurrentPending
+                        ? theme === "dark"
+                          ? "bg-gradient-to-br from-blue-500 to-purple-600 shadow-lg shadow-blue-500/30"
+                          : "bg-gradient-to-br from-blue-500 to-purple-600 shadow-md shadow-blue-200"
+                        : theme === "dark"
+                          ? "bg-slate-700 border border-slate-600"
+                          : "bg-gray-300 border border-gray-400"
+                    }`}>
+                      {isCompleted ? (
+                        <CheckIcon />
+                      ) : isCurrentPending ? (
+                        <SpinnerIcon />
+                      ) : (
+                        <ClockIcon theme={theme} />
+                      )}
+                    </div>
+
+                    {/* Step Content */}
+                    <div className="flex-1 min-w-0">
+                      <div className={`font-semibold transition-all duration-300 text-sm ${
+                        isCompleted 
+                          ? theme === "dark" ? "text-green-300" : "text-green-700"
+                          : isCurrentPending
+                          ? theme === "dark" ? "text-blue-300 text-base" : "text-blue-700 text-base"
+                          : theme === "dark" ? "text-slate-400" : "text-gray-500"
+                      }`}>
+                        {step.description}
+                      </div>
+                      {isCurrentPending && (
+                        <div className={`text-sm mt-1 animate-pulse ${
+                          theme === "dark" ? "text-blue-400" : "text-blue-600"
+                        }`}>
+                          Processing...
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Animated Background for Current Step */}
+                    {isCurrentPending && (
+                      <div className={`absolute inset-0 rounded-lg bg-gradient-to-r animate-pulse ${
+                        theme === "dark" 
+                          ? "from-blue-500/10 to-purple-500/10" 
+                          : "from-blue-100/50 to-purple-100/50"
+                      }`} />
+                    )}
                   </div>
                 );
-              }
-            })}
+              })}
+            </div>
+
+            {/* Decorative Elements */}
+            <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${
+              theme === "dark" 
+                ? "bg-gradient-to-br from-blue-500/10 to-purple-500/10" 
+                : "bg-gradient-to-br from-blue-200/30 to-purple-200/30"
+            }`} />
+            <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${
+              theme === "dark" 
+                ? "bg-gradient-to-br from-green-500/10 to-emerald-500/10" 
+                : "bg-gradient-to-br from-green-200/30 to-emerald-200/30"
+            }`} />
           </div>
         </div>
       );
@@ -90,10 +195,19 @@ const Chat = () => {
   );
 };
 
-function Spinner() {
+// Enhanced Icons
+function CheckIcon() {
+  return (
+    <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}
+
+function SpinnerIcon() {
   return (
     <svg
-      className="mr-2 size-3 animate-spin text-slate-500"
+      className="w-4 h-4 animate-spin text-white"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
@@ -105,12 +219,21 @@ function Spinner() {
         r="10"
         stroke="currentColor"
         strokeWidth="4"
-      ></circle>
+      />
       <path
         className="opacity-75"
         fill="currentColor"
         d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
+      />
+    </svg>
+  );
+}
+
+function ClockIcon({ theme }: { theme?: string }) {
+  return (
+    <svg className={`w-3 h-3 ${theme === "dark" ? "text-slate-400" : "text-gray-600"}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="10" strokeWidth="2"/>
+      <polyline points="12,6 12,12 16,14" strokeWidth="2"/>
     </svg>
   );
 }
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
index 562ab681c..7e3764a1d 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
@@ -4,6 +4,7 @@ import "@copilotkit/react-ui/styles.css";
 import "./style.css";
 import { CopilotKit, useCopilotAction, useLangGraphInterrupt } from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
+import { useTheme } from "next-themes";
 
 interface HumanInTheLoopProps {
   params: Promise<{
@@ -30,11 +31,201 @@ interface Step {
   description: string;
   status: "disabled" | "enabled" | "executing";
 }
+
+// Shared UI Components
+const StepContainer = ({ theme, children }: { theme?: string; children: React.ReactNode }) => (
+  <div className="flex">
+    <div className={`relative rounded-xl w-[600px] p-6 shadow-lg backdrop-blur-sm ${
+      theme === "dark" 
+        ? "bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white border border-slate-700/50 shadow-2xl"
+        : "bg-gradient-to-br from-white via-gray-50 to-white text-gray-800 border border-gray-200/80"
+    }`}>
+      {children}
+    </div>
+  </div>
+);
+
+const StepHeader = ({ 
+  theme, 
+  enabledCount, 
+  totalCount, 
+  status, 
+  showStatus = false 
+}: { 
+  theme?: string; 
+  enabledCount: number; 
+  totalCount: number; 
+  status?: string;
+  showStatus?: boolean;
+}) => (
+  <div className="mb-5">
+    <div className="flex items-center justify-between mb-3">
+      <h2 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+        Select Steps
+      </h2>
+      <div className="flex items-center gap-3">
+        <div className={`text-sm ${theme === "dark" ? "text-slate-400" : "text-gray-500"}`}>
+          {enabledCount}/{totalCount} Selected
+        </div>
+        {showStatus && (
+          <div className={`text-xs px-2 py-1 rounded-full font-medium ${
+            status === "executing" 
+              ? theme === "dark" 
+                ? "bg-blue-900/30 text-blue-300 border border-blue-500/30"
+                : "bg-blue-50 text-blue-600 border border-blue-200"
+              : theme === "dark"
+                ? "bg-slate-700 text-slate-300"
+                : "bg-gray-100 text-gray-600"
+          }`}>
+            {status === "executing" ? "Ready" : "Waiting"}
+          </div>
+        )}
+      </div>
+    </div>
+    
+    <div className={`relative h-2 rounded-full overflow-hidden ${theme === "dark" ? "bg-slate-700" : "bg-gray-200"}`}>
+      <div 
+        className="absolute top-0 left-0 h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500 ease-out"
+        style={{ width: `${totalCount > 0 ? (enabledCount / totalCount) * 100 : 0}%` }}
+      />
+    </div>
+  </div>
+);
+
+const StepItem = ({ 
+  step, 
+  theme, 
+  status, 
+  onToggle, 
+  disabled = false 
+}: { 
+  step: { description: string; status: string }; 
+  theme?: string; 
+  status?: string;
+  onToggle: () => void;
+  disabled?: boolean;
+}) => (
+  <div className={`flex items-center p-3 rounded-lg transition-all duration-300 ${
+    step.status === "enabled"
+      ? theme === "dark" 
+        ? "bg-gradient-to-r from-blue-900/20 to-purple-900/10 border border-blue-500/30"
+        : "bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200/60"
+      : theme === "dark"
+        ? "bg-slate-800/30 border border-slate-600/30"
+        : "bg-gray-50/50 border border-gray-200/40"
+  }`}>
+    <label className="flex items-center cursor-pointer w-full">
+      <div className="relative">
+        <input
+          type="checkbox"
+          checked={step.status === "enabled"}
+          onChange={onToggle}
+          className="sr-only"
+          disabled={disabled}
+        />
+        <div className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all duration-200 ${
+          step.status === "enabled"
+            ? "bg-gradient-to-br from-blue-500 to-purple-600 border-blue-500"
+            : theme === "dark"
+              ? "border-slate-400 bg-slate-700"
+              : "border-gray-300 bg-white"
+        } ${disabled ? "opacity-60" : ""}`}>
+          {step.status === "enabled" && (
+            <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+            </svg>
+          )}
+        </div>
+      </div>
+      <span className={`ml-3 font-medium transition-all duration-300 ${
+        step.status !== "enabled" && status != "inProgress"
+          ? `line-through ${theme === "dark" ? "text-slate-500" : "text-gray-400"}`
+          : theme === "dark" ? "text-white" : "text-gray-800"
+      } ${disabled ? "opacity-60" : ""}`}>
+        {step.description}
+      </span>
+    </label>
+  </div>
+);
+
+const ActionButton = ({ 
+  variant, 
+  theme, 
+  disabled, 
+  onClick, 
+  children 
+}: { 
+  variant: "primary" | "secondary" | "success" | "danger";
+  theme?: string;
+  disabled?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) => {
+  const baseClasses = "px-6 py-3 rounded-lg font-semibold transition-all duration-200";
+  const enabledClasses = "hover:scale-105 shadow-md hover:shadow-lg";
+  const disabledClasses = "opacity-50 cursor-not-allowed";
+  
+  const variantClasses = {
+    primary: "bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800 text-white shadow-lg hover:shadow-xl",
+    secondary: theme === "dark"
+      ? "bg-slate-700 hover:bg-slate-600 text-white border border-slate-600 hover:border-slate-500"
+      : "bg-gray-100 hover:bg-gray-200 text-gray-800 border border-gray-300 hover:border-gray-400",
+    success: "bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl",
+    danger: "bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white shadow-lg hover:shadow-xl"
+  };
+
+  return (
+    <button
+      className={`${baseClasses} ${disabled ? disabledClasses : enabledClasses} ${
+        disabled && variant === "secondary" ? "bg-gray-200 text-gray-500" : 
+        disabled && variant === "success" ? "bg-gray-400" :
+        variantClasses[variant]
+      }`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};
+
+const DecorativeElements = ({ 
+  theme, 
+  variant = "default" 
+}: { 
+  theme?: string; 
+  variant?: "default" | "success" | "danger" 
+}) => (
+  <>
+    <div className={`absolute top-3 right-3 w-16 h-16 rounded-full blur-xl ${
+      variant === "success"
+        ? theme === "dark" 
+          ? "bg-gradient-to-br from-green-500/10 to-emerald-500/10" 
+          : "bg-gradient-to-br from-green-200/30 to-emerald-200/30"
+        : variant === "danger"
+          ? theme === "dark" 
+            ? "bg-gradient-to-br from-red-500/10 to-pink-500/10" 
+            : "bg-gradient-to-br from-red-200/30 to-pink-200/30"
+          : theme === "dark" 
+            ? "bg-gradient-to-br from-blue-500/10 to-purple-500/10" 
+            : "bg-gradient-to-br from-blue-200/30 to-purple-200/30"
+    }`} />
+    <div className={`absolute bottom-3 left-3 w-12 h-12 rounded-full blur-xl ${
+      variant === "default"
+        ? theme === "dark" 
+          ? "bg-gradient-to-br from-purple-500/10 to-pink-500/10" 
+          : "bg-gradient-to-br from-purple-200/30 to-pink-200/30"
+        : "opacity-50"
+    }`} />
+  </>
+);
 const InterruptHumanInTheLoop: React.FC<{
   event: { value: { steps: Step[] } };
   resolve: (value: string) => void;
 }> = ({ event, resolve }) => {
-  // Ensure we have valid steps data
+  const { theme } = useTheme();
+  
+  // Parse and initialize steps data
   let initialSteps: Step[] = [];
   if (event.value && event.value.steps && Array.isArray(event.value.steps)) {
     initialSteps = event.value.steps.map((step: any) => ({
@@ -44,52 +235,58 @@ const InterruptHumanInTheLoop: React.FC<{
   }
 
   const [localSteps, setLocalSteps] = useState<Step[]>(initialSteps);
+  const enabledCount = localSteps.filter(step => step.status === "enabled").length;
 
-  const handleCheckboxChange = (index: number) => {
+  const handleStepToggle = (index: number) => {
     setLocalSteps((prevSteps) =>
       prevSteps.map((step, i) =>
         i === index
-          ? {
-              ...step,
-              status: step.status === "enabled" ? "disabled" : "enabled",
-            }
+          ? { ...step, status: step.status === "enabled" ? "disabled" : "enabled" }
           : step,
       ),
     );
   };
 
+  const handlePerformSteps = () => {
+    const selectedSteps = localSteps
+      .filter((step) => step.status === "enabled")
+      .map((step) => step.description);
+    resolve("The user selected the following steps: " + selectedSteps.join(", "));
+  };
+
   return (
-    <div className="flex flex-col gap-4 w-[500px] bg-gray-100 rounded-lg p-8 mb-4">
-      <div className="text-black space-y-2">
-        <h2 className="text-lg font-bold mb-4">Select Steps</h2>
+    <StepContainer theme={theme}>
+      <StepHeader theme={theme} enabledCount={enabledCount} totalCount={localSteps.length} />
+      
+      <div className="space-y-3 mb-6">
         {localSteps.map((step, index) => (
-          <div key={index} className="text-sm flex items-center">
-            <label className="flex items-center cursor-pointer">
-              <input
-                type="checkbox"
-                checked={step.status === "enabled"}
-                onChange={() => handleCheckboxChange(index)}
-                className="mr-2"
-              />
-              <span className={step.status !== "enabled" ? "line-through" : ""}>
-                {step.description}
-              </span>
-            </label>
-          </div>
+          <StepItem
+            key={index}
+            step={step}
+            theme={theme}
+            onToggle={() => handleStepToggle(index)}
+          />
         ))}
-        <button
-          className="mt-4 bg-gradient-to-r from-purple-400 to-purple-600 text-white py-2 px-4 rounded cursor-pointer w-48 font-bold"
-          onClick={() => {
-            const selectedSteps = localSteps
-              .filter((step) => step.status === "enabled")
-              .map((step) => step.description);
-            resolve("The user selected the following steps: " + selectedSteps.join(", "));
-          }}
+      </div>
+
+      <div className="flex justify-center">
+        <ActionButton
+          variant="primary"
+          theme={theme}
+          onClick={handlePerformSteps}
         >
-          ✨ Perform Steps
-        </button>
+          <span className="text-lg">✨</span>
+          Perform Steps
+          <span className={`ml-1 px-2 py-1 rounded-full text-xs font-bold ${
+            theme === "dark" ? "bg-purple-800/50" : "bg-purple-600/20"
+          }`}>
+            {enabledCount}
+          </span>
+        </ActionButton>
       </div>
-    </div>
+
+      <DecorativeElements theme={theme} />
+    </StepContainer>
   );
 };
 
@@ -143,12 +340,8 @@ const Chat = ({ integrationId }: { integrationId: string }) => {
 };
 
 const StepsFeedback = ({ args, respond, status }: { args: any; respond: any; status: any }) => {
-  const [localSteps, setLocalSteps] = useState<
-    {
-      description: string;
-      status: "disabled" | "enabled" | "executing";
-    }[]
-  >([]);
+  const { theme } = useTheme();
+  const [localSteps, setLocalSteps] = useState<Step[]>([]);
   const [accepted, setAccepted] = useState<boolean | null>(null);
 
   useEffect(() => {
@@ -162,105 +355,108 @@ const StepsFeedback = ({ args, respond, status }: { args: any; respond: any; sta
   }
 
   const steps = localSteps.length > 0 ? localSteps : args.steps;
+  const enabledCount = steps.filter((step: any) => step.status === "enabled").length;
 
-  const handleCheckboxChange = (index: number) => {
+  const handleStepToggle = (index: number) => {
     setLocalSteps((prevSteps) =>
       prevSteps.map((step, i) =>
         i === index
-          ? {
-              ...step,
-              status: step.status === "enabled" ? "disabled" : "enabled",
-            }
+          ? { ...step, status: step.status === "enabled" ? "disabled" : "enabled" }
           : step,
       ),
     );
   };
 
+  const handleReject = () => {
+    if (respond) {
+      setAccepted(false);
+      respond({ accepted: false });
+    }
+  };
+
+  const handleConfirm = () => {
+    if (respond) {
+      setAccepted(true);
+      respond({ accepted: true, steps: localSteps.filter(step => step.status === "enabled")});
+    }
+  };
+
   return (
-    <div className="flex flex-col gap-4 w-[500px] bg-gray-100 rounded-lg p-8 mb-4">
-      <div className=" text-black space-y-2">
-        <h2 className="text-lg font-bold mb-4">Select Steps</h2>
+    <StepContainer theme={theme}>
+      <StepHeader 
+        theme={theme} 
+        enabledCount={enabledCount} 
+        totalCount={steps.length} 
+        status={status}
+        showStatus={true}
+      />
+      
+      <div className="space-y-3 mb-6">
         {steps.map((step: any, index: any) => (
-          <div key={index} className="text-sm flex items-center">
-            <input
-              type="checkbox"
-              checked={step.status === "enabled"}
-              onChange={() => handleCheckboxChange(index)}
-              className="mr-2"
-            />
-            <span
-              className={step.status !== "enabled" && status != "inProgress" ? "line-through" : ""}
-            >
-              {step.description}
-            </span>
-          </div>
+          <StepItem
+            key={index}
+            step={step}
+            theme={theme}
+            status={status}
+            onToggle={() => handleStepToggle(index)}
+            disabled={status !== "executing"}
+          />
         ))}
       </div>
+
+      {/* Action Buttons - Different logic from InterruptHumanInTheLoop */}
       {accepted === null && (
-        <div className="flex justify-end space-x-4">
-          <button
-            className={`bg-gray-200 text-black py-2 px-4 rounded disabled:opacity-50 ${
-              status === "executing" ? "cursor-pointer" : "cursor-default"
-            }`}
+        <div className="flex justify-center gap-4">
+          <ActionButton
+            variant="secondary"
+            theme={theme}
             disabled={status !== "executing"}
-            onClick={() => {
-              if (respond) {
-                setAccepted(false);
-                respond({ accepted: false });
-              }
-            }}
+            onClick={handleReject}
           >
+            <span className="mr-2">✗</span>
             Reject
-          </button>
-          <button
-            className={`bg-black text-white py-2 px-4 rounded disabled:opacity-50 ${
-              status === "executing" ? "cursor-pointer" : "cursor-default"
-            }`}
+          </ActionButton>
+          <ActionButton
+            variant="success"
+            theme={theme}
             disabled={status !== "executing"}
-            onClick={() => {
-              if (respond) {
-                setAccepted(true);
-                respond({ accepted: true, steps: localSteps.filter(step => step.status === "enabled")});
-              }
-            }}
+            onClick={handleConfirm}
           >
+            <span className="mr-2">✓</span>
             Confirm
-          </button>
+            <span className={`ml-2 px-2 py-1 rounded-full text-xs font-bold ${
+              theme === "dark" ? "bg-green-800/50" : "bg-green-600/20"
+            }`}>
+              {enabledCount}
+            </span>
+          </ActionButton>
         </div>
       )}
+
+      {/* Result State - Unique to StepsFeedback */}
       {accepted !== null && (
-        <div className="flex justify-end">
-          <div className="mt-4 bg-gray-200 text-black py-2 px-4 rounded inline-block">
-            {accepted ? "✓ Accepted" : "✗ Rejected"}
+        <div className="flex justify-center">
+          <div className={`px-6 py-3 rounded-lg font-semibold flex items-center gap-2 ${
+            accepted 
+              ? theme === "dark"
+                ? "bg-green-900/30 text-green-300 border border-green-500/30"
+                : "bg-green-50 text-green-700 border border-green-200"
+              : theme === "dark"
+                ? "bg-red-900/30 text-red-300 border border-red-500/30"
+                : "bg-red-50 text-red-700 border border-red-200"
+          }`}>
+            <span className="text-lg">{accepted ? "✓" : "✗"}</span>
+            {accepted ? "Accepted" : "Rejected"}
           </div>
         </div>
       )}
-    </div>
+
+      <DecorativeElements theme={theme} variant={
+        accepted === true ? "success" : accepted === false ? "danger" : "default"
+      } />
+    </StepContainer>
   );
 };
 
-function Spinner() {
-  return (
-    <svg
-      className="mr-2 size-3 animate-spin text-slate-500"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      ></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
-    </svg>
-  );
-}
+
 export default HumanInTheLoop;
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
index 890574f43..af75107e6 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/page.tsx
@@ -1,10 +1,10 @@
 "use client";
 import { CopilotKit, useCopilotAction } from "@copilotkit/react-core";
 import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import "@copilotkit/react-ui/styles.css";
 import "./style.css";
-import React from "react";
+import React, { useMemo } from "react";
 
 interface ToolBasedGenerativeUIProps {
   params: Promise<{
@@ -12,6 +12,19 @@ interface ToolBasedGenerativeUIProps {
   }>;
 }
 
+interface GenerateHaiku{
+  japanese : string[] | [],
+  english : string[] | [],
+  image_names : string[] | [],
+  selectedImage : string | null,
+}
+
+interface HaikuCardProps{
+  generatedHaiku : GenerateHaiku | Partial<GenerateHaiku>
+  setHaikus : Dispatch<SetStateAction<GenerateHaiku[]>>
+  haikus : GenerateHaiku[]
+}
+
 export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIProps) {
   const { integrationId } = React.use(params);
 
@@ -45,14 +58,130 @@ export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIP
   );
 }
 
+const VALID_IMAGE_NAMES = [
+  "Osaka_Castle_Turret_Stone_Wall_Pine_Trees_Daytime.jpg",
+  "Tokyo_Skyline_Night_Tokyo_Tower_Mount_Fuji_View.jpg",
+  "Itsukushima_Shrine_Miyajima_Floating_Torii_Gate_Sunset_Long_Exposure.jpg",
+  "Takachiho_Gorge_Waterfall_River_Lush_Greenery_Japan.jpg",
+  "Bonsai_Tree_Potted_Japanese_Art_Green_Foliage.jpeg",
+  "Shirakawa-go_Gassho-zukuri_Thatched_Roof_Village_Aerial_View.jpg",
+  "Ginkaku-ji_Silver_Pavilion_Kyoto_Japanese_Garden_Pond_Reflection.jpg",
+  "Senso-ji_Temple_Asakusa_Cherry_Blossoms_Kimono_Umbrella.jpg",
+  "Cherry_Blossoms_Sakura_Night_View_City_Lights_Japan.jpg",
+  "Mount_Fuji_Lake_Reflection_Cherry_Blossoms_Sakura_Spring.jpg"
+];
+
+function HaikuCard({generatedHaiku, setHaikus, haikus} : HaikuCardProps) {
+  return (
+    <div className="suggestion-card text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100">
+      <div className="mb-4 pb-4">
+        {generatedHaiku?.japanese?.map((line, index) => (
+          <div className="flex items-center gap-3 mb-2" key={index}>
+            <p className="text-lg font-bold">{line}</p>
+            <p className="text-sm font-light">
+              {generatedHaiku.english?.[index]}
+            </p>
+          </div>
+        ))}
+        {generatedHaiku?.japanese && generatedHaiku.japanese.length >= 2 && (
+          <div className="mt-3 flex gap-2 justify-between w-full suggestion-image-container">
+            {(() => {
+              const firstLine = generatedHaiku?.japanese?.[0];
+              if (!firstLine) return null;
+              const haikuIndex = haikus.findIndex((h: any) => h.japanese[0] === firstLine);
+              const haiku = haikus[haikuIndex];
+              if (!haiku?.image_names) return null;
+
+              return haiku.image_names.map((imageName, imgIndex) => (
+                <img
+                  key={haikus.length + "_" + imageName}
+                  src={`/images/${imageName}`}
+                  alt={imageName}
+                  tabIndex={0}
+                  className={`${haiku.selectedImage === imageName ? "suggestion-card-image-focus" : "suggestion-card-image"}`}
+                  onClick={() => {
+                    setHaikus(prevHaikus => {
+                      const newHaikus = prevHaikus.map((h, idx) => {
+                        if (idx === haikuIndex) {
+                          return {
+                            ...h,
+                            selectedImage: imageName
+                          };
+                        }
+                        return h;
+                      });
+                      return newHaikus;
+                    });
+                  }}
+                />
+              ));
+            })()}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface Haiku {
+  japanese: string[];
+  english: string[];
+  image_names: string[];
+  selectedImage: string | null;
+}
+
 function Haiku() {
-  const [haiku, setHaiku] = useState<{
-    japanese: string[];
-    english: string[];
-  }>({
+  const [haikus, setHaikus] = useState<Haiku[]>([{
     japanese: ["仮の句よ", "まっさらながら", "花を呼ぶ"],
-    english: ["A placeholder verse—", "even in a blank canvas,", "it beckons flowers."],
-  });
+    english: [
+      "A placeholder verse—",
+      "even in a blank canvas,",
+      "it beckons flowers.",
+    ],
+    image_names: [],
+    selectedImage: null,
+  }])
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isJustApplied, setIsJustApplied] = useState(false);
+
+  const validateAndCorrectImageNames = (rawNames: string[] | undefined): string[] | null => {
+    if (!rawNames || rawNames.length !== 3) {
+      return null;
+    }
+
+    const correctedNames: string[] = [];
+    const usedValidNames = new Set<string>();
+
+    for (const name of rawNames) {
+      if (VALID_IMAGE_NAMES.includes(name) && !usedValidNames.has(name)) {
+        correctedNames.push(name);
+        usedValidNames.add(name);
+        if (correctedNames.length === 3) break;
+      }
+    }
+
+    if (correctedNames.length < 3) {
+      const availableFallbacks = VALID_IMAGE_NAMES.filter(name => !usedValidNames.has(name));
+      for (let i = availableFallbacks.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [availableFallbacks[i], availableFallbacks[j]] = [availableFallbacks[j], availableFallbacks[i]];
+      }
+
+      while (correctedNames.length < 3 && availableFallbacks.length > 0) {
+        const fallbackName = availableFallbacks.pop();
+        if (fallbackName) {
+          correctedNames.push(fallbackName);
+        }
+      }
+    }
+
+    while (correctedNames.length < 3 && VALID_IMAGE_NAMES.length > 0) {
+      const fallbackName = VALID_IMAGE_NAMES[Math.floor(Math.random() * VALID_IMAGE_NAMES.length)];
+      correctedNames.push(fallbackName);
+    }
+
+    return correctedNames.slice(0, 3);
+  };
 
   useCopilotAction({
     name: "generate_haiku",
@@ -65,62 +194,137 @@ function Haiku() {
         name: "english",
         type: "string[]",
       },
+      {
+        name: "image_names",
+        type: "string[]",
+        description: "Names of 3 relevant images",
+      },
     ],
     followUp: false,
-    handler: async () => {
+    handler: async ({ japanese, english, image_names }) => {
+      const finalCorrectedImages = validateAndCorrectImageNames(image_names);
+      const newHaiku = {
+        japanese: japanese || [],
+        english: english || [],
+        image_names: finalCorrectedImages || [],
+        selectedImage: finalCorrectedImages?.[0] || null,
+      };
+      setHaikus(prev => [...prev, newHaiku]);
+      setActiveIndex(haikus.length - 1);
+      setIsJustApplied(true);
+      setTimeout(() => setIsJustApplied(false), 600);
       return "Haiku generated.";
     },
-    render: ({ args: generatedHaiku, result, status }) => {
-      return <HaikuApproval setHaiku={setHaiku} generatedHaiku={generatedHaiku} status={status} />;
+    render: ({ args: generatedHaiku }) => {
+      return (
+        <HaikuCard generatedHaiku={generatedHaiku} setHaikus={setHaikus} haikus={haikus} />
+      );
     },
-  });
-  return (
-    <>
-      <div className="text-left">
-        {haiku?.japanese.map((line, index) => (
-          <div className="flex items-center gap-6 mb-2" key={index}>
-            <p className="text-4xl font-bold text-gray-500">{line}</p>
-            <p className="text-base font-light">{haiku?.english?.[index]}</p>
-          </div>
-        ))}
-      </div>
-    </>
-  );
-}
-
-interface HaikuApprovalProps {
-  setHaiku: any;
-  status: any;
-  generatedHaiku: any;
-}
+  }, [haikus]);
 
-function HaikuApproval({ setHaiku, status, generatedHaiku }: HaikuApprovalProps) {
-  const [isApplied, setIsApplied] = useState(false);
-  if (!generatedHaiku || !generatedHaiku.japanese || !generatedHaiku.japanese.length) {
-    return <></>;
-  }
+  const generatedHaikus = useMemo(() => (
+    haikus.filter((haiku) => haiku.english[0] !== "A placeholder verse—")
+  ), [haikus]);
 
   return (
-    <div className="text-left rounded-md p-4 mt-4 mb-4 flex flex-col bg-gray-100 dark:bg-zinc-900">
-      <div className={status === "complete" ? "border-b border-gray-300 mb-4" : ""}>
-        {generatedHaiku?.japanese?.map((line: string, index: number) => (
-          <div className="flex items-center gap-3 mb-2 pb-2" key={index}>
-            <p className="text-lg font-bold">{line}</p>
-            <p className="text-sm font-light">{generatedHaiku?.english?.[index]}</p>
-          </div>
-        ))}
-      </div>
-      {status === "complete" && (
-        <button
-          onClick={() => {
-            setHaiku(generatedHaiku);
-            setIsApplied(true);
-          }}
-          className="ml-auto px-3 py-1 bg-white dark:bg-black text-black dark:text-white text-sm rounded cursor-pointer font-sm border "
-        >
-          {isApplied ? "Applied ✓" : "Apply"}
-        </button>
+    <div className="flex h-screen w-full">
+
+      {/* Thumbnail List */}
+      {generatedHaikus.length && (
+        <div className="w-40 p-4 border-r border-gray-200 overflow-y-auto overflow-x-hidden">
+          {generatedHaikus.map((haiku, index) => (
+            <div
+              key={index}
+              className={`haiku-card animated-fade-in mb-4 cursor-pointer ${index === activeIndex ? 'active' : ''}`}
+              style={{
+                width: '80px',
+                transform: 'scale(0.2)',
+                transformOrigin: 'top left',
+                marginBottom: '-340px',
+                opacity: index === activeIndex ? 1 : 0.5,
+                transition: 'opacity 0.2s',
+              }}
+              onClick={() => setActiveIndex(index)}
+            >
+              {haiku.japanese.map((line, lineIndex) => (
+                <div
+                  className="flex items-start gap-2 mb-2 haiku-line"
+                  key={lineIndex}
+                >
+                  <p className="text-2xl font-bold text-gray-600 w-auto">{line}</p>
+                  <p className="text-xs font-light text-gray-500 w-auto">{haiku.english?.[lineIndex]}</p>
+                </div>
+              ))}
+              {haiku.image_names && haiku.image_names.length === 3 && (
+                <div className="mt-2 flex gap-2 justify-center">
+                  {haiku.image_names.map((imageName, imgIndex) => (
+                    <img
+                      style={{
+                        width: '110px',
+                        height: '110px',
+                        objectFit: 'cover',
+                      }}
+                      key={imageName}
+                      src={`/images/${imageName}`}
+                      alt={imageName || ""}
+                      className="haiku-card-image w-12 h-12 object-cover"
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
       )}
+
+      {/* Main Display */}
+      {/* Add a margin to the left of margin-left: -48px; */}
+      <div className="flex-1 p-8 flex items-center justify-center " style={{ marginLeft: '-48px' }}>
+        <div className="haiku-stack">
+          {haikus.filter((_haiku: Haiku, index: number) => {
+            if (haikus.length == 1) return true;
+            else return index == activeIndex + 1;
+          }).map((haiku, index) => (
+            <div
+              key={index}
+              className={`haiku-card animated-fade-in ${isJustApplied && index === activeIndex ? 'applied-flash' : ''} ${index === activeIndex ? 'active' : ''}`}
+              style={{
+                zIndex: index === activeIndex ? haikus.length : index,
+                transform: `translateY(${index === activeIndex ? '0' : `${(index - activeIndex) * 20}px`}) scale(${index === activeIndex ? '1' : '0.95'})`,
+              }}
+              // onClick={() => setActiveIndex(index)}
+            >
+              {haiku.japanese.map((line, lineIndex) => (
+                <div
+                  className="flex items-start gap-4 mb-4 haiku-line"
+                  key={lineIndex}
+                  style={{ animationDelay: `${lineIndex * 0.1}s` }}
+                >
+                  <p className="text-4xl font-bold text-gray-600 w-auto">{line}</p>
+                  <p className="text-base font-light text-gray-500 w-auto">{haiku.english?.[lineIndex]}</p>
+                </div>
+              ))}
+              {haiku.image_names && haiku.image_names.length === 3 && (
+                <div className="mt-6 flex gap-4 justify-center">
+                  {haiku.image_names.map((imageName, imgIndex) => (
+                    <img
+                      key={imageName}
+                      src={`/images/${imageName}`}
+                      alt={imageName || ""}
+                      style={{
+                        width: '130px',
+                        height: '130px',
+                        objectFit: 'cover',
+                      }}
+                      className={(haiku.selectedImage === imageName) ? `suggestion-card-image-focus` : `haiku-card-image`}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/style.css b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/style.css
index 8b7289093..62a7e1692 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/style.css
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/tool_based_generative_ui/style.css
@@ -1,3 +1,224 @@
 .copilotKitWindow {
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
+
+.copilotKitHeader {
+  border-top-left-radius: 5px !important;
+}
+
+.page-background {
+  /* Darker gradient background */
+  background: linear-gradient(170deg, #e9ecef 0%, #ced4da 100%);
+}
+
+@keyframes fade-scale-in {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Updated card entry animation */
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    transform: translateY(15px) scale(0.95);
+  }
+  70% {
+    opacity: 1;
+    transform: translateY(-2px) scale(1.02);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Animation for subtle background gradient movement */
+@keyframes animated-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Animation for flash effect on apply */
+@keyframes flash-border-glow {
+  0% {
+    /* Start slightly intensified */
+    border-top-color: #ff5b4a !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07),
+    inset 0 1px 2px rgba(0, 0, 0, 0.01),
+    0 0 25px rgba(255, 91, 74, 0.5);
+  }
+  50% {
+    /* Peak intensity */
+    border-top-color: #ff4733 !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08),
+    inset 0 1px 2px rgba(0, 0, 0, 0.01),
+    0 0 35px rgba(255, 71, 51, 0.7);
+  }
+  100% {
+    /* Return to default state appearance */
+    border-top-color: #ff6f61 !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07),
+    inset 0 1px 2px rgba(0, 0, 0, 0.01),
+    0 0 10px rgba(255, 111, 97, 0.15);
+  }
+}
+
+/* Existing animation for haiku lines */
+@keyframes fade-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-15px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animated-fade-in {
+  /* Use the new pop-in animation */
+  animation: pop-in 0.6s ease-out forwards;
+}
+
+.haiku-card {
+  /* Subtle animated gradient background */
+  background: linear-gradient(120deg, #ffffff 0%, #fdfdfd 50%, #ffffff 100%);
+  background-size: 200% 200%;
+  animation: animated-gradient 10s ease infinite;
+
+  /* === Explicit Border Override Attempt === */
+  /* 1. Set the default grey border for all sides */
+  border: 1px solid #dee2e6;
+
+  /* 2. Explicitly override the top border immediately after */
+  border-top: 10px solid #ff6f61 !important; /* Orange top - Added !important */
+  /* === End Explicit Border Override Attempt === */
+
+  padding: 2.5rem 3rem;
+  border-radius: 20px;
+
+  /* Default glow intensity */
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07),
+  inset 0 1px 2px rgba(0, 0, 0, 0.01),
+  0 0 15px rgba(255, 111, 97, 0.25);
+  text-align: left;
+  max-width: 745px;
+  margin: 3rem auto;
+  min-width: 600px;
+
+  /* Transition */
+  transition: transform 0.35s ease, box-shadow 0.35s ease, border-top-width 0.35s ease, border-top-color 0.35s ease;
+}
+
+.haiku-card:hover {
+  transform: translateY(-8px) scale(1.03);
+  /* Enhanced shadow + Glow */
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1),
+  inset 0 1px 2px rgba(0, 0, 0, 0.01),
+  0 0 25px rgba(255, 91, 74, 0.5);
+  /* Modify only top border properties */
+  border-top-width: 14px !important; /* Added !important */
+  border-top-color: #ff5b4a !important; /* Added !important */
+}
+
+.haiku-card .flex {
+  margin-bottom: 1.5rem;
+}
+
+.haiku-card .flex.haiku-line { /* Target the lines specifically */
+  margin-bottom: 1.5rem;
+  opacity: 0; /* Start hidden for animation */
+  animation: fade-slide-in 0.5s ease-out forwards;
+  /* animation-delay is set inline in page.tsx */
+}
+
+/* Remove previous explicit color overrides - rely on Tailwind */
+/* .haiku-card p.text-4xl {
+  color: #212529;
+}
+
+.haiku-card p.text-base {
+  color: #495057;
+} */
+
+.haiku-card.applied-flash {
+  /* Apply the flash animation once */
+  /* Note: animation itself has !important on border-top-color */
+  animation: flash-border-glow 0.6s ease-out forwards;
+}
+
+/* Styling for images within the main haiku card */
+.haiku-card-image {
+  width: 9.5rem; /* Increased size (approx w-48) */
+  height: 9.5rem; /* Increased size (approx h-48) */
+  object-fit: cover;
+  border-radius: 1.5rem; /* rounded-xl */
+  border: 1px solid #e5e7eb;
+  /* Enhanced shadow with subtle orange hint */
+  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1),
+  0 3px 6px rgba(0, 0, 0, 0.08),
+  0 0 10px rgba(255, 111, 97, 0.2);
+  /* Inherit animation delay from inline style */
+  animation-name: fadeIn;
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+}
+
+/* Styling for images within the suggestion card */
+.suggestion-card-image {
+  width: 6.5rem; /* Increased slightly (w-20) */
+  height: 6.5rem; /* Increased slightly (h-20) */
+  object-fit: cover;
+  border-radius: 1rem; /* Equivalent to rounded-md */
+  border: 1px solid #d1d5db; /* Equivalent to border (using Tailwind gray-300) */
+  margin-top: 0.5rem;
+  /* Added shadow for suggestion images */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+  0 2px 4px rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease-in-out; /* Added for smooth deselection */
+}
+
+/* Styling for the focused suggestion card image */
+.suggestion-card-image-focus {
+  width: 6.5rem;
+  height: 6.5rem;
+  object-fit: cover;
+  border-radius: 1rem;
+  margin-top: 0.5rem;
+  /* Highlight styles */
+  border: 2px solid #ff6f61; /* Thicker, themed border */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), /* Base shadow for depth */
+  0 0 12px rgba(255, 111, 97, 0.6); /* Orange glow */
+  transform: scale(1.05); /* Slightly scale up */
+  transition: all 0.2s ease-in-out; /* Smooth transition for focus */
+}
+
+/* Styling for the suggestion card container in the sidebar */
+.suggestion-card {
+  border: 1px solid #dee2e6; /* Same default border as haiku-card */
+  border-top: 10px solid #ff6f61; /* Same orange top border */
+  border-radius: 0.375rem; /* Default rounded-md */
+  /* Note: background-color is set by Tailwind bg-gray-100 */
+  /* Other styles like padding, margin, flex are handled by Tailwind */
+}
+
+.suggestion-image-container {
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  width: 100%;
+  height: 6.5rem;
+}
diff --git a/typescript-sdk/integrations/langgraph/examples/poetry.lock b/typescript-sdk/integrations/langgraph/examples/poetry.lock
index ffda632b1..cb47e2b93 100644
--- a/typescript-sdk/integrations/langgraph/examples/poetry.lock
+++ b/typescript-sdk/integrations/langgraph/examples/poetry.lock
@@ -1,4 +1,41 @@
-# This file is automatically @generated by Poetry 2.0.1 and should not be changed by hand.
+# This file is automatically @generated by Poetry 2.1.3 and should not be changed by hand.
+
+[[package]]
+name = "ag-ui-langgraph"
+version = "0.0.4"
+description = "Implementation of the AG-UI protocol for LangGraph."
+optional = false
+python-versions = "<3.14,>=3.10"
+groups = ["main"]
+files = [
+    {file = "ag_ui_langgraph-0.0.4-py3-none-any.whl", hash = "sha256:1bbd818bc27b991a3e5f85554c19710cf326d8d91a0fc1cef820d65b7250c922"},
+    {file = "ag_ui_langgraph-0.0.4.tar.gz", hash = "sha256:99af5c1b300afc789bab08eafab6f36247a17da6d837e8fc7d2d69bd81439511"},
+]
+
+[package.dependencies]
+ag-ui-protocol = "0.1.7"
+fastapi = {version = ">=0.115.12,<0.116.0", optional = true, markers = "extra == \"fastapi\""}
+langchain = ">=0.3.0"
+langchain-core = ">=0.3.0"
+langgraph = ">=0.3.25,<=0.5.0"
+
+[package.extras]
+fastapi = ["fastapi (>=0.115.12,<0.116.0)"]
+
+[[package]]
+name = "ag-ui-protocol"
+version = "0.1.7"
+description = ""
+optional = false
+python-versions = "<4.0,>=3.9"
+groups = ["main"]
+files = [
+    {file = "ag_ui_protocol-0.1.7-py3-none-any.whl", hash = "sha256:8c821662ca6e9852569022f449b9f7aeb3f16aa75390fa8c28ceae2cce642baa"},
+    {file = "ag_ui_protocol-0.1.7.tar.gz", hash = "sha256:0e93fd9f7c74d52afbd824d6e9738bd3422e859503905ba7582481cbc3c67ab2"},
+]
+
+[package.dependencies]
+pydantic = ">=2.11.2,<3.0.0"
 
 [[package]]
 name = "aiohappyeyeballs"
@@ -113,7 +150,7 @@ propcache = ">=0.2.0"
 yarl = ">=1.17.0,<2.0"
 
 [package.extras]
-speedups = ["Brotli", "aiodns (>=3.2.0)", "brotlicffi"]
+speedups = ["Brotli ; platform_python_implementation == \"CPython\"", "aiodns (>=3.2.0) ; sys_platform == \"linux\" or sys_platform == \"darwin\"", "brotlicffi ; platform_python_implementation != \"CPython\""]
 
 [[package]]
 name = "aiosignal"
@@ -161,7 +198,7 @@ typing_extensions = {version = ">=4.5", markers = "python_version < \"3.13\""}
 
 [package.extras]
 doc = ["Sphinx (>=8.2,<9.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx_rtd_theme"]
-test = ["anyio[trio]", "blockbuster (>=1.5.23)", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "trustme", "truststore (>=0.9.1)", "uvloop (>=0.21)"]
+test = ["anyio[trio]", "blockbuster (>=1.5.23)", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "trustme", "truststore (>=0.9.1) ; python_version >= \"3.10\"", "uvloop (>=0.21) ; platform_python_implementation == \"CPython\" and platform_system != \"Windows\" and python_version < \"3.14\""]
 trio = ["trio (>=0.26.1)"]
 
 [[package]]
@@ -220,12 +257,12 @@ files = [
 ]
 
 [package.extras]
-benchmark = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-codspeed", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
-cov = ["cloudpickle", "coverage[toml] (>=5.3)", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
-dev = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pre-commit-uv", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
+benchmark = ["cloudpickle ; platform_python_implementation == \"CPython\"", "hypothesis", "mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pympler", "pytest (>=4.3.0)", "pytest-codspeed", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-xdist[psutil]"]
+cov = ["cloudpickle ; platform_python_implementation == \"CPython\"", "coverage[toml] (>=5.3)", "hypothesis", "mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-xdist[psutil]"]
+dev = ["cloudpickle ; platform_python_implementation == \"CPython\"", "hypothesis", "mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pre-commit-uv", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-xdist[psutil]"]
 docs = ["cogapp", "furo", "myst-parser", "sphinx", "sphinx-notfound-page", "sphinxcontrib-towncrier", "towncrier"]
-tests = ["cloudpickle", "hypothesis", "mypy (>=1.11.1)", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins", "pytest-xdist[psutil]"]
-tests-mypy = ["mypy (>=1.11.1)", "pytest-mypy-plugins"]
+tests = ["cloudpickle ; platform_python_implementation == \"CPython\"", "hypothesis", "mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pympler", "pytest (>=4.3.0)", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-xdist[psutil]"]
+tests-mypy = ["mypy (>=1.11.1) ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\"", "pytest-mypy-plugins ; platform_python_implementation == \"CPython\" and python_version >= \"3.10\""]
 
 [[package]]
 name = "auth0-python"
@@ -354,7 +391,7 @@ pyproject_hooks = "*"
 
 [package.extras]
 docs = ["furo (>=2023.08.17)", "sphinx (>=7.0,<8.0)", "sphinx-argparse-cli (>=1.5)", "sphinx-autodoc-typehints (>=1.10)", "sphinx-issues (>=3.0.0)"]
-test = ["build[uv,virtualenv]", "filelock (>=3)", "pytest (>=6.2.4)", "pytest-cov (>=2.12)", "pytest-mock (>=2)", "pytest-rerunfailures (>=9.1)", "pytest-xdist (>=1.34)", "setuptools (>=42.0.0)", "setuptools (>=56.0.0)", "setuptools (>=56.0.0)", "setuptools (>=67.8.0)", "wheel (>=0.36.0)"]
+test = ["build[uv,virtualenv]", "filelock (>=3)", "pytest (>=6.2.4)", "pytest-cov (>=2.12)", "pytest-mock (>=2)", "pytest-rerunfailures (>=9.1)", "pytest-xdist (>=1.34)", "setuptools (>=42.0.0) ; python_version < \"3.10\"", "setuptools (>=56.0.0) ; python_version == \"3.10\"", "setuptools (>=56.0.0) ; python_version == \"3.11\"", "setuptools (>=67.8.0) ; python_version >= \"3.12\"", "wheel (>=0.36.0)"]
 typing = ["build[uv]", "importlib-metadata (>=5.1)", "mypy (>=1.9.0,<1.10.0)", "tomli", "typing-extensions (>=3.7.4.3)"]
 uv = ["uv (>=0.1.18)"]
 virtualenv = ["virtualenv (>=20.0.35)"]
@@ -697,20 +734,21 @@ cron = ["capturer (>=2.4)"]
 
 [[package]]
 name = "copilotkit"
-version = "0.1.46"
+version = "0.1.56"
 description = "CopilotKit python SDK"
 optional = false
 python-versions = "<3.13,>=3.10"
 groups = ["main"]
 files = [
-    {file = "copilotkit-0.1.46-py3-none-any.whl", hash = "sha256:f229dd513d3fcbbcb5634e4e5e1563bfebd7f6cb97525c3345d1f203deedf5fa"},
-    {file = "copilotkit-0.1.46.tar.gz", hash = "sha256:fa9e913b63af60c07d599722801121831903b6ce858dc57db7f1b5ad361c6d22"},
+    {file = "copilotkit-0.1.56-py3-none-any.whl", hash = "sha256:1fc766b32623b0b83b5ff18d239bb97894903d6172ff903eaa9c96f6b47c7a21"},
+    {file = "copilotkit-0.1.56.tar.gz", hash = "sha256:b8b595dd3cf58e19b943b17ac70670ff915fe2300f91524c605b3ebd74153037"},
 ]
 
 [package.dependencies]
+ag-ui-langgraph = {version = "0.0.4", extras = ["fastapi"]}
 fastapi = ">=0.115.0,<0.116.0"
-langchain = ">=0.3.3,<0.4.0"
-langgraph = ">=0.2.50"
+langchain = ">=0.3.4,<=0.3.26"
+langgraph = ">=0.3.18,<=0.5.0"
 partialjson = ">=0.0.8,<0.0.9"
 toml = ">=0.10.2,<0.11.0"
 
@@ -815,10 +853,10 @@ files = [
 cffi = {version = ">=1.12", markers = "platform_python_implementation != \"PyPy\""}
 
 [package.extras]
-docs = ["sphinx (>=5.3.0)", "sphinx-rtd-theme (>=3.0.0)"]
+docs = ["sphinx (>=5.3.0)", "sphinx-rtd-theme (>=3.0.0) ; python_version >= \"3.8\""]
 docstest = ["pyenchant (>=3)", "readme-renderer (>=30.0)", "sphinxcontrib-spelling (>=7.3.1)"]
-nox = ["nox (>=2024.4.15)", "nox[uv] (>=2024.3.2)"]
-pep8test = ["check-sdist", "click (>=8.0.1)", "mypy (>=1.4)", "ruff (>=0.3.6)"]
+nox = ["nox (>=2024.4.15)", "nox[uv] (>=2024.3.2) ; python_version >= \"3.8\""]
+pep8test = ["check-sdist ; python_version >= \"3.8\"", "click (>=8.0.1)", "mypy (>=1.4)", "ruff (>=0.3.6)"]
 sdist = ["build (>=1.0.0)"]
 ssh = ["bcrypt (>=3.1.5)"]
 test = ["certifi (>=2024)", "cryptography-vectors (==44.0.2)", "pretend (>=0.7)", "pytest (>=7.4.0)", "pytest-benchmark (>=4.0)", "pytest-cov (>=2.10.1)", "pytest-xdist (>=3.5.0)"]
@@ -868,7 +906,7 @@ files = [
 wrapt = ">=1.10,<2"
 
 [package.extras]
-dev = ["PyTest", "PyTest-Cov", "bump2version (<1)", "setuptools", "tox"]
+dev = ["PyTest", "PyTest-Cov", "bump2version (<1)", "setuptools ; python_version >= \"3.12\"", "tox"]
 
 [[package]]
 name = "distro"
@@ -945,7 +983,7 @@ files = [
 ]
 
 [package.extras]
-tests = ["asttokens (>=2.1.0)", "coverage", "coverage-enable-subprocess", "ipython", "littleutils", "pytest", "rich"]
+tests = ["asttokens (>=2.1.0)", "coverage", "coverage-enable-subprocess", "ipython", "littleutils", "pytest", "rich ; python_version >= \"3.11\""]
 
 [[package]]
 name = "fastapi"
@@ -983,7 +1021,7 @@ files = [
 [package.extras]
 docs = ["furo (>=2024.8.6)", "sphinx (>=8.1.3)", "sphinx-autodoc-typehints (>=3)"]
 testing = ["covdefaults (>=2.3)", "coverage (>=7.6.10)", "diff-cover (>=9.2.1)", "pytest (>=8.3.4)", "pytest-asyncio (>=0.25.2)", "pytest-cov (>=6)", "pytest-mock (>=3.14)", "pytest-timeout (>=2.3.1)", "virtualenv (>=20.28.1)"]
-typing = ["typing-extensions (>=4.12.2)"]
+typing = ["typing-extensions (>=4.12.2) ; python_version < \"3.11\""]
 
 [[package]]
 name = "flatbuffers"
@@ -1159,11 +1197,11 @@ rsa = ">=3.1.4,<5"
 [package.extras]
 aiohttp = ["aiohttp (>=3.6.2,<4.0.0)", "requests (>=2.20.0,<3.0.0)"]
 enterprise-cert = ["cryptography", "pyopenssl"]
-pyjwt = ["cryptography (<39.0.0)", "cryptography (>=38.0.3)", "pyjwt (>=2.0)"]
-pyopenssl = ["cryptography (<39.0.0)", "cryptography (>=38.0.3)", "pyopenssl (>=20.0.0)"]
+pyjwt = ["cryptography (<39.0.0) ; python_version < \"3.8\"", "cryptography (>=38.0.3)", "pyjwt (>=2.0)"]
+pyopenssl = ["cryptography (<39.0.0) ; python_version < \"3.8\"", "cryptography (>=38.0.3)", "pyopenssl (>=20.0.0)"]
 reauth = ["pyu2f (>=0.1.5)"]
 requests = ["requests (>=2.20.0,<3.0.0)"]
-testing = ["aiohttp (<3.10.0)", "aiohttp (>=3.6.2,<4.0.0)", "aioresponses", "cryptography (<39.0.0)", "cryptography (>=38.0.3)", "flask", "freezegun", "grpcio", "mock", "oauth2client", "packaging", "pyjwt (>=2.0)", "pyopenssl (<24.3.0)", "pyopenssl (>=20.0.0)", "pytest", "pytest-asyncio", "pytest-cov", "pytest-localserver", "pyu2f (>=0.1.5)", "requests (>=2.20.0,<3.0.0)", "responses", "urllib3"]
+testing = ["aiohttp (<3.10.0)", "aiohttp (>=3.6.2,<4.0.0)", "aioresponses", "cryptography (<39.0.0) ; python_version < \"3.8\"", "cryptography (>=38.0.3)", "flask", "freezegun", "grpcio", "mock", "oauth2client", "packaging", "pyjwt (>=2.0)", "pyopenssl (<24.3.0)", "pyopenssl (>=20.0.0)", "pytest", "pytest-asyncio", "pytest-cov", "pytest-localserver", "pyu2f (>=0.1.5)", "requests (>=2.20.0,<3.0.0)", "responses", "urllib3"]
 urllib3 = ["packaging", "urllib3"]
 
 [[package]]
@@ -1428,7 +1466,7 @@ idna = "*"
 sniffio = "*"
 
 [package.extras]
-brotli = ["brotli", "brotlicffi"]
+brotli = ["brotli ; platform_python_implementation == \"CPython\"", "brotlicffi ; platform_python_implementation != \"CPython\""]
 cli = ["click (==8.*)", "pygments (==2.*)", "rich (>=10,<14)"]
 http2 = ["h2 (>=3,<5)"]
 socks = ["socksio (==1.*)"]
@@ -1528,12 +1566,12 @@ files = [
 zipp = ">=3.20"
 
 [package.extras]
-check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1)"]
+check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1) ; sys_platform != \"cygwin\""]
 cover = ["pytest-cov"]
 doc = ["furo", "jaraco.packaging (>=9.3)", "jaraco.tidelift (>=1.4)", "rst.linker (>=1.9)", "sphinx (>=3.5)", "sphinx-lint"]
 enabler = ["pytest-enabler (>=2.2)"]
 perf = ["ipython"]
-test = ["flufl.flake8", "importlib_resources (>=1.3)", "jaraco.test (>=5.4)", "packaging", "pyfakefs", "pytest (>=6,!=8.1.*)", "pytest-perf (>=0.9.2)"]
+test = ["flufl.flake8", "importlib_resources (>=1.3) ; python_version < \"3.9\"", "jaraco.test (>=5.4)", "packaging", "pyfakefs", "pytest (>=6,!=8.1.*)", "pytest-perf (>=0.9.2)"]
 type = ["pytest-mypy"]
 
 [[package]]
@@ -1549,7 +1587,7 @@ files = [
 ]
 
 [package.extras]
-check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1)"]
+check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1) ; sys_platform != \"cygwin\""]
 cover = ["pytest-cov"]
 doc = ["furo", "jaraco.packaging (>=9.3)", "jaraco.tidelift (>=1.4)", "rst.linker (>=1.9)", "sphinx (>=3.5)", "sphinx-lint"]
 enabler = ["pytest-enabler (>=2.2)"]
@@ -1792,7 +1830,7 @@ files = [
 ]
 
 [package.extras]
-dev = ["build (==1.2.2.post1)", "coverage (==7.5.4)", "coverage (==7.8.0)", "mypy (==1.14.1)", "mypy (==1.15.0)", "pip (==25.0.1)", "pylint (==3.2.7)", "pylint (==3.3.6)", "ruff (==0.11.2)", "twine (==6.1.0)", "uv (==0.6.11)"]
+dev = ["build (==1.2.2.post1)", "coverage (==7.5.4) ; python_version < \"3.9\"", "coverage (==7.8.0) ; python_version >= \"3.9\"", "mypy (==1.14.1) ; python_version < \"3.9\"", "mypy (==1.15.0) ; python_version >= \"3.9\"", "pip (==25.0.1)", "pylint (==3.2.7) ; python_version < \"3.9\"", "pylint (==3.3.6) ; python_version >= \"3.9\"", "ruff (==0.11.2)", "twine (==6.1.0)", "uv (==0.6.11)"]
 
 [[package]]
 name = "jsonpatch"
@@ -1826,7 +1864,7 @@ cov = ["pytest-cov"]
 dev = ["black", "pyupgrade"]
 docs = ["furo", "rst.linker (>=1.9)", "sphinx (>=3.5)"]
 packaging = ["build", "setuptools (>=61.2)", "setuptools-scm[toml] (>=6.0)", "twine"]
-testing = ["PyYAML", "atheris (>=2.3.0,<2.4.0)", "bson", "ecdsa", "feedparser", "gmpy2", "numpy", "pandas", "pymongo", "pytest (>=6.0,!=8.1.*)", "pytest-benchmark", "pytest-benchmark[histogram]", "pytest-checkdocs (>=1.2.3)", "pytest-enabler (>=1.0.1)", "pytest-ruff (>=0.2.1)", "scikit-learn", "scipy", "scipy (>=1.9.3)", "simplejson", "sqlalchemy", "ujson"]
+testing = ["PyYAML", "atheris (>=2.3.0,<2.4.0) ; python_version < \"3.12\"", "bson", "ecdsa", "feedparser", "gmpy2", "numpy", "pandas", "pymongo", "pytest (>=6.0,!=8.1.*)", "pytest-benchmark", "pytest-benchmark[histogram]", "pytest-checkdocs (>=1.2.3)", "pytest-enabler (>=1.0.1)", "pytest-ruff (>=0.2.1)", "scikit-learn", "scipy (>=1.9.3) ; python_version > \"3.10\"", "scipy ; python_version <= \"3.10\"", "simplejson", "sqlalchemy", "ujson"]
 
 [[package]]
 name = "jsonpointer"
@@ -2178,8 +2216,8 @@ tiktoken = ">=0.7.0"
 tokenizers = "*"
 
 [package.extras]
-extra-proxy = ["azure-identity (>=1.15.0,<2.0.0)", "azure-keyvault-secrets (>=4.8.0,<5.0.0)", "google-cloud-kms (>=2.21.3,<3.0.0)", "prisma (==0.11.0)", "redisvl (>=0.4.1,<0.5.0)", "resend (>=0.8.0,<0.9.0)"]
-proxy = ["PyJWT (>=2.8.0,<3.0.0)", "apscheduler (>=3.10.4,<4.0.0)", "backoff", "boto3 (==1.34.34)", "cryptography (>=43.0.1,<44.0.0)", "fastapi (>=0.115.5,<0.116.0)", "fastapi-sso (>=0.16.0,<0.17.0)", "gunicorn (>=23.0.0,<24.0.0)", "litellm-proxy-extras (==0.1.11)", "mcp (==1.5.0)", "orjson (>=3.9.7,<4.0.0)", "pynacl (>=1.5.0,<2.0.0)", "python-multipart (>=0.0.18,<0.0.19)", "pyyaml (>=6.0.1,<7.0.0)", "rq", "uvicorn (>=0.29.0,<0.30.0)", "uvloop (>=0.21.0,<0.22.0)", "websockets (>=13.1.0,<14.0.0)"]
+extra-proxy = ["azure-identity (>=1.15.0,<2.0.0)", "azure-keyvault-secrets (>=4.8.0,<5.0.0)", "google-cloud-kms (>=2.21.3,<3.0.0)", "prisma (==0.11.0)", "redisvl (>=0.4.1,<0.5.0) ; python_version >= \"3.9\" and python_version < \"3.14\"", "resend (>=0.8.0,<0.9.0)"]
+proxy = ["PyJWT (>=2.8.0,<3.0.0)", "apscheduler (>=3.10.4,<4.0.0)", "backoff", "boto3 (==1.34.34)", "cryptography (>=43.0.1,<44.0.0)", "fastapi (>=0.115.5,<0.116.0)", "fastapi-sso (>=0.16.0,<0.17.0)", "gunicorn (>=23.0.0,<24.0.0)", "litellm-proxy-extras (==0.1.11)", "mcp (==1.5.0) ; python_version >= \"3.10\"", "orjson (>=3.9.7,<4.0.0)", "pynacl (>=1.5.0,<2.0.0)", "python-multipart (>=0.0.18,<0.0.19)", "pyyaml (>=6.0.1,<7.0.0)", "rq", "uvicorn (>=0.29.0,<0.30.0)", "uvloop (>=0.21.0,<0.22.0)", "websockets (>=13.1.0,<14.0.0)"]
 
 [[package]]
 name = "markdown-it-py"
@@ -2450,7 +2488,7 @@ files = [
 [package.extras]
 develop = ["codecov", "pycodestyle", "pytest (>=4.6)", "pytest-cov", "wheel"]
 docs = ["sphinx"]
-gmpy = ["gmpy2 (>=2.1.0a4)"]
+gmpy = ["gmpy2 (>=2.1.0a4) ; platform_python_implementation != \"PyPy\""]
 tests = ["pytest (>=4.6)"]
 
 [[package]]
@@ -3152,7 +3190,7 @@ charset-normalizer = ">=2.0.0"
 cryptography = ">=36.0.0"
 
 [package.extras]
-dev = ["atheris", "black", "mypy (==0.931)", "nox", "pytest"]
+dev = ["atheris ; python_version < \"3.12\"", "black", "mypy (==0.931)", "nox", "pytest"]
 docs = ["sphinx", "sphinx-argparse"]
 image = ["Pillow"]
 
@@ -3286,7 +3324,7 @@ fpx = ["olefile"]
 mic = ["olefile"]
 test-arrow = ["pyarrow"]
 tests = ["check-manifest", "coverage (>=7.4.2)", "defusedxml", "markdown2", "olefile", "packaging", "pyroma", "pytest", "pytest-cov", "pytest-timeout", "trove-classifiers (>=2024.10.12)"]
-typing = ["typing-extensions"]
+typing = ["typing-extensions ; python_version < \"3.10\""]
 xmp = ["defusedxml"]
 
 [[package]]
@@ -3546,7 +3584,7 @@ typing-inspection = ">=0.4.0"
 
 [package.extras]
 email = ["email-validator (>=2.0.0)"]
-timezone = ["tzdata"]
+timezone = ["tzdata ; python_version >= \"3.9\" and platform_system == \"Windows\""]
 
 [[package]]
 name = "pydantic-core"
@@ -4701,7 +4739,7 @@ files = [
 ]
 
 [package.extras]
-brotli = ["brotli (>=1.0.9)", "brotlicffi (>=0.8.0)"]
+brotli = ["brotli (>=1.0.9) ; platform_python_implementation == \"CPython\"", "brotlicffi (>=0.8.0) ; platform_python_implementation != \"CPython\""]
 h2 = ["h2 (>=4,<5)"]
 socks = ["pysocks (>=1.5.6,!=1.5.7,<2.0)"]
 zstd = ["zstandard (>=0.18.0)"]
@@ -4753,12 +4791,12 @@ h11 = ">=0.8"
 httptools = {version = ">=0.6.3", optional = true, markers = "extra == \"standard\""}
 python-dotenv = {version = ">=0.13", optional = true, markers = "extra == \"standard\""}
 pyyaml = {version = ">=5.1", optional = true, markers = "extra == \"standard\""}
-uvloop = {version = ">=0.14.0,<0.15.0 || >0.15.0,<0.15.1 || >0.15.1", optional = true, markers = "(sys_platform != \"win32\" and sys_platform != \"cygwin\") and platform_python_implementation != \"PyPy\" and extra == \"standard\""}
+uvloop = {version = ">=0.14.0,<0.15.0 || >0.15.0,<0.15.1 || >0.15.1", optional = true, markers = "sys_platform != \"win32\" and sys_platform != \"cygwin\" and platform_python_implementation != \"PyPy\" and extra == \"standard\""}
 watchfiles = {version = ">=0.13", optional = true, markers = "extra == \"standard\""}
 websockets = {version = ">=10.4", optional = true, markers = "extra == \"standard\""}
 
 [package.extras]
-standard = ["colorama (>=0.4)", "httptools (>=0.6.3)", "python-dotenv (>=0.13)", "pyyaml (>=5.1)", "uvloop (>=0.14.0,!=0.15.0,!=0.15.1)", "watchfiles (>=0.13)", "websockets (>=10.4)"]
+standard = ["colorama (>=0.4) ; sys_platform == \"win32\"", "httptools (>=0.6.3)", "python-dotenv (>=0.13)", "pyyaml (>=5.1)", "uvloop (>=0.14.0,!=0.15.0,!=0.15.1) ; sys_platform != \"win32\" and sys_platform != \"cygwin\" and platform_python_implementation != \"PyPy\"", "watchfiles (>=0.13)", "websockets (>=10.4)"]
 
 [[package]]
 name = "uvloop"
@@ -4767,7 +4805,7 @@ description = "Fast implementation of asyncio event loop on top of libuv"
 optional = false
 python-versions = ">=3.8.0"
 groups = ["main"]
-markers = "(sys_platform != \"win32\" and sys_platform != \"cygwin\") and platform_python_implementation != \"PyPy\""
+markers = "sys_platform != \"win32\" and sys_platform != \"cygwin\" and platform_python_implementation != \"PyPy\""
 files = [
     {file = "uvloop-0.21.0-cp310-cp310-macosx_10_9_universal2.whl", hash = "sha256:ec7e6b09a6fdded42403182ab6b832b71f4edaf7f37a9a0e371a01db5f0cb45f"},
     {file = "uvloop-0.21.0-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:196274f2adb9689a289ad7d65700d37df0c0930fd8e4e743fa4834e850d7719d"},
@@ -5342,11 +5380,11 @@ files = [
 ]
 
 [package.extras]
-check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1)"]
+check = ["pytest-checkdocs (>=2.4)", "pytest-ruff (>=0.2.1) ; sys_platform != \"cygwin\""]
 cover = ["pytest-cov"]
 doc = ["furo", "jaraco.packaging (>=9.3)", "jaraco.tidelift (>=1.4)", "rst.linker (>=1.9)", "sphinx (>=3.5)", "sphinx-lint"]
 enabler = ["pytest-enabler (>=2.2)"]
-test = ["big-O", "importlib-resources", "jaraco.functools", "jaraco.itertools", "jaraco.test", "more-itertools", "pytest (>=6,!=8.1.*)", "pytest-ignore-flaky"]
+test = ["big-O", "importlib-resources ; python_version < \"3.9\"", "jaraco.functools", "jaraco.itertools", "jaraco.test", "more-itertools", "pytest (>=6,!=8.1.*)", "pytest-ignore-flaky"]
 type = ["pytest-mypy"]
 
 [[package]]
@@ -5465,4 +5503,4 @@ cffi = ["cffi (>=1.11)"]
 [metadata]
 lock-version = "2.1"
 python-versions = ">=3.12,<3.13"
-content-hash = "04b99e8148bd0683f1e4df0532e884e9448e733697873079b1ff3bf7e20aee2b"
+content-hash = "5b1c0f35cbde48a1676b30b213e6f9d3e34d42c3f16ebf9cba8b9474c98a633b"
diff --git a/typescript-sdk/integrations/langgraph/examples/pyproject.toml b/typescript-sdk/integrations/langgraph/examples/pyproject.toml
index c8f995020..7bb446ebe 100644
--- a/typescript-sdk/integrations/langgraph/examples/pyproject.toml
+++ b/typescript-sdk/integrations/langgraph/examples/pyproject.toml
@@ -11,7 +11,7 @@ version = "0.0.1"
 
 [tool.poetry.dependencies]
 python = ">=3.12,<3.13"
-copilotkit = "0.1.46"
+copilotkit = "0.1.56"
 tavily-python = "^0.5.1"
 uvicorn = "^0.34.0"
 dotenv = "^0.9.9"