Component Showcase

The live state harness for Configure web components is the Component Workbench at design/workbench.html. It renders production component states, including loading, connecting, connected, retry, imported, and error states. This page tells you how to run it.

Build the component bundle, then open the workbench:

cd packages/components
npm run build:workbench
open ../../design/workbench.html

Use npm run dev:workbench to rebuild on every change. Both commands run scripts/sync-generated.mjs, which copies dist/configure-components.global.js to design/lib/, apps/docs/public/lib/, apps/web/, and the agent apps. Verify visual states in the workbench before shipping UI changes.

Component examples and the workbench use generic demo data. Do not hardcode personal names, emails, phone numbers, or user-specific values into component examples.

Model-callable functions remain separate from UI components. Components collect consent and connection state; profile.tools() exposes tools to a model on the server.