What are app-only helper tools?

These are specialized tools that the UI can call for data (like polling or pagination) but are hidden from the LLM to prevent unnecessary tool-calling overhead.

What is the primary benefit of adding a UI to an MCP server?

It allows tools to present complex data visually—such as maps, charts, or interactive editors—directly within the host application, making data easier to interpret than raw text.

How does the UI match the host application's theme?

The skill uses host-provided CSS variables (e.g., --color-background-primary) and helper functions like applyDocumentTheme to ensure the UI matches the look and feel of the host.

Will adding a UI break my existing text-based tools?

No. The skill follows a pattern where UI is an enhancement. Tools maintain a 'content' array for text-only clients while adding 'structuredContent' for UI-enabled hosts.

Which frontend frameworks are supported?

The skill provides templates and guidance for React, Vue, Svelte, Solid, Preact, and vanilla JavaScript using the @modelcontextprotocol/ext-apps SDK.

MCP App UI Builder

Name: MCP App UI Builder
Author: AI-Riksarkivet

byAI-Riksarkivet

•

API Development

Enhances MCP servers by adding interactive HTML user interfaces and rich visualizations to existing tools.

The add-app-to-server skill streamlines the process of upgrading standard Model Context Protocol (MCP) servers with interactive, web-based interfaces. By leveraging the @modelcontextprotocol/ext-apps SDK and Vite, it allows developers to pair text-only tool outputs with dynamic HTML resources that render directly within host applications like Claude Desktop. This capability is essential for transforming raw data into visual dashboards, maps, and interactive components while maintaining full backward compatibility for text-only clients through structured fallbacks.

Key Features

01Transforms plain MCP tools into App-enabled tools with structured content

02Implements host-aware styling using CSS variables for theme synchronization

03Supports advanced patterns like app-only helper tools and streaming partial inputs

04Configures Vite-based build pipelines for single-file HTML UI bundling

05Analyzes existing MCP tools to determine UI enhancement suitability

068 GitHub stars

Use Cases

01Visualizing complex structured data through interactive charts, gauges, and tables

02Adding media-rich viewers for maps, PDFs, and images directly in the conversation

03Creating interactive administrative dashboards for monitoring system stats and analytics

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ai-riksarkivet/ra-mcp add-app-to-server

For use in Claude.ai and ChatGPT

Download Skill