@webmcp-auto-ui/agent 2.5.24 → 2.5.26

package/src/recipes/widgets/grid-data.md

@@ -1,57 +0,0 @@
----
-widget: grid-data
-description: Data grid with cell highlighting
-group: rich
-schema:
-  type: object
-  required:
-    - rows
-  properties:
-    title:
-      type: string
-    columns:
-      type: array
-      items:
-        type: object
-        required:
-          - key
-          - label
-        properties:
-          key:
-            type: string
-          label:
-            type: string
-          width:
-            type: string
-    rows:
-      type: array
-      items:
-        type: array
-    highlights:
-      type: array
-      items:
-        type: object
-        required:
-          - row
-          - col
-        properties:
-          row:
-            type: number
-          col:
-            type: number
-          color:
-            type: string
----
-
-## When to use
-Display data in a grid with the ability to highlight specific cells — dashboards, comparison matrices, tabular heatmaps. Prefer `data-table` for a classic sortable table.
-
-## How to use
-1. Fetch data via MCP
-2. Structure into rows (arrays) with optional columns
-3. Add `highlights` to draw attention to specific cells
-4. Call `autoui_webmcp_widget_display('grid-data', { title: 'Risk Matrix', columns: [{ key: 'zone', label: 'Zone' }, { key: 'score', label: 'Score' }], rows: [['North', 85], ['South', 42]], highlights: [{ row: 0, col: 1, color: '#f44336' }] })`
-
-## Common mistakes
-- The `row` and `col` indexes in `highlights` are 0-based
-- `rows` is an array of arrays (not objects), unlike `data-table`

package/src/recipes/widgets/hemicycle.md

@@ -1,43 +0,0 @@
----
-widget: hemicycle
-description: Parliamentary hemicycle with political groups
-group: rich
-schema:
-  type: object
-  required:
-    - groups
-  properties:
-    title:
-      type: string
-    groups:
-      type: array
-      items:
-        type: object
-        required:
-          - id
-          - label
-          - seats
-          - color
-        properties:
-          id:
-            type: string
-          label:
-            type: string
-          seats:
-            type: number
-          color:
-            type: string
-    totalSeats:
-      type: number
----
-
-## When to use
-Visualize the composition of a parliamentary assembly or any set distributed into groups with proportions. Ideal for election results and seat distribution.
-
-## How to use
-1. Fetch composition data via MCP (groups, seat counts, colors)
-2. Call `autoui_webmcp_widget_display('hemicycle', { title: 'National Assembly', groups: [{ id: 'lfi', label: 'LFI', seats: 75, color: '#cc2443' }, { id: 'ren', label: 'Renaissance', seats: 170, color: '#ffeb00' }], totalSeats: 577 })`
-
-## Common mistakes
-- Forgetting one of the 4 required fields in each `groups` object (id, label, seats, color are ALL required)
-- Not providing a valid hexadecimal color

package/src/recipes/widgets/js-sandbox.md

@@ -1,32 +0,0 @@
----
-widget: js-sandbox
-description: Isolated JavaScript sandbox with HTML/CSS
-group: advanced
-schema:
-  type: object
-  required:
-    - code
-  properties:
-    title:
-      type: string
-    code:
-      type: string
-    html:
-      type: string
-    css:
-      type: string
-    height:
-      type: string
----
-
-## When to use
-For executing custom JavaScript code in an isolated environment (iframe) — interactive demos, prototypes, custom visualizations, bespoke widgets that no other widget covers.
-
-## How to use
-1. Write the JS code, and optionally the associated HTML/CSS
-2. Call `autoui_webmcp_widget_display('js-sandbox', { title: 'Interactive demo', code: 'document.getElementById("app").textContent = "Hello!"', html: '<div id="app"></div>', css: '#app { font-size: 24px; }', height: '200px' })`
-
-## Common mistakes
-- The code runs in an isolated iframe — no access to the parent DOM or the app's global variables
-- Always provide `html` if the JS code manipulates the DOM (otherwise there is nothing to display)
-- Do not use this widget when a specialized widget exists (chart-rich, d3, etc.)

package/src/recipes/widgets/json-viewer.md

@@ -1,27 +0,0 @@
----
-widget: json-viewer
-description: Interactive JSON viewer with expand/collapse
-group: rich
-schema:
-  type: object
-  required:
-    - data
-  properties:
-    title:
-      type: string
-    data: {}
-    maxDepth:
-      type: number
-    expanded:
-      type: boolean
----
-
-## When to use
-Display raw JSON data interactively — API responses, configurations, complex data structures. The user can explore the tree by expanding levels.
-
-## How to use
-1. Fetch JSON data via MCP
-2. Call `autoui_webmcp_widget_display('json-viewer', { title: 'API Response', data: { users: [...] }, maxDepth: 3, expanded: false })`
-
-## Common mistakes
-- Passing a JSON string instead of an object — `data` expects an object/array, not a string

