Documentation — Phase 8 · v2.1.1

Trois façons d'intégrer
vos composants avec
webmcp-auto-ui

Créez un serveur WebMCP avec Svelte, intégrez les widgets natifs dans votre projet, ou construisez une bibliothèque Material UI — trois approches, un seul protocole.

Publié le 11 avril 2026 Par @jeanbaptiste v2.1.1

Composants Svelte

Créer un serveur WebMCP complet avec vos widgets Svelte

→

Intégration native autoui

Intégrer les widgets natifs dans votre projet existant

→

Serveur Material UI

Construire sa propre bibliothèque designkit_webmcp_*

→

Tutoriel 01

Ajouter vos propres
composants Svelte

Créez un serveur WebMCP avec vos widgets Svelte et exposez-les au LLM via des recettes — du composant au system prompt en cinq étapes.

Installer les packages & créer la structure

Ajoutez @webmcp-auto-ui/core pour createWebMcpServer et @webmcp-auto-ui/agent pour la boucle agent et le serveur autoui intégré.

terminal

npm install @webmcp-auto-ui/core @webmcp-auto-ui/agent

src/ widgets/ KanbanBoard.svelte # votre composant kanban.recipe.md # la recette pour le LLM Timeline.svelte timeline.recipe.md server.ts # définition du serveur WebMCP main.ts

◈La recette est pour le LLM, le composant pour le rendu. Ils restent séparés jusqu'au registerWidget.

Écrire l'interface Props du composant

L'interface Props TypeScript est la source de vérité unique. Le schema JSON est auto-généré via ts-json-schema-generator — ne l'écrivez jamais à la main.

KanbanBoard.svelte

<script lang="ts">
  # Source de vérité → schema JSON auto-généré depuis ici
  interface Props {
    title:    string;
    columns:  Array<{
      id:     string;
      label:  string;
      cards:  string[];
    }>;
    theme?:   'light' | 'dark';
    compact?: boolean;
  }
  let { title, columns, theme = 'light' }: Props = $props();
</script>

