Generate Mcp App Ui (Grade A) logo

Generate Mcp App Ui (Grade A)Beveiligde, geteste ontwikkelingsvaardigheid voor Claude AI. Grade A. Genereer een MCP App-widget (zelfvoorzienende HTML) voor een MCP-tool. Beschrijf de gewenste visualisatie en plak de testoutput van je tool. Gebruik wanneer nodig.

— (0)
Daniel NikulshynBeoordeeld door Daniel Nikulshyn·Bijgewerkt juli 2026

Overzicht

Genereer een MCP App-widget (zelfvoorzienende HTML) voor een MCP-tool. Beschrijf de gewenste visualisatie en plak de testoutput van je tool. Deze vaardigheid maakt gerichte, enkelvoudige widgets die de output van een tool visueel weergeven binnen een chatgesprek. Hiervoor is een beschrijving van de visual en de testoutput in JSON-formaat nodig. De gegenereerde widget kan interactief zijn als er een toolnaam wordt opgegeven, waardoor de tool kan worden aangeroepen en de data vernieuwd.

Belangrijkste functies

  • Genereert zelfvoorzienende HTML-widgets
  • Ondersteunt interactieve widgets met callServerTool-functionaliteit
  • Behandelt diverse gegevensformaten met type-safe controles
  • Stimuleert het gebruik van Fluent UI en ontwerprichtlijnen voor visuele consistentie

Prijs

Model
Free
Categorie
Vaardigheden
Beoordeling
Nog geen reviews

Toepassingen

Visualisatie van Tooloutput

Een gebruiker wil de output van een tool visualiseren als een grafiek of tabel binnen een chatgesprek. Hij/zij levert een beschrijving van de gewenste visualisatie en de testoutput van de tool in JSON-formaat.

Interactieve Dashboard

Een gebruiker vraagt een interactieve widget die data van een tool toont en het mogelijk maakt om de data te verversen. De gebruiker geeft een toolnaam en testoutput op.

Pluspunten & minpunten

Pluspunten

  • Genereert visueel aantrekkelijke widgets voor chatgesprekken
  • Biedt interactieve widgets met verversingsmogelijkheden
  • Stimuleert compacte en gerichte visuele weergaven van data

Minpunten

  • Vereist specifieke input van gebruikers (beschrijving van visual en testoutput van de tool)
  • Beperkt tot het genereren van widgets op basis van opgegeven data, zonder aannames over de vorm van de data

Recensies

Log in om een review te schrijven.

Nog geen reviews. Wees de eerste!

Vragen

Can the widget refresh data automatically?

If you provide a tool name, the generated HTML can include a `callServerTool` function that lets the widget call the tool and refresh its data. Without a tool name, the widget displays the data read‑only.

Asked by Bilal Choudhury · Jan 11, 2026

Is there a learning curve to using this skill?

The main steps are describing the desired visual (e.g., chart, table) and supplying the tool’s JSON output. Once those are provided, the skill outputs the HTML; no additional coding is needed, though familiarity with Fluent UI guidelines can help customize the look.

Asked by Sarai Cohen · Jan 11, 2026

Do I need to provide my tool’s data before creating a widget?

Yes. The tool requires a test output in JSON format from the tool you want to visualize. Without this JSON, it will prompt you to paste it; it will not guess the data shape.

Asked by Yara Mansour · Nov 20, 2025

What kind of visual outputs can this tool generate?

It creates self‑contained HTML widgets such as charts, comparison tables or maps that display a tool’s JSON output. The widget is styled with Fluent UI for consistency and can be interactive if a tool name is supplied.

Asked by Tobias Hartmann · Oct 18, 2025

Stel een vraag

Alternatieven voor Vaardigheden

Using Git Worktrees (Grade A) logo
Using Git Worktrees (Grade A)Vaardigheden

Beveiligingsteste data-ai-vaardigheid voor Claude AI. Graad A. Gebruik bij het starten van functiewerk dat isolatie van de huidige werkruimte vereist of vóór het uitvoeren van implementatieplannen - creëert geïsoleerde git-worktrees

— (0)
Free
Ga4 Bigquery Schema (Grade A) logo
Ga4 Bigquery Schema (Grade A)Vaardigheden

Beveiligingsgeteste data-ai skill voor Claude AI. Grade A. GA4 BigQuery Export Schema Reference — volledige veldreferentie, geneste structuren, querypatronen en prestatie-tips

— (0)
Free
Meta Capi (Grade A) logo
Meta Capi (Grade A)Vaardigheden

Beveiligd geteste data-ai-vaardigheid voor Claude AI. Grade A. Meta Conversions API (CAPI) Setup Referentie — architectuur, gebeurtenistypes, klantinformatie-hashing, deduplicatie, implementatievoorbeelden, AEM

— (0)
Free
Callees (Grade A) logo
Callees (Grade A)Vaardigheden

Beveiligingsgeteste ontwikkelingsvaardigheid voor Claude AI. Grade A. Lijst wat een functie/methode aanroept (directe callgraph)

— (0)
Free
Test Module Name (Grade A) logo
Test Module Name (Grade A)Vaardigheden

Veilig geteste datage-skill voor Claude AI. Grade A. Naam de haskell-test-modules naar het onderzochte module met een Spec-suffix in dezelfde naamruimte. Gebruik bij het schrijven of controleren van haskell-test-modules (Grade A)

— (0)
Free
Board Of Directors (Grade A) logo
Board Of Directors (Grade A)Vaardigheden

Beveiligingsgeteste data‑AI‑skill voor Claude AI. Grade A. Simuleert een deliberatie van een 5‑leden expertbestuur voor belangrijke beslissingen. Gebruik het bij het evalueren van plannen, architectuurkeuzes, functiedesigns of andere beslissingen.

— (0)
Free
Advpl Mvc Avancado (Grade A) logo
Advpl Mvc Avancado (Grade A)Vaardigheden

Veiligheid geteste ontwikkelingsvaardigheid voor Claude AI. Grade A. Geavanceerd MVC via PE (Ingangspunten) — aangepaste grids toevoegen aan standaard MVC-schermen (CNTA300/MATA070/MATA440/MATA460/FINA040 via *STRU)

— (0)
Free
D
Docs Writer (Grade A)Vaardigheden

Beveiligingsgeteste devops-skill voor Claude AI. Grade A. **WORKFLOW SKILL** — Behoudt de nauwkeurigheid en actualiteit van de repository documentatie over de docs site, agentbestanden en changelog. WHEN: 'update docs'

— (0)
Free