Pr/2298 integration (CopilotKit#2312)

johnprg · suhasdeshpande · web-flow · commit 6d060ac70fc6 · 2025-08-10T22:28:12.000-07:00
Co-authored-by: Suhas Deshpande &lt;suhas2u@gmail.com&gt;
Co-authored-by: Suhas Deshpande &lt;suhasdeshpande@users.noreply.github.com&gt;
diff --git a/CopilotKit/packages/react-core/src/components/dev-console/console-trigger.tsx b/CopilotKit/packages/react-core/src/components/dev-console/console-trigger.tsx
@@ -142,8 +142,8 @@ export function ConsoleTrigger({ position = "bottom-right" }: ConsoleTriggerProp
         }}
         title={
           hasApiKey
-            ? "Open Developer Console (Drag to move)"
-            : "Developer Console (API Key Required, Drag to move)"
+            ? "Open Inspector (Drag to move)"
+            : "Inspector (License Key Required, Drag to move)"
         }
       >
         <div
diff --git a/CopilotKit/packages/react-core/src/components/dev-console/developer-console-modal.tsx b/CopilotKit/packages/react-core/src/components/dev-console/developer-console-modal.tsx
@@ -230,7 +230,7 @@ export function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }: DeveloperC
                 margin: 0,
               }}
             >
-              Developer Console
+              Inspector
             </h1>
             <span
               style={{
@@ -465,7 +465,7 @@ export function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }: DeveloperC
                 e.currentTarget.style.outline = "none";
               }}
             >
-              Get API Key
+              Get License Key
               <span style={{ fontSize: "16px", marginLeft: "-4px" }}>→</span>
             </button>
           </div>
diff --git a/docs/content/docs/(root)/premium/inspector.mdx b/docs/content/docs/(root)/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/(root)/premium/meta.json b/docs/content/docs/(root)/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/ag2/premium/inspector.mdx b/docs/content/docs/ag2/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/ag2/premium/meta.json b/docs/content/docs/ag2/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/agno/premium/inspector.mdx b/docs/content/docs/agno/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/agno/premium/meta.json b/docs/content/docs/agno/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/coagents/premium/inspector.mdx b/docs/content/docs/coagents/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/coagents/premium/meta.json b/docs/content/docs/coagents/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/crewai-crews/premium/inspector.mdx b/docs/content/docs/crewai-crews/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/crewai-crews/premium/meta.json b/docs/content/docs/crewai-crews/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/crewai-flows/premium/inspector.mdx b/docs/content/docs/crewai-flows/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/crewai-flows/premium/meta.json b/docs/content/docs/crewai-flows/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/direct-to-llm/guides/premium/inspector.mdx b/docs/content/docs/direct-to-llm/guides/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/direct-to-llm/guides/premium/meta.json b/docs/content/docs/direct-to-llm/guides/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/llamaindex/premium/inspector.mdx b/docs/content/docs/llamaindex/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/llamaindex/premium/meta.json b/docs/content/docs/llamaindex/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/mastra/premium/inspector.mdx b/docs/content/docs/mastra/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/mastra/premium/meta.json b/docs/content/docs/mastra/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/content/docs/premium/inspector.mdx b/docs/content/docs/premium/inspector.mdx
@@ -0,0 +1,11 @@
+---
+
+title: Inspector
+icon: "lucide/Inspect"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/premium/meta.json b/docs/content/docs/premium/meta.json
@@ -1,5 +1,5 @@
 {
   "title": "Premium",
   "root": true,
-  "pages": ["observability"]
+  "pages": ["overview", "observability", "inspector"]
 }
diff --git a/docs/content/docs/pydantic-ai/premium/inspector.mdx b/docs/content/docs/pydantic-ai/premium/inspector.mdx
@@ -0,0 +1,9 @@
+---
+title: Inspector
+icon: "lucide/SearchCheck"
+description: Inspector for debugging actions, readables, agent status, messages, and context.
+---
+
+import Inspector from "@/snippets/shared/premium/inspector.mdx";
+
+<Inspector components={props.components} />
diff --git a/docs/content/docs/pydantic-ai/premium/meta.json b/docs/content/docs/pydantic-ai/premium/meta.json
@@ -1,8 +1,4 @@
 {
-    "title": "Premium Features",
-    "pages": [
-      "overview",
-      "headless-ui",
-      "observability"
-    ]
-  } 
+  "title": "Premium Features",
+  "pages": ["overview", "headless-ui", "observability", "inspector"]
+}
diff --git a/docs/snippets/shared/premium/inspector.mdx b/docs/snippets/shared/premium/inspector.mdx
@@ -0,0 +1,34 @@
+The Copilot Inspector is a debugging aid, accessible from a copilotkit button overlaid on your app, which allows you to see the information, state and conversation between them and you (the user).
+
+
+
+
+
+<Callout type="info" title="Premium feature">
+  The Inspector is available to CopilotKit Premium users. Get a free public
+  license key on [Copilot Cloud](https://cloud.copilotkit.ai) or read more about{" "}
+  <a href="/premium/overview">Premium features</a>.
+</Callout>
+
+## What it shows
+
+- Actions: Registered actions and parameter schemas
+- Readables: Context/readables available to the agent
+- Agent Status: Coagent states and running/completion info
+- Messages: Conversation history
+- Context: Document context fed into the model
+
+## Requirements
+
+- Provide `publicLicenseKey` to `<CopilotKit />` to enable premium features:
+
+```tsx
+<CopilotKit publicLicenseKey={process.env.NEXT_PUBLIC_COPILOTKIT_LICENSE_KEY}>
+  {children}
+</CopilotKit>
+```
+
+## How to open
+
+A draggable circular trigger is rendered in-app. Click to open the Inspector.
+If no license key is configured, you’ll see a “Get License Key” prompt.

Original file line number	Diff line number	Diff line change
`@@ -142,8 +142,8 @@ export function ConsoleTrigger({ position = "bottom-right" }: ConsoleTriggerProp`
`142`	`142`	`}}`
`143`	`143`	`title={`
`144`	`144`	`hasApiKey`
`145`		`- ? "Open Developer Console (Drag to move)"`
`146`		`- : "Developer Console (API Key Required, Drag to move)"`
	`145`	`+ ? "Open Inspector (Drag to move)"`
	`146`	`+ : "Inspector (License Key Required, Drag to move)"`
`147`	`147`	`}`
`148`	`148`	`>`
`149`	`149`	`<div`