<section class={theme}>
  <h2>{title}</h2>
  {#each columns as col}
    <div class="column">...</div>
  {/each}
</section>

◈ts-json-schema-generator lit le TypeScript pur — compatible Svelte 5, React, Vue et tout framework exposant une interface Props TS.

Créer la recette .md

Le frontmatter schema: est injecté automatiquement. Écrivez uniquement le body — votre documentation pour le LLM. Le champ widget: est obligatoire.

kanban.recipe.md

---
widget: KanbanBoard
description: Tableau kanban avec colonnes et cartes,
  idéal pour un workflow ou un backlog agile.
schema: <auto-injecté par sync:schemas>
---

## Quand utiliser ce widget
Afficher un backlog, un workflow par étapes,
ou tout ensemble de tâches organisées en colonnes.

## Comment récupérer les données
Appelez `monprojet_mcp_get_tasks`, mappez par statut en `columns[]`.

mywidgets_webmcp_widget_display({
  name: "KanbanBoard",
  params: {
    title: "Sprint 4",
    columns: [
      { id: "todo",  label: "À faire",   cards: ["Tâche A"] },
      { id: "doing", label: "En cours", cards: ["Tâche B"] }
    ]
  }
})

◈widget_display prend name et params — pas un objet fusionné.

Enregistrer le serveur WebMCP

Associez recette + composant dans server.ts, puis ajoutez le layer à la boucle agent.

server.ts

import { createWebMcpServer } from '@webmcp-auto-ui/core';
import kanbanRecipe   from './widgets/kanban.recipe.md';
import timelineRecipe from './widgets/timeline.recipe.md';
import KanbanBoard    from './widgets/KanbanBoard.svelte';
import Timeline       from './widgets/Timeline.svelte';

export const mywidgets = createWebMcpServer('mywidgets', {
  description: 'Widgets Svelte de Mon Application'
});

mywidgets.registerWidget(kanbanRecipe,  KanbanBoard);
mywidgets.registerWidget(timelineRecipe, Timeline);

main.ts

import { runAgentLoop, AnthropicProvider, autoui } from '@webmcp-auto-ui/agent';
import { mywidgets } from './server';
import myDataClient from './data-client';

const result = await runAgentLoop('Affiche le board', {
  provider: new AnthropicProvider({ proxyUrl: '/api/chat' }),
  layers: [
    myDataClient.layer(),  // mydata_mcp_*   → données
    autoui.layer(),        // autoui_webmcp_* → widgets natifs
    mywidgets.layer(),         // mywidgets_webmcp_*  → vos widgets
  ],
  callbacks: {
    onWidget: (type, data) => renderWidget(type, data),
    onText:   (text)       => appendText(text),
  },
});

◈Le LLM verra automatiquement mywidgets_webmcp_search_recipes, mywidgets_webmcp_get_recipe et mywidgets_webmcp_widget_display.

Synchroniser les schemas & valider en CI

Pipeline entièrement automatisé — une seule source de vérité du dev jusqu'au LLM.

interface Props— vous écrivez ici

↓ npm run sync:schemas

recipe.md frontmatter.schema— auto-injecté

↓ consommé par

get_recipe · widget_display · search_recipes— lu & validé

terminal

# Développement — injecte les schemas dans les .md
npm run sync:schemas

# CI — échoue si les .md ne sont pas à jour
npm run sync:schemas --check

Tutoriel 02

Intégrer les widgets
autoui natifs

Utilisez le serveur autoui intégré à @webmcp-auto-ui/agent pour accéder aux 31 widgets natifs sans configurer de serveur WebMCP custom.

Installer le package agent

@webmcp-auto-ui/agent exporte directement autoui — un serveur WebMCP pré-configuré avec tous les widgets natifs (stat, table, chart, timeline, hemicycle…).

terminal

npm install @webmcp-auto-ui/agent

usage immédiat

import { autoui } from '@webmcp-auto-ui/agent';

// autoui = WebMcpServer avec tous les widgets natifs déjà enregistrés
const layer = autoui.layer();
// → { protocol: 'webmcp', serverName: 'autoui', tools: [...] }

Brancher l'agent avec runAgentLoop

runAgentLoop prend le message utilisateur en premier argument, puis un objet d'options. Les callbacks reçoivent les événements en temps réel.

agent.ts

import { autoui, runAgentLoop, AnthropicProvider } from '@webmcp-auto-ui/agent';
import monApi from './api-client';

const result = await runAgentLoop('Montre-moi les données de ventes', {
  provider: new AnthropicProvider({ proxyUrl: '/api/chat' }),
  layers: [
    monApi.layer(),   // monapi_mcp_*   → vos données
    autoui.layer(),  // autoui_webmcp_* → 31 widgets natifs
  ],
  maxIterations: 5,
  callbacks: {
    onWidget: (type, data) => {
      // type = nom du widget, data = paramètres validés
      renderWidget(type, data);
      return { id: 'widget-1' };
    },
    onText: (text) => appendToChat(text),
  },
});

◈onWidget remplace l'ancien onBlock (alias déprécié). Il reçoit le type et les données déjà validées contre le schema.

Configurer le proxy API SvelteKit

AnthropicProvider envoie les requêtes à un endpoint local qui détient la clé API.

src/routes/api/chat/+server.ts

import { env } from '$env/dynamic/private';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  const apiKey = body.__apiKey || env.ANTHROPIC_API_KEY;
  delete body.__apiKey;
  const res = await fetch('https://api.anthropic.com/v1/messages', {
    method: 'POST',
    headers: {
      'x-api-key': apiKey,
      'anthropic-version': '2023-06-01',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body),
  });
  return Response.json(await res.json());
};

◈La clé est lue depuis ANTHROPIC_API_KEY dans .env, ou passée à la volée via body.__apiKey.

Tutoriel 03

Créer un serveur WebMCP
avec Material UI

Construisez votre propre bibliothèque de composants MUI et exposez-les comme un serveur designkit_webmcp_* distinct.

Installer les dépendances

terminal

