spike: Add proof-of-concept for Devtools Extension

Author: MikeRyanDev

README.md

@@ -60,3 +60,9 @@ pnpm turbo run storybook:build --filter=storybook
 - `packages/runtime` - Server-side runtime handlers
 - `packages/shared` - Common utilities
 - `apps/storybook` - Component documentation and examples
+
+### Inspector and DevTools packages
+
+- `packages/web-inspector` - Lit-based `<web-inspector>` custom element that attaches to a live `CopilotKitCore` to mirror runtime status, agents, tools, context, and AG-UI events (caps 200 per agent / 500 total). Includes persistence helpers for layout/dock state.
+- `packages/devtools-inspector` - Proof-of-concept host that depends on `@copilotkitnext/web-inspector`, registers the element, and injects a remote core/agent shim so streamed data can render inside DevTools.
+- `packages/devtools-extension` - Chrome DevTools MV3 extension scaffold (background/content/page scripts, devtools panel) that relays CopilotKit data from the inspected page to the `devtools-inspector` host and renders a “CopilotKit” panel.

apps/angular/demo/src/app/app.config.ts

@@ -1,9 +1,6 @@
 import { ApplicationConfig, importProvidersFrom } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
-import {
-  provideCopilotKit,
-  provideCopilotChatLabels,
-} from "@copilotkitnext/angular";
+import { provideCopilotKit, provideCopilotChatLabels, provideCopilotKitDevtools } from "@copilotkitnext/angular";
 import { WildcardToolRenderComponent } from "./components/wildcard-tool-render.component";
 
 export const appConfig: ApplicationConfig = {
@@ -20,10 +17,10 @@ export const appConfig: ApplicationConfig = {
       frontendTools: [],
       humanInTheLoop: [],
     }),
+    provideCopilotKitDevtools(),
     provideCopilotChatLabels({
       chatInputPlaceholder: "Ask me anything...",
-      chatDisclaimerText:
-        "CopilotKit Angular Demo - AI responses may need verification.",
+      chatDisclaimerText: "CopilotKit Angular Demo - AI responses may need verification.",
     }),
   ],
 };

packages/angular/src/lib/devtools.ts

@@ -0,0 +1,35 @@
+import { APP_INITIALIZER, Provider } from "@angular/core";
+import { CopilotKit } from "./copilotkit";
+
+type DevtoolsHook = {
+  core?: unknown;
+  setCore: (core: unknown) => void;
+};
+
+function initializeDevtools(copilotkit: CopilotKit): () => void {
+  return () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const globalWindow = window as typeof window & { __COPILOTKIT_DEVTOOLS__?: DevtoolsHook };
+    const hook = globalWindow.__COPILOTKIT_DEVTOOLS__ ?? {
+      core: undefined,
+      setCore(nextCore: unknown) {
+        this.core = nextCore;
+      },
+    };
+
+    hook.setCore(copilotkit.core);
+    globalWindow.__COPILOTKIT_DEVTOOLS__ = hook;
+  };
+}
+
+export function provideCopilotKitDevtools(): Provider {
+  return {
+    provide: APP_INITIALIZER,
+    useFactory: initializeDevtools,
+    deps: [CopilotKit],
+    multi: true,
+  };
+}

packages/angular/src/public-api.ts

@@ -48,3 +48,4 @@ export * from "./lib/components/chat/copilot-chat-view-input-container";
 export * from "./lib/components/chat/copilot-chat-view-scroll-to-bottom-button";
 export * from "./lib/components/chat/copilot-chat-view-scroll-view";
 export * from "./lib/components/chat/copilot-chat-view.types";
+export * from "./lib/devtools";

packages/devtools-extension/README.md

@@ -0,0 +1,14 @@
+# CopilotKit DevTools extension
+
+Builds a Chrome DevTools panel that hosts the CopilotKit web inspector.
+
+## Commands
+
+- `pnpm --filter @copilotkitnext/devtools-extension build` – bundle scripts to `dist/` and copy the manifest/assets.
+- `pnpm --filter @copilotkitnext/devtools-extension dev` – watch mode for local iteration.
+
+## Loading the extension
+
+1. Run the build command above.
+2. In Chrome, open `chrome://extensions`, enable **Developer mode**, and click **Load unpacked**.
+3. Select `packages/devtools-extension/dist`. A “CopilotKit” DevTools panel will appear when inspecting a tab.

packages/devtools-extension/eslint.config.mjs

@@ -0,0 +1,3 @@
+import { config as baseConfig } from "@copilotkitnext/eslint-config/base";
+
+export default [...baseConfig];

packages/devtools-extension/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@copilotkitnext/devtools-extension",
+  "version": "0.0.1",
+  "private": true,
+  "description": "Chrome DevTools panel for CopilotKit",
+  "scripts": {
+    "build": "node ./scripts/build.mjs",
+    "dev": "node ./scripts/build.mjs --watch",
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.42-alpha.1",
+    "@copilotkitnext/core": "workspace:*",
+    "@copilotkitnext/devtools-inspector": "workspace:*"
+  },
+  "devDependencies": {
+    "@copilotkitnext/eslint-config": "workspace:*",
+    "@copilotkitnext/typescript-config": "workspace:*",
+    "@types/chrome": "^0.0.300",
+    "@types/node": "^22.15.3",
+    "esbuild": "^0.24.2",
+    "eslint": "^9.30.0",
+    "typescript": "5.8.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

packages/devtools-extension/public/devtools.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CopilotKit DevTools</title>
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>

packages/devtools-extension/public/manifest.chrome.json

@@ -0,0 +1,25 @@
+{
+  "manifest_version": 3,
+  "name": "CopilotKit DevTools",
+  "version": "0.0.1",
+  "description": "DevTools panel for CopilotKit runtime inspection.",
+  "devtools_page": "devtools.html",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": ["storage"],
+  "host_permissions": ["file:///*", "http://*/*", "https://*/*"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"],
+      "run_at": "document_start"
+    },
+    {
+      "matches": ["<all_urls>"],
+      "js": ["page.js"],
+      "run_at": "document_start",
+      "world": "MAIN"
+    }
+  ]
+}

packages/devtools-extension/public/panel.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>CopilotKit Panel</title>
+    <style>
+      html,
+      body,
+      #app {
+        height: 100%;
+        margin: 0;
+      }
+      body {
+        background: #f8fafc;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="panel.js"></script>
+  </body>
+</html>