feat(ag-ui): tool views — render frontend components for tool calls via the views registry

apps/cockpit/scripts/capability-registry.ts

@@ -52,6 +52,7 @@ export const capabilities: readonly Capability[] = [
   // AG-UI capabilities (uvicorn ag-ui-langgraph backend; not deployed to LangSmith)
   { id: 'ag-ui-interrupts', product: 'ag-ui', topic: 'interrupts', angularProject: 'cockpit-ag-ui-interrupts-angular', port: 4320, pythonPort: 5320, pythonDir: 'cockpit/ag-ui/interrupts/python' },
   { id: 'ag-ui-streaming', product: 'ag-ui', topic: 'streaming', angularProject: 'cockpit-ag-ui-streaming-angular', port: 4321, pythonPort: 5321, pythonDir: 'cockpit/ag-ui/streaming/python' },
+  { id: 'ag-ui-tool-views', product: 'ag-ui', topic: 'tool-views', angularProject: 'cockpit-ag-ui-tool-views-angular', port: 4322, pythonPort: 5322, pythonDir: 'cockpit/ag-ui/tool-views/python' },
 ] as const;
 
 export function findCapability(id: string): Capability | undefined {

apps/cockpit/src/lib/route-resolution.ts

@@ -13,6 +13,7 @@ import { langgraphTimeTravelPythonModule } from '../../../../cockpit/langgraph/t
 import { langgraphDeploymentRuntimePythonModule } from '../../../../cockpit/langgraph/deployment-runtime/python/src/index';
 import { agUiInterruptsPythonModule } from '../../../../cockpit/ag-ui/interrupts/python/src/index';
 import { agUiStreamingPythonModule } from '../../../../cockpit/ag-ui/streaming/python/src/index';
+import { agUiToolViewsPythonModule } from '../../../../cockpit/ag-ui/tool-views/python/src/index';
 import { deepAgentsMemoryPythonModule } from '../../../../cockpit/deep-agents/memory/python/src/index';
 import { deepAgentsPlanningPythonModule } from '../../../../cockpit/deep-agents/planning/python/src/index';
 import { deepAgentsFilesystemPythonModule } from '../../../../cockpit/deep-agents/filesystem/python/src/index';
@@ -85,6 +86,7 @@ const capabilityModules = [
   langgraphDeploymentRuntimePythonModule,
   agUiInterruptsPythonModule,
   agUiStreamingPythonModule,
+  agUiToolViewsPythonModule,
   deepAgentsMemoryPythonModule,
   deepAgentsPlanningPythonModule,
   deepAgentsFilesystemPythonModule,

apps/website/content/docs/chat/api/api-docs.json

@@ -1632,6 +1632,12 @@
         "description": "True iff there's a current (last-index) assistant message that's\nstill streaming. The bubble's own caret already signals loading;\nwe suppress the floor typing-indicator in that case so the user\ndoesn't see two loading affordances at once.\n\nMatches the same `streaming + current` condition the bubble uses\nto enable `.chat-message__caret`:\n  `agent().isLoading() && i === agent().messages().length - 1`\n  `i === agent().messages().length - 1`\n\nRestricted to assistant role because the caret only renders on\nassistant bubbles (`:host([data-role=\"assistant\"][data-current=...\n ][data-streaming=...])`).",
         "optional": false
       },
+      {
+        "name": "excludedToolNames",
+        "type": "Signal<readonly string[]>",
+        "description": "Union of GenUI dispatcher tool names and registered view tool names.",
+        "optional": false
+      },
       {
         "name": "genuiToolNames",
         "type": "InputSignal<readonly string[]>",
@@ -1752,6 +1758,12 @@
         "description": "",
         "optional": false
       },
+      {
+        "name": "viewToolNames",
+        "type": "Signal<readonly string[]>",
+        "description": "Tool names that have a registered view (keys of the `views` registry).\n These render as inline tool-views and are excluded from the default\n tool-call card so they don't render twice.",
+        "optional": false
+      },
       {
         "name": "welcomeDisabled",
         "type": "InputSignal<boolean>",
@@ -4457,6 +4469,58 @@
     ],
     "methods": []
   },