npm install @webmcp-auto-ui/core @webmcp-auto-ui/agent \
         @mui/material @emotion/react @emotion/styled \
         @mui/x-data-grid

Créer un composant React avec interface Props

L'interface TypeScript est la source de vérité du schema JSON — même principe qu'en Svelte.

widgets/DataTable.tsx

import { DataGrid } from '@mui/x-data-grid';
import Typography   from '@mui/material/Typography';

// Source de vérité → schema JSON auto-généré depuis ici
export interface DataTableProps {
  rows:      Record<string, unknown>[];
  columns:   Array<{ field: string; headerName: string; width?: number }>;
  title?:    string;
  pageSize?: number;
}

export function DataTable({ rows, columns, title, pageSize = 10 }: DataTableProps) {
  return (
    <div style={{ padding: '16px' }}>
      {title && <Typography variant="h6" gutterBottom>{title}</Typography>}
      <DataGrid rows={rows} columns={columns}
        pageSize={pageSize} autoHeight disableSelectionOnClick />
    </div>
  );
}

Créer la recette & synchroniser le schema

data-table.recipe.md

---
widget: DataTable
description: Grille MUI avec pagination
  et tri.
schema: <auto-injecté>
---

## Quand l'utiliser
Listes longues avec tri.

## Données
Via `*_mcp_list_*` → `rows[]`.

terminal

npm run sync:schemas

# CI check
npm run sync:schemas --check

◈CI échoue si DataTableProps diverge du schema: dans le .md.

Créer le serveur designkit

designkit-server.ts

import { createWebMcpServer } from '@webmcp-auto-ui/core';
import dataTableRecipe from './widgets/data-table.recipe.md';
import { DataTable }   from './widgets/DataTable';
import { setMuiTheme } from './theme';

export const designkit = createWebMcpServer('designkit', {
  description: 'Composants Material Design (DataTable, Dialog...)'
});

designkit.registerWidget(dataTableRecipe, DataTable);

// Tool custom — piloté directement par le LLM
designkit.addTool({
  name: 'theme',
  description: 'Bascule entre thème clair et sombre',
  inputSchema: { type: 'object',
    properties: { mode: { enum: ['light', 'dark'] } },
    required: ['mode']
  },
  execute: async ({ mode }) => setMuiTheme(mode)
});

Assembler les layers & voir le LLM en action

Trois serveurs coexistent dans la même boucle. Le LLM les voit tous et choisit le bon selon le contexte.

main.ts

import { runAgentLoop, AnthropicProvider, autoui } from '@webmcp-auto-ui/agent';
import { designkit } from './designkit-server';
import myApiClient from './api-client';

const result = await runAgentLoop('Affiche les commandes du mois', {
  provider: new AnthropicProvider({ proxyUrl: '/api/chat' }),
  layers: [
    myApiClient.layer(),  // myapi_mcp_*      → données métier
    autoui.layer(),       // autoui_webmcp_*   → 31 widgets natifs
    designkit.layer(),   // designkit_webmcp_* → vos composants MUI
  ],
  callbacks: {
    onWidget: (type, data) => renderWidget(type, data),
  },
});

séquence d'appels LLM automatique

designkit_webmcp_search_recipes({ query: "tableau" })
designkit_webmcp_get_recipe({ name: "DataTable" })
myapi_mcp_list_orders({ month: "2026-04", limit: 100 })
designkit_webmcp_widget_display({
  name:   "DataTable",
  params: {
    title: "Commandes — Avril 2026",
    rows: [...],
    columns: [
      { field: "id",     headerName: "#",                         width: 80  },
      { field: "client", headerName: "Client",  width: 200 },
      { field: "total",  headerName: "Total €", width: 120 },
    ]
  }
})
// → votre composant MUI s'affiche via onWidget

Ajouter vos proprescomposants Svelte

Intégrer les widgetsautoui natifs

Créer un serveur WebMCPavec Material UI

Ajouter vos propres
composants Svelte

Intégrer les widgets
autoui natifs

Créer un serveur WebMCP
avec Material UI