package/src/recipes/widgets/kv.md

@@ -1,31 +0,0 @@
----
-widget: kv
-description: Key-value pairs (properties, metadata)
-group: simple
-schema:
-  type: object
-  required:
-    - rows
-  properties:
-    title:
-      type: string
-    rows:
-      type: array
-      items:
-        type: array
-        items:
-          type: string
-        minItems: 2
-        maxItems: 2
----
-
-## When to use
-Display properties or metadata as key-value pairs. Ideal for detail cards, configurations, and structured summaries.
-
-## How to use
-1. Fetch the data via MCP (e.g. record details, object properties)
-2. Format as an array of pairs: `[['Name', 'Alice'], ['Email', 'alice@example.com']]`
-3. Call `autoui_webmcp_widget_display('kv', { title: 'User details', rows: [['Name', 'Alice'], ['Email', 'alice@example.com']] })`
-
-## Common mistakes
-- Passing an object `{key: value}` instead of an array of pairs `[[key, value]]`

package/src/recipes/widgets/list.md

@@ -1,24 +0,0 @@
----
-widget: list
-description: Ordered list of items
-group: simple
-schema:
-  type: object
-  required:
-    - items
-  properties:
-    title:
-      type: string
-    items:
-      type: array
-      items:
-        type: string
----
-
-## When to use
-Display a simple list of text items — search results, steps, names, inventory items. Prefer `data-table` if items have multiple fields.
-
-## How to use
-1. Fetch the data via MCP
-2. Extract items as an array of strings
-3. Call `autoui_webmcp_widget_display('list', { title: 'Results', items: ['Item 1', 'Item 2', 'Item 3'] })`

package/src/recipes/widgets/log.md

@@ -1,39 +0,0 @@
----
-widget: log
-description: Event log with levels and timestamps
-group: rich
-schema:
-  type: object
-  required:
-    - entries
-  properties:
-    title:
-      type: string
-    entries:
-      type: array
-      items:
-        type: object
-        required:
-          - message
-        properties:
-          timestamp:
-            type: string
-          level:
-            type: string
-            enum:
-              - debug
-              - info
-              - warn
-              - error
-          message:
-            type: string
-          source:
-            type: string
----
-
-## When to use
-Display an event log — application logs, audit trail, operation history. Each entry can be color-coded by level (debug/info/warn/error).
-
-## How to use
-1. Fetch logs via MCP
-2. Call `autoui_webmcp_widget_display('log', { title: 'Server Logs', entries: [{ timestamp: '14:32:01', level: 'error', message: 'Connection refused', source: 'db' }, { timestamp: '14:32:05', level: 'info', message: 'Retry successful', source: 'db' }] })`

package/src/recipes/widgets/map.md

@@ -1,49 +0,0 @@
----
-widget: map
-description: Interactive map with markers
-group: advanced
-schema:
-  type: object
-  properties:
-    title:
-      type: string
-    center:
-      type: object
-      properties:
-        lat:
-          type: number
-        lng:
-          type: number
-    zoom:
-      type: number
-    height:
-      type: string
-    markers:
-      type: array
-      items:
-        type: object
-        required:
-          - lat
-          - lng
-        properties:
-          lat:
-            type: number
-          lng:
-            type: number
-          label:
-            type: string
-          color:
-            type: string
----
-
-## When to use
-Display geolocated data — addresses, points of interest, itineraries, coverage areas. Ideal when the user asks "where is..." or "show on a map".
-
-## How to use
-1. Retrieve coordinates via MCP (lat/lng)
-2. Set the center and zoom based on the extent of the data
-3. Call `autoui_webmcp_widget_display('map', { title: 'Our offices', center: { lat: 48.8566, lng: 2.3522 }, zoom: 12, markers: [{ lat: 48.8566, lng: 2.3522, label: 'Paris HQ' }] })`
-
-## Common mistakes
-- Swapping lat and lng (latitude = North/South, longitude = East/West)
-- Forgetting to center the map on the displayed markers

package/src/recipes/widgets/profile.md

