docs: add default tool rendering guide (CopilotKit#2717)

Signed-off-by: Tyler Slaton <[email protected]>

Author: tylerslaton

docs/content/docs/langgraph/generative-ui/backend-tools.mdx

@@ -7,6 +7,7 @@ import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
 import { IframeSwitcher } from "@/components/content"
 import { Tabs, Tab } from "fumadocs-ui/components/tabs"
 import RunAndConnect from "@/snippets/integrations/langgraph/run-and-connect.mdx"
+import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"
 
 <IframeSwitcher
   id="backend-tools-example"
@@ -146,3 +147,7 @@ render the tool call and display the arguments that were passed to the tool.
 
 </Step>
 </Steps>
+
+## Default Tool Rendering
+
+<DefaultToolRendering components={props.components} />

docs/content/docs/microsoft-agent-framework/generative-ui/backend-tools.mdx

@@ -5,6 +5,7 @@ description: Render your agent's tool calls with custom UI components.
 ---
 import { Accordions, Accordion } from "fumadocs-ui/components/accordion";
 import { IframeSwitcher } from "@/components/content"
+import DefaultToolRendering from "@/snippets/shared/guides/default-tool-rendering.mdx"
 
 {/* TODO: Swap these links for Microsoft Agent Framework links once Microsoft Agent Framework is officially added to the feature viewer */}
 <IframeSwitcher
@@ -114,3 +115,7 @@ render the tool call and display the arguments that were passed to the tool.
 
 </Step>
 </Steps>
+
+## Default Tool Rendering
+
+<DefaultToolRendering components={props.components} />

docs/snippets/shared/guides/default-tool-rendering.mdx

@@ -0,0 +1,35 @@
+`useDefaultTool` provides a catch-all renderer for **any tool** that doesn't have a specific `useRenderToolCall` defined. This is useful for:
+
+- Displaying all tool calls during development
+- Rendering MCP (Model Context Protocol) tools
+- Providing a generic fallback UI for unexpected tools
+
+```tsx title="app/page.tsx"
+import { useDefaultTool } from "@copilotkit/react-core"; // [!code highlight]
+// ...
+
+const YourMainContent = () => {
+  // ...
+  // [!code highlight:15]
+  useDefaultTool({
+    render: ({ name, args, status, result }) => {
+      return (
+        <div style={{ color: "black" }}>
+          <span>
+            {status === "complete" ? "✓" : "⏳"}
+            {name}
+          </span>
+          {status === "complete" && result && (
+            <pre>{JSON.stringify(result, null, 2)}</pre>
+          )}
+        </div>
+      );
+    },
+  });
+  // ...
+}
+```
+
+<Callout type="info">
+  Unlike `useRenderToolCall`, which targets a specific tool by name, `useDefaultTool` catches **all** tools that don't have a dedicated renderer.
+</Callout>