+  {
+    "name": "ChatToolViewsComponent",
+    "kind": "class",
+    "description": "Renders a frontend component for a tool call by reusing the chat\ncomposition's `views` registry. A tool call whose `name` matches a\nregistry key is bridged into a synthetic one-element render spec\n(`{ root: name, elements: { [name]: { type: name, props } } }`) and\nrendered through the existing render-spec pipeline.\n\nProps merge the live `args` (present while the call streams) with the\n`result` (on completion) and always include `status`, so a view\ncomponent can show its own loading/empty/error states. `RenderElement`\nfilters props down to the component's declared inputs, so extra keys\n(and a `status` a component chooses not to declare) are harmless.",
+    "params": [],
+    "examples": [],
+    "properties": [
+      {
+        "name": "agent",
+        "type": "InputSignal<Agent>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "handlers",
+        "type": "InputSignal<Record<string, (params: Record<string, unknown>) => unknown>>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "message",
+        "type": "InputSignal<Message | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "registry",
+        "type": "Signal<AngularRegistry | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "store",
+        "type": "InputSignal<StateStore | undefined>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "toolViews",
+        "type": "Signal<object[]>",
+        "description": "",
+        "optional": false
+      },
+      {
+        "name": "views",
+        "type": "InputSignal<Readonly<Record<string, Type<unknown> | RenderViewEntry>> | undefined>",
+        "description": "",
+        "optional": false
+      }
+    ],
+    "methods": []
+  },
   {
     "name": "ChatTraceComponent",
     "kind": "class",

cockpit/ag-ui/tool-views/angular/e2e/fixtures/tool-views.json

@@ -0,0 +1,28 @@
+{
+  "fixtures": [
+    {
+      "match": {
+        "userMessage": "What's the weather in San Francisco?",
+        "hasToolResult": true
+      },
+      "response": {
+        "content": "Here's the current weather for San Francisco."
+      }
+    },
+    {
+      "match": {
+        "userMessage": "What's the weather in San Francisco?"
+      },
+      "response": {
+        "toolCalls": [
+          {
+            "name": "weather_card",
+            "arguments": {
+              "location": "San Francisco"
+            }
+          }
+        ]
+      }
+    }
+  ]
+}

cockpit/ag-ui/tool-views/angular/e2e/global-setup-impl.ts

@@ -0,0 +1,14 @@
+// SPDX-License-Identifier: MIT
+import { resolve } from 'node:path';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+import { createAgUiGlobalSetup } from '@threadplane-internal/e2e-harness';
+
+const ports = portsFor('cockpit-ag-ui-tool-views-angular');
+
+export default createAgUiGlobalSetup({
+  pythonCwd: 'cockpit/ag-ui/tool-views/python',
+  backendPort: ports.langgraph,
+  angularProject: 'cockpit-ag-ui-tool-views-angular',
+  angularPort: ports.angular,
+  fixturesDir: resolve(__dirname, 'fixtures'),
+});

cockpit/ag-ui/tool-views/angular/e2e/manual/tool-views.manual.ts

@@ -0,0 +1,26 @@
+// SPDX-License-Identifier: MIT
+// Manual record-mode harness. Run against a live OpenAI key to capture new
+// fixture entries into cockpit/ag-ui/tool-views/angular/e2e/fixtures/tool-views.json.
+//
+// Prerequisites:
+//   1. Start the uvicorn backend in record mode (OPENAI_API_KEY set, no aimock):
+//        cd cockpit/ag-ui/tool-views/python && uv run uvicorn src.server:app --port 5322
+//   2. Start the Angular dev server:
+//        npx nx serve cockpit-ag-ui-tool-views-angular
+//   3. Run this harness via:
+//        npx playwright test --config cockpit/ag-ui/tool-views/angular/e2e/playwright.config.ts \
+//          manual/tool-views.manual.ts --headed
+import { expect, test } from '@playwright/test';
+
+test.describe('AG-UI Tool Views Example', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:4322');
+    await page.waitForSelector('app-tool-views', { state: 'attached' });
+  });
+
+  test('renders the weather card for a weather question', async ({ page }) => {
+    await page.fill('textarea[name="messageText"]', "What's the weather in San Francisco?");
+    await page.click('button[type="submit"]');
+    await expect(page.locator('app-weather-card')).toBeVisible({ timeout: 30000 });
+  });
+});

