Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

s1366560/mcp-app-workflow

Name: mcp-app-workflow
Author: s1366560

.memstack/skills/mcp-app-workflow/SKILL.md

npx skillsauth add s1366560/agi-demos mcp-app-workflow

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

MCP App Workflow

Complete workflow for creating MCP Apps from project setup to server registration and testing.

Workflow Overview

1. Initialize Project → 2. Implement Server → 3. Build UI → 4. Bundle → 5. Register → 6. Test

Step 1: Project Initialization

Create a new project directory with proper dependencies:

mkdir my-mcp-app && cd my-mcp-app
npm init -y
npm install @modelcontextprotocol/sdk @modelcontextprotocol/ext-apps zod
npm install -D typescript tsx vite vite-plugin-singlefile

Create configuration files:

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["*.ts", "src/**/*.ts", "src/**/*.tsx"]
}

vite.config.ts:

import { defineConfig } from 'vite';
import { vitePluginSinglefile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [vitePluginSinglefile()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'mcp-app.html',
      output: { entryFileNames: 'mcp-app.html' }
    }
  }
});

package.json scripts:

{
  "scripts": {
    "build": "vite build",
    "serve": "tsx server.ts"
  }
}

Step 2: Server Implementation

Create server.ts with tool and resource registration:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { registerAppTool, registerAppResource } from "@modelcontextprotocol/ext-apps";
import { z } from "zod";
import { readFileSync } from "fs";
import { fileURLToPath } from "url";
import { dirname, join } from "path";

const __dirname = dirname(fileURLToPath(import.meta.url));
const server = new McpServer({ name: "my-app-server", version: "1.0.0" });

// Register tool
registerAppTool(server, "my_tool", {
  title: "My Tool",
  description: "Tool description",
  argsSchema: { param1: z.string().optional() },
  _meta: { ui: { resourceUri: "app://my-app/mcp-app.html" } },
}, async (args, context) => {
  return {
    content: [
      { type: "text", text: JSON.stringify({ result: "success", args }) },
      { type: "resource", resourceUri: "app://my-app/mcp-app.html" }
    ]
  };
});

// Register resource (serves bundled HTML)
registerAppResource(server, "app://my-app/mcp-app.html", async () => {
  const html = readFileSync(join(__dirname, "dist", "mcp-app.html"), "utf-8");
  return { contents: [{ uri: "app://my-app/mcp-app.html", mimeType: "text/html", text: html }] };
});

// Start server
const transport = new StdioServerTransport();
await server.connect(transport);

Step 3: UI Implementation

Create mcp-app.html with vanilla JS (see asset template for complete example):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="module">
    import { App } from "@modelcontextprotocol/ext-apps";
    
    const app = new App({ name: "My App", version: "1.0.0" });
    
    // Register handlers BEFORE connect
    app.ontoolinput = (params) => {
      console.log("Tool input:", params.arguments);
      render(params.arguments);
    };
    
    app.ontoolresult = (result) => {
      console.log("Tool result:", result);
    };
    
    app.onhostcontextchanged = (ctx) => {
      if (ctx.theme) document.documentElement.className = ctx.theme;
    };
    
    app.onteardown = async () => ({});
    
    await app.connect();
    
    function render(data) {
      // Update UI with data
    }
  </script>
</head>
<body>
  <!-- UI content -->
</body>
</html>

Step 4: Build and Bundle

Build the UI to create a single bundled HTML file:

npm run build

This produces dist/mcp-app.html with all JS/CSS inlined.

Step 5: Register Server

Use the register_mcp_server tool to register the running server:

server_name: "my-app-server"
server_type: "stdio"
command: "npx"
args: ["tsx", "server.ts"]

The server must be running for registration to work.

Step 6: Test

Call the registered tool to verify the UI renders correctly:

Call my_tool with param1="test"

The Canvas panel should display the interactive UI.

Common Issues

| Issue | Solution | |-------|----------| | Cannot find module | Run npm install to install dependencies | | dist/mcp-app.html not found | Run npm run build before starting server | | UI not rendering | Check tool returns resourceUri matching resource | | Handlers not firing | Register handlers BEFORE app.connect() | | Styles not applying | Use host CSS variables: var(--color-text-primary) |

Asset Template

See assets/project_template/ for a complete working project structure.

s1366560/mcp-app-workflow

.memstack/skills/mcp-app-workflow/SKILL.md

Complete workflow for creating, building, and registering MCP Apps with interactive UIs. Use when the user wants to build a new MCP App from scratch, needs step-by-step guidance through the full development cycle (setup → code → build → register → test), or asks "how to create an MCP app end-to-end". For SDK-specific patterns and API details, see the create-mcp-app skill.

3 stars

tools

Updated Apr 15, 2026

$ install --global

skillsauth

npx skillsauth add s1366560/agi-demos mcp-app-workflow

Install this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.

Security Scan Results

3 of 9 scanners reported clean

Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.

Scanners Passed

Scanners in report

Clean

TrivyContainer and dependency vulnerability scanner

95%

Clean

SemgrepStatic code analysis for vulnerabilities

95%

Clean

mcp-scan (Snyk)Model Context Protocol security validation

95%

Skipped

Snyk (dep)Open source security scanning

50%

Skipped

Socket.devSupply chain security analysis

50%

Skipped

VirusTotalMulti-engine malware detection

50%

Skipped

CrowdStrikeAdvanced threat intelligence

50%

Skipped

OSV-ScannerOpen Source Vulnerability database check

50%

Skipped

OWASP Dep-Check

50%

Last scanned: Apr 15, 2026, 7:12 AM4.4s10 files scanned

SKILL.md

