@webmcpui/core 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +46 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,19 @@
|
|
|
1
1
|
# @webmcpui/core
|
|
2
2
|
|
|
3
|
-
Framework-agnostic, WebMCP-native custom elements.
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
subclass that supplies its control and specifics.
|
|
3
|
+
Framework-agnostic, WebMCP-native custom elements. Every `<wmcp-*>` element is a
|
|
4
|
+
proper, accessible HTML control first and, when you opt in, also registers an
|
|
5
|
+
imperative [WebMCP](https://webmcpui.com/docs/webmcp) tool an agent can call.
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
**Two families of primitives:**
|
|
8
|
+
|
|
9
|
+
- **Form controls** expose a _value_ an agent can set — `<wmcp-input>`,
|
|
10
|
+
`<wmcp-textarea>`, `<wmcp-select>`, `<wmcp-checkbox>`, `<wmcp-radio>` /
|
|
11
|
+
`<wmcp-radio-group>`. Shared behavior (form association via `ElementInternals`,
|
|
12
|
+
Standard Schema validation, a11y, theming) lives in a `WmcpFormControl` base.
|
|
13
|
+
- **Interaction primitives** expose an _action_ an agent can trigger —
|
|
14
|
+
`<wmcp-button>`, `<wmcp-dialog>`, `<wmcp-menu>`, `<wmcp-tabs>`,
|
|
15
|
+
`<wmcp-popover>` — or, for `<wmcp-toast>`, a _reading_ an agent can perceive.
|
|
16
|
+
They share a `WmcpAction` / `WmcpExposable` base.
|
|
9
17
|
|
|
10
18
|
One source of truth (vanilla custom elements built with [Lit](https://lit.dev)),
|
|
11
19
|
two distribution channels: an ESM package for build tools, and a single-file
|
|
@@ -21,11 +29,12 @@ pnpm add @webmcpui/core @webmcpui/tokens
|
|
|
21
29
|
import { defineComponents } from '@webmcpui/core';
|
|
22
30
|
import '@webmcpui/tokens/css'; // the theme tokens (CSS custom properties)
|
|
23
31
|
|
|
24
|
-
defineComponents(); // registers
|
|
32
|
+
defineComponents(); // registers every <wmcp-*> element
|
|
25
33
|
```
|
|
26
34
|
|
|
27
35
|
```html
|
|
28
36
|
<wmcp-input label="Email" name="email" type="email"></wmcp-input>
|
|
37
|
+
<wmcp-button variant="primary">Save</wmcp-button>
|
|
29
38
|
```
|
|
30
39
|
|
|
31
40
|
Importing the package does **not** register elements — you call
|
|
@@ -45,7 +54,7 @@ For Webflow / WordPress / hand-written HTML — one tag, elements auto-register:
|
|
|
45
54
|
|
|
46
55
|
See `examples/plain-html.html` for a working local version.
|
|
47
56
|
|
|
48
|
-
## Standard Schema validation
|
|
57
|
+
## Standard Schema validation (form controls)
|
|
49
58
|
|
|
50
59
|
Bring any [Standard Schema](https://standardschema.dev) validator — Zod,
|
|
51
60
|
Valibot, ArkType — set it as the `schema` property. No bespoke schema language.
|
|
@@ -59,51 +68,64 @@ input.schema = z.string().email('Enter a valid email');
|
|
|
59
68
|
|
|
60
69
|
Validation runs on input and during native form validation; failures set
|
|
61
70
|
`aria-invalid`, render an error message in a live region, and propagate to the
|
|
62
|
-
containing `<form>` via ElementInternals
|
|
63
|
-
|
|
64
|
-
> **Note:** Standard Schema validates values but does not emit JSON Schema, so
|
|
65
|
-
> the WebMCP tool's parameter schema is derived from the input `type`, not from
|
|
66
|
-
> the validator. Richer tool schemas are a future enhancement.
|
|
71
|
+
containing `<form>` via `ElementInternals`.
|
|
67
72
|
|
|
68
73
|
## WebMCP exposure
|
|
69
74
|
|
|
70
|
-
Opt in with `expose`. The element registers an imperative WebMCP tool
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
first.
|
|
75
|
+
Opt in with `expose`. The element registers an imperative WebMCP tool on connect
|
|
76
|
+
and unregisters on disconnect. It is feature-detected — preferring
|
|
77
|
+
`document.modelContext` (canonical as of the Chrome 149+ origin trial) and
|
|
78
|
+
falling back to the deprecated `navigator.modelContext` — and a complete no-op
|
|
79
|
+
when no host is present, so the element is always a good control first.
|
|
75
80
|
|
|
76
81
|
```html
|
|
82
|
+
<!-- form control → a "fill" tool that sets a value -->
|
|
77
83
|
<wmcp-input label="Email" name="email" expose></wmcp-input>
|
|
78
|
-
|
|
84
|
+
|
|
85
|
+
<!-- interaction primitive → an "action" tool the agent can trigger -->
|
|
86
|
+
<wmcp-button tool-name="book_appointment" expose>Book</wmcp-button>
|
|
87
|
+
|
|
88
|
+
<!-- a menu → a parameterized action (the agent picks which item) -->
|
|
89
|
+
<wmcp-menu name="row_action" label="Actions" expose>
|
|
90
|
+
<option value="edit">Edit</option>
|
|
91
|
+
<option value="delete">Delete</option>
|
|
92
|
+
</wmcp-menu>
|
|
79
93
|
```
|
|
80
94
|
|
|
95
|
+
Consequential steps stay a deliberate human action: an agent can _set_ a value
|
|
96
|
+
or _open_ a dialog, but submitting/confirming is the person's to make.
|
|
97
|
+
|
|
81
98
|
## Testing without a real agent
|
|
82
99
|
|
|
83
|
-
No mainstream agent calls WebMCP yet, so `@webmcpui/core/testing` ships a
|
|
84
|
-
host to exercise exposure end to end
|
|
100
|
+
No mainstream agent calls WebMCP broadly yet, so `@webmcpui/core/testing` ships a
|
|
101
|
+
fake host to exercise exposure end to end:
|
|
85
102
|
|
|
86
103
|
```ts
|
|
87
104
|
import { installFakeAgent } from '@webmcpui/core/testing';
|
|
88
105
|
|
|
89
106
|
const agent = installFakeAgent();
|
|
90
|
-
// ... connect a <wmcp-input expose> ...
|
|
107
|
+
// ... connect a <wmcp-input expose> / <wmcp-button expose> ...
|
|
91
108
|
await agent.call('fill_email', { value: 'agent@webmcpui.com' });
|
|
109
|
+
await agent.call('click_button');
|
|
92
110
|
agent.restore();
|
|
93
111
|
```
|
|
94
112
|
|
|
113
|
+
## Documentation
|
|
114
|
+
|
|
115
|
+
Full docs, live demos for every element, and `llms.txt` at
|
|
116
|
+
**[webmcpui.com](https://webmcpui.com)**.
|
|
117
|
+
|
|
95
118
|
## Build & test
|
|
96
119
|
|
|
97
120
|
```bash
|
|
98
121
|
pnpm build # tsup → dist/ (ESM + IIFE + d.ts)
|
|
99
122
|
pnpm typecheck # tsc --noEmit
|
|
100
|
-
pnpm test # @web/test-runner in real Chromium
|
|
101
|
-
# validation a11y, WebMCP exposure)
|
|
123
|
+
pnpm test # @web/test-runner in real Chromium
|
|
102
124
|
pnpm test:smoke # node smoke check against the built dist
|
|
103
125
|
```
|
|
104
126
|
|
|
105
127
|
Tests run in a genuine browser via the Playwright launcher — form-associated
|
|
106
|
-
custom elements and ElementInternals don't work under jsdom. First run needs
|
|
128
|
+
custom elements and `ElementInternals` don't work under jsdom. First run needs
|
|
107
129
|
the browser binary:
|
|
108
130
|
|
|
109
131
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webmcpui/core",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Agent-aware, framework-agnostic web components for the WebMCP era — accessible, form-associated controls an AI agent can fill, with Standard Schema validation.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Gary Pfaff (Pfaff Digital)",
|