cockpit/ag-ui/tool-views/angular/e2e/playwright.config.ts

@@ -0,0 +1,21 @@
+// SPDX-License-Identifier: MIT
+import { defineConfig, devices } from '@playwright/test';
+import { portsFor } from '../../../../../cockpit/ports.mjs';
+
+const { angular: angularPort } = portsFor('cockpit-ag-ui-tool-views-angular');
+
+export default defineConfig({
+  testDir: '.',
+  testMatch: '**/*.spec.ts',
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['list'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL: `http://localhost:${angularPort}`,
+    trace: 'retain-on-failure',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  globalSetup: './global-setup-impl.ts',
+  globalTeardown: require.resolve('../../../../../libs/e2e-harness/src/global-teardown'),
+});

cockpit/ag-ui/tool-views/angular/e2e/tool-views.spec.ts

@@ -0,0 +1,17 @@
+// SPDX-License-Identifier: MIT
+import { test, expect } from '@playwright/test';
+import { submitAndWaitForResponse } from '@threadplane-internal/e2e-harness';
+
+test('tool-views: weather_card tool call renders the registered component with result values', async ({ page }) => {
+  await submitAndWaitForResponse(page, "What's the weather in San Francisco?");
+
+  // The registered WeatherCardComponent (app-weather-card) must mount for the
+  // weather_card tool call and show the deterministic result. Proves: aimock
+  // returned the tool call, ag-ui-langgraph emitted TOOL_CALL_* events, the
+  // adapter reduced them into toolCalls(), and the chat composition bridged
+  // the call into the views registry via the synthetic-spec path.
+  const card = page.locator('app-weather-card');
+  await expect(card).toBeVisible({ timeout: 30000 });
+  await expect(card).toContainText('San Francisco');
+  await expect(card).toContainText('68');
+});

cockpit/ag-ui/tool-views/angular/e2e/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": [
+      "node"
+    ],
+    "baseUrl": "../../../../..",
+    "paths": {
+      "@threadplane-internal/e2e-harness": [
+        "libs/e2e-harness/src/index.ts"
+      ],
+      "@threadplane-internal/e2e-harness/global-teardown": [
+        "libs/e2e-harness/src/global-teardown.ts"
+      ]
+    },
+    "allowJs": true
+  },
+  "include": [
+    "**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "test-results",
+    "playwright-report"
+  ]
+}

cockpit/ag-ui/tool-views/angular/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@threadplane/cockpit-ag-ui-tool-views-angular",
+  "private": true,
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@threadplane/ag-ui": "*",
+    "@threadplane/chat": "*"
+  },
+  "license": "MIT",
+  "sideEffects": false
+}

cockpit/ag-ui/tool-views/angular/project.json