@@ -1,49 +0,0 @@
----
-widget: profile
-description: Profile card with fields and statistics
-group: rich
-schema:
-  type: object
-  required:
-    - name
-  properties:
-    name:
-      type: string
-    subtitle:
-      type: string
-    fields:
-      type: array
-      items:
-        type: object
-        required:
-          - label
-          - value
-        properties:
-          label:
-            type: string
-          value:
-            type: string
-    stats:
-      type: array
-      items:
-        type: object
-        required:
-          - label
-          - value
-        properties:
-          label:
-            type: string
-          value:
-            type: string
----
-
-## When to use
-Display a profile card for a person or entity — employee, client, organization. Combines identity, detailed fields, and summarized statistics.
-
-## How to use
-1. Retrieve the person/entity information via MCP
-2. Separate the data into `fields` (text details) and `stats` (key figures)
-3. Call `autoui_webmcp_widget_display('profile', { name: 'Alice Martin', subtitle: 'Senior Developer', fields: [{ label: 'Email', value: 'alice@ex.com' }], stats: [{ label: 'Projects', value: '12' }] })`
-
-## Common mistakes
-- NEVER fabricate image URLs for the avatar. Use ONLY the URLs returned by MCP tools. If no URL is available, do not include an avatar field — the widget will display initials automatically.

package/src/recipes/widgets/recipe-browser.md

@@ -1,102 +0,0 @@
----
-widget: recipe-browser
-description: Displays available recipes as interactive cards and allows viewing the detail of each recipe
-group: rich
-schema:
-  type: object
-  properties:
-    title:
-      type: string
-    cards:
-      type: array
-      items:
-        type: object
-        required:
-          - title
-        properties:
-          title:
-            type: string
-          description:
-            type: string
-          tags:
-            type: array
-            items:
-              type: string
-          meta:
-            type: object
-            properties:
-              recipe_name:
-                type: string
-              server:
-                type: string
-    interactive:
-      type: boolean
-  required:
-    - cards
----
-
-## When to use
-When the user wants to see available recipes, explore what the server can do, or understand how to use a specific widget.
-
-## How to use
-
-### Step 1 — List recipes
-Call `search_recipes()` on each connected server (MCP and WebMCP) to get the list of recipes.
-
-### Step 2 — Display as interactive cards
-Use `widget_display('cards', ...)` with the `interactive: true` parameter to make cards clickable:
-
-```json
-{
-  "name": "cards",
-  "params": {
-    "title": "Available recipes",
-    "cards": [
-      {
-        "title": "Recipe name",
-        "description": "Short description",
-        "tags": ["source_server"],
-        "meta": { "recipe_name": "technical_name", "server": "server_name" }
-      }
-    ],
-    "interactive": true
-  }
-}
-```
-
-The `meta` field is important: it will be returned in the interaction event when the user clicks on a card.
-
-### Step 3 — React to a click
-When the user clicks on a card, you will receive an interaction message containing the `meta` data. Use `meta.recipe_name` and `meta.server` to:
-
-1. Call `get_recipe(meta.recipe_name)` on the right server
-2. Display the recipe content in a `code` widget with `language: 'markdown'`:
-
-```json
-{
-  "name": "code",
-  "params": {
-    "title": "Recipe: Name",
-    "language": "markdown",
-    "code": "full recipe content..."
-  }
-}
-```
-
-3. **Link the two widgets**: the cards widget (list) and the code widget (detail) are linked. When the user clicks on another card, update the detail widget instead of creating a new one via `canvas('update', ...)`.
-
-## Common mistakes
-- Do not forget `interactive: true` in the cards — without it, clicks are not forwarded
-- Do not create a new detail widget on each click — reuse the existing one via `canvas('update', ...)`
-- MCP and WebMCP recipes have different server names — use the correct prefix for `get_recipe()`
-
-## Full example
-
-User: "Show me the available recipes"
-
-1. `autoui_webmcp_search_recipes()` → 26 widget recipes
-2. `tricoteuses_mcp_search_recipes()` → 10 data recipes
-3. `widget_display('cards', { title: "36 recipes", cards: [...], interactive: true })`
-4. *User clicks on "Assembly composition"*
-5. `autoui_webmcp_get_recipe('hemicycle')` → markdown content
-6. `widget_display('code', { title: "Recipe: Assembly composition", language: "markdown", code: "..." })`

package/src/recipes/widgets/sankey.md

@@ -1,54 +0,0 @@
----
-widget: sankey
-description: Sankey diagram (flow between nodes)
-group: rich
-schema:
-  type: object
-  required:
-    - nodes
-    - links
-  properties:
-    title:
-      type: string
-    nodes:
-      type: array
-      items:
-        type: object
-        required:
-          - id
-          - label
-        properties:
-          id:
-            type: string
-          label:
-            type: string
-          color:
-            type: string
-    links:
-      type: array
-      items:
-        type: object
-        required:
-          - source
-          - target
-          - value
-        properties:
-          source:
-            type: string
-          target:
-            type: string
-          value:
-            type: number
----
-
-## When to use
-Visualize flows or transfers between categories — budget, conversions, migrations, data flows. Nodes represent stages and links represent transferred quantities.
-
-## How to use
-1. Fetch flow data via MCP
-2. Define nodes (stages) and links (flows between stages)
-3. Call `autoui_webmcp_widget_display('sankey', { title: 'Budget Flow', nodes: [{ id: 'rev', label: 'Revenue' }, { id: 'sal', label: 'Salaries' }], links: [{ source: 'rev', target: 'sal', value: 50000 }] })`
-
-## Common mistakes
-- The `source` and `target` in links must match existing `id` values in the nodes
-- Do not create cycles (flow must be directional)