name:: mcp-app-workflow
description:: Complete workflow for creating, building, and registering MCP Apps with interactive UIs. Use when the user wants to build a new MCP App from scratch, needs step-by-step guidance through the full development cycle (setup → code → build → register → test), or asks "how to create an MCP app end-to-end". For SDK-specific patterns and API details, see the create-mcp-app skill.

MCP App Workflow

Complete workflow for creating MCP Apps from project setup to server registration and testing.

Workflow Overview

1. Initialize Project → 2. Implement Server → 3. Build UI → 4. Bundle → 5. Register → 6. Test

Step 1: Project Initialization

Create a new project directory with proper dependencies:

mkdir my-mcp-app && cd my-mcp-app
npm init -y
npm install @modelcontextprotocol/sdk @modelcontextprotocol/ext-apps zod
npm install -D typescript tsx vite vite-plugin-singlefile

Create configuration files:

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist"
  },
  "include": ["*.ts", "src/**/*.ts", "src/**/*.tsx"]
}

vite.config.ts:

import { defineConfig } from 'vite';
import { vitePluginSinglefile } from 'vite-plugin-singlefile';

export default defineConfig({
  plugins: [vitePluginSinglefile()],
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: 'mcp-app.html',
      output: { entryFileNames: 'mcp-app.html' }
    }
  }
});

package.json scripts:

{
  "scripts": {
    "build": "vite build",
    "serve": "tsx server.ts"
  }
}

Step 2: Server Implementation

Create server.ts with tool and resource registration:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { registerAppTool, registerAppResource } from "@modelcontextprotocol/ext-apps";
import { z } from "zod";
import { readFileSync } from "fs";
import { fileURLToPath } from "url";
import { dirname, join } from "path";

const __dirname = dirname(fileURLToPath(import.meta.url));
const server = new McpServer({ name: "my-app-server", version: "1.0.0" });

// Register tool
registerAppTool(server, "my_tool", {
  title: "My Tool",
  description: "Tool description",
  argsSchema: { param1: z.string().optional() },
  _meta: { ui: { resourceUri: "app://my-app/mcp-app.html" } },
}, async (args, context) => {
  return {
    content: [
      { type: "text", text: JSON.stringify({ result: "success", args }) },
      { type: "resource", resourceUri: "app://my-app/mcp-app.html" }
    ]
  };
});

// Register resource (serves bundled HTML)
registerAppResource(server, "app://my-app/mcp-app.html", async () => {
  const html = readFileSync(join(__dirname, "dist", "mcp-app.html"), "utf-8");
  return { contents: [{ uri: "app://my-app/mcp-app.html", mimeType: "text/html", text: html }] };
});

// Start server
const transport = new StdioServerTransport();
await server.connect(transport);

Step 3: UI Implementation

Create mcp-app.html with vanilla JS (see asset template for complete example):

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="module">
    import { App } from "@modelcontextprotocol/ext-apps";
    
    const app = new App({ name: "My App", version: "1.0.0" });
    
    // Register handlers BEFORE connect
    app.ontoolinput = (params) => {
      console.log("Tool input:", params.arguments);
      render(params.arguments);
    };
    
    app.ontoolresult = (result) => {
      console.log("Tool result:", result);
    };
    
    app.onhostcontextchanged = (ctx) => {
      if (ctx.theme) document.documentElement.className = ctx.theme;
    };
    
    app.onteardown = async () => ({});
    
    await app.connect();
    
    function render(data) {
      // Update UI with data
    }
  </script>
</head>
<body>
  <!-- UI content -->
</body>
</html>

Step 4: Build and Bundle

Build the UI to create a single bundled HTML file:

npm run build

This produces dist/mcp-app.html with all JS/CSS inlined.

Step 5: Register Server

Use the register_mcp_server tool to register the running server:

server_name: "my-app-server"
server_type: "stdio"
command: "npx"
args: ["tsx", "server.ts"]

The server must be running for registration to work.

Step 6: Test

Call the registered tool to verify the UI renders correctly:

Call my_tool with param1="test"

The Canvas panel should display the interactive UI.

Common Issues

Asset Template

See assets/project_template/ for a complete working project structure.

Related Skills

s1366560/sandbox

tools

VerifiedTrustedCommunity

Sandbox MCP Server 是一个隔离的代码执行环境，提供完整的文件系统操作、命令执行、代码分析、测试运行和远程桌面能力。当你需要执行代码、操作文件、运行测试、分析代码结构、或需要图形界面操作时使用此技能。支持 Python、Node.js、Java 等多语言环境。

3SKILL.mdUpdated Apr 15, 2026

s1366560/template-skill

tools

VerifiedTrustedCommunity

Replace with description of the skill and when Claude should use it.

3SKILL.mdUpdated Apr 15, 2026

s1366560/template-skill

s1366560/zimage-generation

development

VerifiedTrustedCommunity

Generate high-quality images using ModelScope's Z-Image API. Use this skill when the user wants to generate images using the specific Z-Image model or ModelScope API they provided. Trigger words: 'Zimage', 'ModelScope', 'generate zimage'.

3SKILL.mdUpdated Apr 15, 2026

s1366560/zimage-generation

s1366560/zapier-make-patterns

tools

VerifiedTrustedCommunity

No-code automation democratizes workflow building. Zapier and Make (formerly Integromat) let non-developers automate business processes without writing code. But no-code doesn't mean no-complexity ...

3SKILL.mdUpdated Apr 15, 2026

s1366560/zapier-make-patterns

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/s1366560/agi-demos.git

# Copy into Claude Code skills folder (global)
cp -r agi-demos/.memstack/skills/mcp-app-workflow ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

s1366560/agi-demos

3 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT