Can I use Svelte with this skill?

Yes, the skill specifically focuses on using Svelte and TypeScript as the primary architecture for building the frontend 'View' components of an MCP App.

Does it support binary data transfer like PDFs?

Yes, it includes specific architectural patterns for handling chunked binary transfers, polling for live data, and managing large file uploads between the server and the view.

MCP Apps allow tools to return interactive HTML UIs rendered in sandboxed iframes within host chat clients like Claude or ChatGPT, moving beyond simple text responses.

What is the difference between content and structuredContent?

'Content' is text intended for the LLM to process and reason about, while 'structuredContent' is rich JSON data passed directly to the UI view for rendering.

How do I handle security for MCP UIs?

This skill provides patterns for strict Content Security Policy (CSP) management and sandbox permissions to ensure that UI components handle data securely and prevent unauthorized external access.

Interactive MCP App Developer

Name: Interactive MCP App Developer
Author: AI-Riksarkivet

byAI-Riksarkivet

•

デザインツール

Builds and debugs interactive UI components for MCP servers using FastMCP and Svelte.

This skill streamlines the development of interactive Model Context Protocol (MCP) applications, allowing developers to create rich, sandboxed HTML interfaces directly within Claude or ChatGPT. It covers everything from server-side Python setup using FastMCP to frontend state management with Svelte, ensuring secure data flow through strict CSP configurations and optimized JSON-RPC messaging. Whether you are building data dashboards, interactive forms, or complex media viewers, this skill provides the architectural patterns and debugging tools needed for professional MCP app development.

主な機能

01Optimize structuredContent delivery between server and view

028 GitHub stars

03Implement Svelte-based frontend views with TypeScript

04Configure FastMCP Python server logic for app-aware tools

05Scaffold interactive UI resources using the ui:// protocol

06Manage CSP, sandboxing, and secure data handling

ユースケース

01Creating interactive data visualizations and real-time dashboards

02Developing complex multi-step forms and workflow wizards within AI chats

03Building custom document viewers, PDF renderers, and media players

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ai-riksarkivet/ra-mcp ra-mcp-apps

For use in Claude.ai and ChatGPT

Download Skill