diff --git a/py-langchain/frontend/src/components/chat-message-bubble.tsx b/py-langchain/frontend/src/components/chat-message-bubble.tsx
index 51b44e4..5e112a1 100644
--- a/py-langchain/frontend/src/components/chat-message-bubble.tsx
+++ b/py-langchain/frontend/src/components/chat-message-bubble.tsx
@@ -51,7 +51,12 @@ function ToolCallDisplay({
   );
 }
 
-export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; allMessages?: Message[] }) {
+export function ChatMessageBubble(props: {
+  message: Message;
+  aiEmoji?: string;
+  allMessages?: Message[];
+  showToolCalls?: boolean;
+}) {
   const toolCalls = props.message.type === 'ai' ? props.message.tool_calls || [] : [];
   
   // Get message content as string
@@ -107,7 +112,7 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
   const toolResultContent = getToolResultContent();
   
   // Show tool calls if we have any
-  const shouldShowToolCalls = hasToolCalls;
+  const shouldShowToolCalls = (props.showToolCalls ?? true) && hasToolCalls;
   
   if (!(['human', 'ai'].includes(props.message.type) && (hasContent || shouldShowToolCalls))) {
     return null;
@@ -145,4 +150,4 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/py-langchain/frontend/src/components/chat-window.tsx b/py-langchain/frontend/src/components/chat-window.tsx
index 0be7191..5c6be47 100644
--- a/py-langchain/frontend/src/components/chat-window.tsx
+++ b/py-langchain/frontend/src/components/chat-window.tsx
@@ -18,12 +18,20 @@ function ChatMessages(props: {
   emptyStateComponent: ReactNode;
   aiEmoji?: string;
   className?: string;
+  showToolCalls?: boolean;
 }) {
+  const showToolCalls = props.showToolCalls ?? true;
   return (
     <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
       {props.messages.map((m) => {
         return (
-          <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} allMessages={props.messages} />
+          <ChatMessageBubble
+            key={m.id}
+            message={m}
+            aiEmoji={props.aiEmoji}
+            allMessages={props.messages}
+            showToolCalls={showToolCalls}
+          />
         );
       })}
     </div>
@@ -125,6 +133,7 @@ export function ChatWindow(props: {
 }) {
   const [threadId, setThreadId] = useQueryState("threadId");
   const [input, setInput] = useState("");
+  const [showToolCalls, setShowToolCalls] = useState(true);
 
   const fetchWithCredentials = (url: string | URL | Request, options = {}) => {
     return fetch(url, {
@@ -184,6 +193,7 @@ export function ChatWindow(props: {
                 aiEmoji={props.emoji}
                 messages={chat.messages}
                 emptyStateComponent={props.emptyStateComponent}
+                showToolCalls={showToolCalls}
               />
               <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
                 {!!chat.interrupt?.value && (
@@ -229,7 +239,17 @@ export function ChatWindow(props: {
               onSubmit={sendMessage}
               loading={isChatLoading()}
               placeholder={props.placeholder ?? "What can I help you with?"}
-            ></ChatInput>
+            >
+              <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                <input
+                  type="checkbox"
+                  className="w-4 h-4"
+                  checked={showToolCalls}
+                  onChange={(e) => setShowToolCalls(e.target.checked)}
+                />
+                Show tool calls
+              </label>
+            </ChatInput>
           </div>
         }
       ></StickyToBottomContent>
diff --git a/ts-langchain/src/components/chat-message-bubble.tsx b/ts-langchain/src/components/chat-message-bubble.tsx
index 8247b44..2de58d2 100644
--- a/ts-langchain/src/components/chat-message-bubble.tsx
+++ b/ts-langchain/src/components/chat-message-bubble.tsx
@@ -51,7 +51,12 @@ function ToolCallDisplay({
   );
 }
 
-export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; allMessages?: Message[] }) {
+export function ChatMessageBubble(props: {
+  message: Message;
+  aiEmoji?: string;
+  allMessages?: Message[];
+  showToolCalls?: boolean;
+}) {
   const toolCalls = props.message.type === 'ai' ? props.message.tool_calls || [] : [];
   
   // Get message content as string
@@ -107,7 +112,7 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
   const toolResultContent = getToolResultContent();
   
   // Show tool calls if we have any
-  const shouldShowToolCalls = hasToolCalls;
+  const shouldShowToolCalls = (props.showToolCalls ?? true) && hasToolCalls;
   
   if (!(['human', 'ai'].includes(props.message.type) && (hasContent || shouldShowToolCalls))) {
     return null;
@@ -145,4 +150,4 @@ export function ChatMessageBubble(props: { message: Message; aiEmoji?: string; a
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ts-langchain/src/components/chat-window.tsx b/ts-langchain/src/components/chat-window.tsx
index 34053cf..8a2c202 100644
--- a/ts-langchain/src/components/chat-window.tsx
+++ b/ts-langchain/src/components/chat-window.tsx
@@ -19,11 +19,21 @@ function ChatMessages(props: {
   emptyStateComponent: ReactNode;
   aiEmoji?: string;
   className?: string;
+  showToolCalls?: boolean;
 }) {
+  const showToolCalls = props.showToolCalls ?? true;
   return (
     <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
       {props.messages.map((m, i) => {
-        return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} allMessages={props.messages} />;
+        return (
+          <ChatMessageBubble
+            key={m.id}
+            message={m}
+            aiEmoji={props.aiEmoji}
+            allMessages={props.messages}
+            showToolCalls={showToolCalls}
+          />
+        );
       })}
     </div>
   );
@@ -116,6 +126,7 @@ export function ChatWindow(props: {
 }) {
   const [threadId, setThreadId] = useQueryState('threadId');
   const [input, setInput] = useState('');
+  const [showToolCalls, setShowToolCalls] = useState(true);
   const chat = useStream({
     apiUrl: props.endpoint,
     assistantId: 'agent',
@@ -160,6 +171,7 @@ export function ChatWindow(props: {
                 aiEmoji={props.emoji}
                 messages={chat.messages}
                 emptyStateComponent={props.emptyStateComponent}
+                showToolCalls={showToolCalls}
               />
               <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
                 <TokenVaultInterruptHandler interrupt={chat.interrupt} onFinish={() => chat.submit(null)} />
@@ -176,7 +188,17 @@ export function ChatWindow(props: {
               onSubmit={sendMessage}
               loading={isChatLoading()}
               placeholder={props.placeholder ?? 'What can I help you with?'}
-            ></ChatInput>
+            >
+              <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                <input
+                  type="checkbox"
+                  className="w-4 h-4"
+                  checked={showToolCalls}
+                  onChange={(e) => setShowToolCalls(e.target.checked)}
+                />
+                Show tool calls
+              </label>
+            </ChatInput>
           </div>
         }
       ></StickyToBottomContent>
diff --git a/ts-llamaindex/src/components/chat-message-bubble.tsx b/ts-llamaindex/src/components/chat-message-bubble.tsx
index 894b288..cdb497f 100644
--- a/ts-llamaindex/src/components/chat-message-bubble.tsx
+++ b/ts-llamaindex/src/components/chat-message-bubble.tsx
@@ -117,10 +117,11 @@ function ToolCallDisplay({ toolCall }: {
   );
 }
 
-export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string }) {
+export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string; showToolCalls?: boolean }) {
   const { message, aiEmoji } = props;
   const text = uiMessageToText(message);
   const toolCalls = getToolCallsFromMessage(message);
+  const shouldShowToolCalls = (props.showToolCalls ?? true) && toolCalls.length > 0;
 
   return (
     <div
@@ -138,7 +139,7 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
 
       <div className="chat-message-bubble whitespace-pre-wrap flex flex-col prose dark:prose-invert max-w-none">
         {/* Render tool calls if present */}
-        {toolCalls.length > 0 && (
+        {shouldShowToolCalls && (
           <div className="mb-3">
             {toolCalls.map((toolCall, index) => (
               <ToolCallDisplay key={`${toolCall.toolCallId}-${index}`} toolCall={toolCall} />
@@ -151,4 +152,4 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ts-llamaindex/src/components/chat-window.tsx b/ts-llamaindex/src/components/chat-window.tsx
index a8bd8b2..8139b85 100644
--- a/ts-llamaindex/src/components/chat-window.tsx
+++ b/ts-llamaindex/src/components/chat-window.tsx
@@ -18,11 +18,20 @@ function ChatMessages(props: {
   emptyStateComponent: ReactNode;
   aiEmoji?: string;
   className?: string;
+  showToolCalls?: boolean;
 }) {
+  const showToolCalls = props.showToolCalls ?? true;
   return (
     <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
       {props.messages.map((m, i) => {
-        return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} />;
+        return (
+          <ChatMessageBubble
+            key={m.id}
+            message={m}
+            aiEmoji={props.aiEmoji}
+            showToolCalls={showToolCalls}
+          />
+        );
       })}
     </div>
   );
@@ -125,6 +134,7 @@ export function ChatWindow(props: {
   );
 
   const [input, setInput] = useState('');
+  const [showToolCalls, setShowToolCalls] = useState(true);
 
   const isChatLoading = status === 'streaming';
 
@@ -149,6 +159,7 @@ export function ChatWindow(props: {
                 aiEmoji={props.emoji}
                 messages={messages}
                 emptyStateComponent={props.emptyStateComponent}
+                showToolCalls={showToolCalls}
               />
               <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
                 <TokenVaultInterruptHandler interrupt={toolInterrupt} />
@@ -165,7 +176,17 @@ export function ChatWindow(props: {
               onSubmit={onSubmit}
               loading={isChatLoading}
               placeholder={props.placeholder ?? 'What can I help you with?'}
-            ></ChatInput>
+            >
+              <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                <input
+                  type="checkbox"
+                  className="w-4 h-4"
+                  checked={showToolCalls}
+                  onChange={(e) => setShowToolCalls(e.target.checked)}
+                />
+                Show tool calls
+              </label>
+            </ChatInput>
           </div>
         }
       ></StickyToBottomContent>
diff --git a/ts-vercel-ai/src/components/chat-message-bubble.tsx b/ts-vercel-ai/src/components/chat-message-bubble.tsx
index 894b288..cdb497f 100644
--- a/ts-vercel-ai/src/components/chat-message-bubble.tsx
+++ b/ts-vercel-ai/src/components/chat-message-bubble.tsx
@@ -117,10 +117,11 @@ function ToolCallDisplay({ toolCall }: {
   );
 }
 
-export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string }) {
+export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string; showToolCalls?: boolean }) {
   const { message, aiEmoji } = props;
   const text = uiMessageToText(message);
   const toolCalls = getToolCallsFromMessage(message);
+  const shouldShowToolCalls = (props.showToolCalls ?? true) && toolCalls.length > 0;
 
   return (
     <div
@@ -138,7 +139,7 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
 
       <div className="chat-message-bubble whitespace-pre-wrap flex flex-col prose dark:prose-invert max-w-none">
         {/* Render tool calls if present */}
-        {toolCalls.length > 0 && (
+        {shouldShowToolCalls && (
           <div className="mb-3">
             {toolCalls.map((toolCall, index) => (
               <ToolCallDisplay key={`${toolCall.toolCallId}-${index}`} toolCall={toolCall} />
@@ -151,4 +152,4 @@ export function ChatMessageBubble(props: { message: UIMessage; aiEmoji?: string
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/ts-vercel-ai/src/components/chat-window.tsx b/ts-vercel-ai/src/components/chat-window.tsx
index 7a769ed..96c2144 100644
--- a/ts-vercel-ai/src/components/chat-window.tsx
+++ b/ts-vercel-ai/src/components/chat-window.tsx
@@ -18,11 +18,20 @@ function ChatMessages(props: {
   emptyStateComponent: ReactNode;
   aiEmoji?: string;
   className?: string;
+  showToolCalls?: boolean;
 }) {
+  const showToolCalls = props.showToolCalls ?? true;
   return (
     <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
       {props.messages.map((m, i) => {
-        return <ChatMessageBubble key={m.id} message={m} aiEmoji={props.aiEmoji} />;
+        return (
+          <ChatMessageBubble
+            key={m.id}
+            message={m}
+            aiEmoji={props.aiEmoji}
+            showToolCalls={showToolCalls}
+          />
+        );
       })}
     </div>
   );
@@ -126,6 +135,7 @@ export function ChatWindow(props: {
   );
 
   const [input, setInput] = useState('');
+  const [showToolCalls, setShowToolCalls] = useState(true);
 
   const isChatLoading = status === 'streaming';
 
@@ -146,7 +156,12 @@ export function ChatWindow(props: {
             <div>{props.emptyStateComponent}</div>
           ) : (
             <>
-              <ChatMessages aiEmoji={props.emoji} messages={messages} emptyStateComponent={props.emptyStateComponent} />
+              <ChatMessages
+                aiEmoji={props.emoji}
+                messages={messages}
+                emptyStateComponent={props.emptyStateComponent}
+                showToolCalls={showToolCalls}
+              />
               <div className="flex flex-col max-w-[768px] mx-auto pb-12 w-full">
                 <TokenVaultInterruptHandler interrupt={toolInterrupt} />
               </div>
@@ -162,7 +177,17 @@ export function ChatWindow(props: {
               onSubmit={onSubmit}
               loading={isChatLoading}
               placeholder={props.placeholder ?? 'What can I help you with?'}
-            ></ChatInput>
+            >
+              <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                <input
+                  type="checkbox"
+                  className="w-4 h-4"
+                  checked={showToolCalls}
+                  onChange={(e) => setShowToolCalls(e.target.checked)}
+                />
+                Show tool calls
+              </label>
+            </ChatInput>
           </div>
         }
       ></StickyToBottomContent>