package/src/recipes/widgets/stat-card.md

@@ -1,43 +0,0 @@
----
-widget: stat-card
-description: Enhanced stat card with trend and variant
-group: rich
-schema:
-  type: object
-  required:
-    - label
-    - value
-  properties:
-    label:
-      type: string
-    value:
-      type: string
-    unit:
-      type: string
-    delta:
-      type: string
-    trend:
-      type: string
-      enum:
-        - up
-        - down
-        - flat
-    previousValue:
-      type: string
-    variant:
-      type: string
-      enum:
-        - default
-        - success
-        - warning
-        - error
-        - info
----
-
-## When to use
-For an enriched KPI with context — delta, previous value, unit, colored variant. Prefer `stat` for a simple number with no additional context.
-
-## How to use
-1. Fetch the metric and its comparison value via MCP
-2. Calculate the delta if needed
-3. Call `autoui_webmcp_widget_display('stat-card', { label: 'Revenue', value: '142k', unit: '€', delta: '+12%', trend: 'up', previousValue: '127k', variant: 'success' })`

package/src/recipes/widgets/stat.md

@@ -1,35 +0,0 @@
----
-widget: stat
-description: Key statistic (KPI, counter, total)
-group: simple
-schema:
-  type: object
-  required:
-    - label
-    - value
-  properties:
-    label:
-      type: string
-    value:
-      type: string
-    trend:
-      type: string
-    trendDir:
-      type: string
-      enum:
-        - up
-        - down
-        - neutral
----
-
-## When to use
-Display a single key figure — KPI, counter, total, score. Ideal when the user asks "how many…" or requests a numerical summary.
-
-## How to use
-1. Fetch the data via the appropriate MCP tool (e.g. SQL query, API call)
-2. Call `autoui_webmcp_widget_display('stat', { label: 'Active users', value: '1,247' })`
-3. Optional: add `trend` (e.g. '+12%') and `trendDir` ('up'/'down'/'neutral') to show the trend
-
-## Common mistakes
-- Passing `value` as a number instead of a string — always convert to string
-- Forgetting to format the number (thousand separators, units)

package/src/recipes/widgets/tags.md

@@ -1,30 +0,0 @@
----
-widget: tags
-description: Group of tags/badges
-group: simple
-schema:
-  type: object
-  required:
-    - tags
-  properties:
-    label:
-      type: string
-    tags:
-      type: array
-      items:
-        type: object
-        required:
-          - text
-        properties:
-          text:
-            type: string
-          active:
-            type: boolean
----
-
-## When to use
-Display categories, labels, filters, or badges. Useful for showing tags associated with an item or presenting visual filters.
-
-## How to use
-1. Fetch the tags or categories from MCP
-2. Call `autoui_webmcp_widget_display('tags', { label: 'Categories', tags: [{ text: 'Finance', active: true }, { text: 'Tech' }] })`

package/src/recipes/widgets/text.md

@@ -1,19 +0,0 @@
----
-widget: text
-description: Free-form text paragraph
-group: simple
-schema:
-  type: object
-  required:
-    - content
-  properties:
-    content:
-      type: string
----
-
-## When to use
-Display an explanatory paragraph, a summary, or a long description. Prefer `stat` for a single figure, `kv` for structured pairs.
-
-## How to use
-1. Write or fetch the text to display
-2. Call `autoui_webmcp_widget_display('text', { content: 'Here is the summary of the analysis...' })`

package/src/recipes/widgets/timeline.md

@@ -1,38 +0,0 @@
----
-widget: timeline
-description: Event timeline with status
-group: rich
-schema:
-  type: object
-  required:
-    - events
-  properties:
-    title:
-      type: string
-    events:
-      type: array
-      items:
-        type: object
-        required:
-          - title
-        properties:
-          date:
-            type: string
-          title:
-            type: string
-          description:
-            type: string
-          status:
-            type: string
-            enum:
-              - done
-              - active
-              - pending
----
-
-## When to use
-Display a sequence of chronological events — history, process steps, activity log. Each event can have a status (done/active/pending).
-
-## How to use
-1. Fetch events via MCP, sort them chronologically
-2. Call `autoui_webmcp_widget_display('timeline', { title: 'Order History', events: [{ date: '2024-01-15', title: 'Order placed', status: 'done' }, { date: '2024-01-16', title: 'Shipped', status: 'active' }] })`