Generate Mcp App Ui (Grade A)Habilidad de desarrollo con pruebas de seguridad para Claude AI. Grado A. Genera un widget de aplicación MCP (HTML auto-contenido) para una herramienta MCP.

— (0)

Reseñado por Daniel Nikulshyn·Actualizado julio de 2026

Resumen

Genera un widget de aplicación MCP (HTML auto-contenido) para una herramienta MCP. Describe el visual que deseas y pega la salida de prueba de tu herramienta. Esta habilidad genera widgets enfocados y de un solo propósito que muestran la salida de una herramienta visualmente dentro de una conversación de chat. Requiere una descripción del visual y la salida de prueba en formato JSON. El widget generado puede ser interactivo si se proporciona el nombre de la herramienta, permitiendo que llame a la herramienta y actualice los datos.

Funciones clave

Genera widgets HTML auto-contenidos
Admite widgets interactivos con funcionalidad callServerTool
Gestiona varios tipos de datos con verificaciones de tipo seguro
Fomenta el uso de Fluent UI y pautas de diseño para consistencia visual

Precio

Modelo: Free
Categoría: Habilidades
Valoración: Aún sin reseñas

Casos de uso

Visualización de Salida de Herramienta

Un usuario desea visualizar la salida de una herramienta como un gráfico o tabla en una conversación de chat. Proporciona una descripción del visual deseado y la salida de prueba de la herramienta en formato JSON.

Panel de Control Interactivo

Un usuario solicita un widget interactivo que muestre datos de una herramienta y permita refrescar los datos. El usuario proporciona el nombre de la herramienta y la salida de prueba.

Pros y contras

Ventajas

Genera widgets visualmente atractivos para conversaciones de chat
Permite widgets interactivos con capacidades de refresco
Fomenta representaciones visuales compactas y enfocadas de los datos

Contras

Requiere entrada específica de los usuarios (descripción del visual y la salida de prueba de la herramienta)
Limitado a generar widgets basados en los datos proporcionados, sin hacer suposiciones sobre la forma de los datos

Reseñas

Inicia sesión para dejar una reseña.

Aún sin reseñas. ¡Sé el primero!

Preguntas y respuestas

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

Hacer una pregunta

Alternativas a Habilidades

Using Git Worktrees (Grade A)Habilidades

Herramienta verificada por seguridad para las habilidades de datos-IA. Calificación A. Utilícela cuando comiences con el trabajo de características que necesitan aislamiento del espacio de trabajo actual o antes de ejecutar planes de implementación - crea trabajo de Git aislados.

— (0)

Free

Ga4 Bigquery Schema (Grade A)Habilidades

Habilidad de datos AI con prueba de seguridad para Claude AI. Calificación A. Referencia de esquema de exportación GA4 BigQuery — referencia completa de campos, estructuras anidadas, patrones de consulta y consejos de rendimiento

— (0)

Free

Meta Capi (Grade A)Habilidades

Herramienta de datos de alta seguridad para habilidades de inteligencia artificial - Claude AI. Calificación A. Referencia de configuración de la API Meta Conversions API (CAPI) - arquitectura, tipos de eventos, información del cliente hasheada, deduplicación, ejemplos de implementación, AEM

— (0)

Free

Callees (Grade A)Habilidades

Habilidad de desarrollo probada en seguridad para Claude AI. Grado A. Lista lo que una función/método llama (gráfico de llamadas directo)

— (0)

Free

Test Module Name (Grade A)Habilidades

Skill de datos segura y de aprendizaje automático, probada por Claude, de la máxima calidad. Nombra a los módulos de prueba de Haskell con un sufijo de especie en el mismo espacio de nombres. Utiliza cuando estés escribiendo o revisando módulos de prueba de Haskell

— (0)

Free

Board Of Directors (Grade A)Habilidades

Skill de IA con seguridad verificada para Claude AI. Calificación A. Simula una junta de 5 expertos para deliberar sobre decisiones importantes. Úsalo al evaluar planes, arquitectura, diseño de funciones o cualquier decisión.

— (0)

Free

Advpl Mvc Avancado (Grade A)Habilidades

Habilidad de desarrollo con seguridad probada para Claude AI. Grado A. MVC avançado vía PE (Puntos de Entrada) — añadir grids personalizados en pantallas MVC estándar (CNTA300/MATA070/MATA440/MATA460/FINA040 vía *STRU)

— (0)

Free

Docs Writer (Grade A)Habilidades

Habilidad de devops probada en seguridad para Claude AI. Calificación A. **HABILIDAD DE FLUJO DE TRABAJO** — Mantiene la exactitud y frescura de la documentación del repositorio en el sitio de documentación, archivos de agente y registro de cambios. CUANDO: "actualizar documentación"

— (0)

Free