Feat/embedded mode

apps/example/src/components/chat.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import { AIDevtools, EmbeddedAiDevtools, useAIDevtools } from "@ai-sdk-tools/devtools";
 import { useChat } from "@ai-sdk-tools/store";
-import { AIDevtools } from "@ai-sdk-tools/devtools";
 import { DefaultChatTransport } from "ai";
 import { useState } from "react";
 
@@ -13,7 +13,7 @@ export default function Chat() {
   });
   const [input, setInput] = useState("");
 
-
+  const props = useAIDevtools();
   return (
     <>
       {messages.map((message) => (
@@ -44,7 +44,7 @@ export default function Chat() {
           Submit
         </button>
       </form>
-
+      <EmbeddedAiDevtools {...props} />
       <AIDevtools />
     </>
   );

packages/devtools/src/components/ai-dev-tools.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { useAIDevtools } from "../hooks/use-ai-devtools";
+import { defaultConfig, useAIDevtools } from "../hooks/use-ai-devtools";
 import type { DevtoolsConfig, UseAIDevtoolsOptions } from "../types";
 import { DevtoolsButton } from "./devtools-button";
 import { DevtoolsPanel } from "./devtools-panel";
@@ -13,23 +13,6 @@ interface AIDevtoolsProps extends UseAIDevtoolsOptions {
   modelId?: string; // Optional model ID for context insights
 }
 
-const defaultConfig: DevtoolsConfig = {
-  enabled: true,
-  maxEvents: 1000,
-  position: "bottom",
-  height: 400,
-  theme: "auto",
-  streamCapture: {
-    enabled: true,
-    endpoint: "/api/chat",
-    autoConnect: true,
-  },
-  throttle: {
-    enabled: true,
-    interval: 100, // 100ms throttle by default
-    includeTypes: ["text-delta"], // Only throttle high-frequency text-delta events by default
-  },
-};
 
 export function AIDevtools({
   enabled = true,
@@ -92,10 +75,10 @@ export function AIDevtools({
     debug,
     streamCapture: finalConfig.streamCapture
       ? {
-          enabled: finalConfig.streamCapture.enabled,
-          endpoints: [finalConfig.streamCapture.endpoint],
-          autoConnect: finalConfig.streamCapture.autoConnect,
-        }
+        enabled: finalConfig.streamCapture.enabled,
+        endpoints: [finalConfig.streamCapture.endpoint],
+        autoConnect: finalConfig.streamCapture.autoConnect,
+      }
       : undefined,
     throttle: finalConfig.throttle,
   });
@@ -140,8 +123,8 @@ export function AIDevtools({
         <DevtoolsPanel
           events={events}
           isCapturing={isCapturing}
-          onToggleCapturing={toggleCapturing}
-          onClearEvents={clearEvents}
+          toggleCapturing={toggleCapturing}
+          clearEvents={clearEvents}
           onClose={() => setIsOpen(false)}
           onTogglePosition={togglePosition}
           config={finalConfig}