spike: Add proof-of-concept for Devtools Extension

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/package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@copilotkitnext/angular": "workspace:*",
+    "@copilotkitnext/web-inspector": "workspace:*",
     "rxjs": "^7.8.1",
     "tslib": "^2.8.1",
     "zod": "^3.25.75",

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.",
     }),
   ],
 };

apps/angular/demo/src/app/routes/headless/headless-chat.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy, computed, inject, input, signal } from "@angular/core";
+import { Component, ChangeDetectionStrategy, computed, inject, input, signal, OnDestroy, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { FormsModule } from "@angular/forms";
 import {
@@ -10,6 +10,7 @@ import {
   registerHumanInTheLoop,
 } from "@copilotkitnext/angular";
 import { RenderToolCalls } from "@copilotkitnext/angular";
+import { WEB_INSPECTOR_TAG, type WebInspectorElement } from "@copilotkitnext/web-inspector";
 import { z } from "zod";
 
 @Component({
@@ -76,14 +77,15 @@ export class RequireApprovalComponent implements HumanInTheLoopToolRenderer {
     </div>
   `,
 })
-export class HeadlessChatComponent {
+export class HeadlessChatComponent implements OnInit, OnDestroy {
   readonly agentStore = injectAgentStore("openai");
   readonly agent = computed(() => this.agentStore()?.agent);
   readonly isRunning = computed(() => !!this.agentStore()?.isRunning());
   readonly messages = computed(() => this.agentStore()?.messages());
   readonly copilotkit = inject(CopilotKit);
 
   inputValue = "";
+  private inspectorElement: WebInspectorElement | null = null;
 
   constructor() {
     registerHumanInTheLoop({
@@ -104,6 +106,28 @@ export class HeadlessChatComponent {
     );
   }
 
+  ngOnInit(): void {
+    if (typeof document === "undefined") return;
+
+    const existing = document.querySelector<WebInspectorElement>(WEB_INSPECTOR_TAG);
+    const inspector = existing ?? (document.createElement(WEB_INSPECTOR_TAG) as WebInspectorElement);
+    inspector.core = this.copilotkit.core;
+    inspector.setAttribute("auto-attach-core", "false");
+
+    if (!existing) {
+      document.body.appendChild(inspector);
+    }
+
+    this.inspectorElement = inspector;
+  }
+
+  ngOnDestroy(): void {
+    if (this.inspectorElement && this.inspectorElement.isConnected) {
+      this.inspectorElement.remove();
+    }
+    this.inspectorElement = null;
+  }
+
   async send() {
     const content = this.inputValue.trim();
     const agent = this.agent();

apps/angular/demo/tsconfig.json

@@ -25,6 +25,10 @@
         "../../packages/shared/dist/index.d.ts",
         "../../packages/shared/dist/index.mjs",
         "../../packages/shared/src/index.ts"
+      ],
+      "@copilotkitnext/web-inspector": [
+        "../../packages/web-inspector/dist/index.d.ts",
+        "../../packages/web-inspector/src/index.ts"
       ]
     }
   },

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>

packages/devtools-extension/scripts/build.mjs

@@ -0,0 +1,68 @@
+import { build, context } from "esbuild";
+import { cp, mkdir, rm } from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, "..");
+const distDir = path.join(rootDir, "dist");
+const isWatch = process.argv.includes("--watch");
+const isProd = process.env.NODE_ENV === "production";
+
+const entryPoints = {
+  background: path.join(rootDir, "src/background.ts"),
+  content: path.join(rootDir, "src/content.ts"),
+  page: path.join(rootDir, "src/page.ts"),
+  devtools: path.join(rootDir, "src/devtools.ts"),
+  panel: path.join(rootDir, "src/panel.ts"),
+};
+
+const buildOptions = {
+  entryPoints,
+  outdir: distDir,
+  bundle: true,
+  sourcemap: !isProd,
+  target: "chrome114",
+  format: "iife",
+  platform: "browser",
+  logLevel: "info",
+  define: {
+    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV ?? "development"),
+  },
+};
+
+async function copyPublicAssets() {
+  const publicDir = path.join(rootDir, "public");
+  await mkdir(distDir, { recursive: true });
+  await cp(publicDir, distDir, { recursive: true });
+
+  // Chrome expects manifest.json. We keep a browser-specific name in source, then rename on copy.
+  const chromeManifestSrc = path.join(distDir, "manifest.chrome.json");
+  const chromeManifestDest = path.join(distDir, "manifest.json");
+  try {
+    await cp(chromeManifestSrc, chromeManifestDest, { recursive: false, force: true });
+  } catch (error) {
+    console.warn("[devtools-extension] Unable to copy manifest:", error);
+  }
+}
+
+async function buildOnce() {
+  await rm(distDir, { recursive: true, force: true });
+  await build(buildOptions);
+  await copyPublicAssets();
+}
+
+async function buildWatch() {
+  const ctx = await context(buildOptions);
+  await ctx.watch();
+  await copyPublicAssets();
+  console.log("[devtools-extension] Watching for changes...");
+}
+
+if (isWatch) {
+  await buildWatch();
+} else {
+  await buildOnce();
+}
+/* eslint-env node */
+/* global process, console */