@@ -0,0 +1,81 @@
+{
+  "name": "cockpit-ag-ui-tool-views-angular",
+  "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "cockpit/ag-ui/tool-views/angular/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@angular/build:application",
+      "outputs": ["{options.outputPath.base}"],
+      "options": {
+        "outputPath": {
+          "base": "dist/cockpit/ag-ui/tool-views/angular",
+          "browser": ""
+        },
+        "browser": "cockpit/ag-ui/tool-views/angular/src/main.ts",
+        "tsConfig": "cockpit/ag-ui/tool-views/angular/tsconfig.app.json",
+        "styles": ["cockpit/ag-ui/tool-views/angular/src/styles.css"]
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            { "type": "initial", "maximumWarning": "1mb", "maximumError": "1.5mb" },
+            { "type": "anyComponentStyle", "maximumWarning": "10kb", "maximumError": "16kb" }
+          ],
+          "outputHashing": "none"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "fileReplacements": [
+            {
+              "replace": "cockpit/ag-ui/tool-views/angular/src/environments/environment.ts",
+              "with": "cockpit/ag-ui/tool-views/angular/src/environments/environment.development.ts"
+            }
+          ]
+        },
+        "cockpit": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true,
+          "fileReplacements": [
+            {
+              "replace": "cockpit/ag-ui/tool-views/angular/src/environments/environment.ts",
+              "with": "cockpit/ag-ui/tool-views/angular/src/environments/environment.development.ts"
+            }
+          ],
+          "browser": "cockpit/ag-ui/tool-views/angular/src/main.cockpit.ts"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "continuous": true,
+      "executor": "@angular/build:dev-server",
+      "configurations": {
+        "production": { "buildTarget": "cockpit-ag-ui-tool-views-angular:build:production" },
+        "development": { "buildTarget": "cockpit-ag-ui-tool-views-angular:build:development" },
+        "cockpit": { "buildTarget": "cockpit-ag-ui-tool-views-angular:build:cockpit" }
+      },
+      "defaultConfiguration": "development",
+      "options": {
+        "proxyConfig": "cockpit/ag-ui/tool-views/angular/proxy.conf.mjs"
+      }
+    },
+    "smoke": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "cockpit/ag-ui/tool-views/angular",
+        "command": "npx tsx -e \"import { agUiToolViewsAngularModule } from './src/index.ts'; const module = agUiToolViewsAngularModule; if (module.id !== 'ag-ui-tool-views-angular' || module.title !== 'AG-UI Tool Views (Angular)') { throw new Error('Unexpected module shape for ' + module.id); }\""
+      }
+    },
+    "e2e": {
+      "executor": "@nx/playwright:playwright",
+      "options": {
+        "config": "cockpit/ag-ui/tool-views/angular/e2e/playwright.config.ts"
+      }
+    }
+  },
+  "tags": ["scope:cockpit-e2e", "scope:cockpit-examples"]
+}

cockpit/ag-ui/tool-views/angular/prompts/tool-views.md

@@ -0,0 +1,7 @@
+# AG-UI Tool Views (Angular)
+
+This capability demonstrates rendering frontend-owned Angular components for agent tool calls using the `@threadplane/chat` `views` registry. When the agent invokes the `weather_card` tool, the registered `WeatherCardComponent` renders inline in the chat transcript — live from the tool call's streamed arguments and final result — without any UI specification sent from the backend.
+
+Key API: `views({ weather_card: WeatherCardComponent })` builds a `ViewRegistry` that maps tool names to Angular components. The `[views]` input on `<chat>` activates the registry; matched tool calls bypass the default tool-call display and render the registered component instead. The component receives `status` ('running' | 'complete'), the tool call's partial `args` while streaming, and the merged result fields on completion.
+
+The `WeatherCardComponent` uses Angular signal inputs (`location`, `temperatureF`, `conditions`, `humidity`, `windMph`, `status`) and a `pending` computed signal to show a loading affordance until the result arrives. This pattern extends to any tool — register any standalone Angular component under the tool name key.

cockpit/ag-ui/tool-views/angular/proxy.conf.mjs

@@ -0,0 +1,6 @@
+// SPDX-License-Identifier: MIT
+import { portsFor } from '../../../../cockpit/ports.mjs';
+const { langgraph: backend } = portsFor('cockpit-ag-ui-tool-views-angular');
+export default {
+  '/agent': { target: `http://localhost:${backend}`, secure: false, changeOrigin: true, ws: true },
+};

cockpit/ag-ui/tool-views/angular/src/app/app.config.ts

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: MIT
+import { ApplicationConfig } from '@angular/core';
+import { provideAgent } from '@threadplane/ag-ui';
+import { provideChat } from '@threadplane/chat';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAgent({ url: '/agent' }),
+    provideChat({}),
+  ],
+};