Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,17 @@ We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/m
npm install -S @modelcontextprotocol/ext-apps
```

### Claude Code Plugin
### Install Agent Skills

A [Claude Code plugin](https://github.com/modelcontextprotocol/ext-apps/tree/main/plugins/mcp-apps) is available to help create MCP Apps. To install, run these commands inside Claude Code:
This repository provides two [Agent Skills](https://agentskills.io/) for building MCP Apps. You can install the skills as a Claude Code plugin:

```
/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps
```

Or you can install the skills in your favorite AI coding agent by following the [skills installation guide](./docs/agent-skills.md).

## Examples

<!-- prettier-ignore-start -->
Expand Down
53 changes: 53 additions & 0 deletions docs/agent-skills.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
---
title: Agent Skills
---

# Install the Skills

The MCP Apps repository provides two [Agent Skills](https://agentskills.io/) for AI coding agents: one for scaffolding MCP Apps with interactive UIs, and one for migrating from the OpenAI Apps SDK.

Choose one of the following installation methods based on your agent:

## Option 1: Claude Code Plugin

Install via Claude Code:

```
/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps
```

## Option 2: Vercel Skills CLI

Use the [Vercel Skills CLI](https://skills.sh/) to install skills across different AI coding agents:

```bash
npx skills add modelcontextprotocol/ext-apps
```

## Option 3: Manual Installation

Clone the repository:

```bash
git clone https://github.com/modelcontextprotocol/ext-apps.git
```

Then copy the skills from `plugins/mcp-apps/skills/` to your agent's skills directory. See your agent's documentation for the correct location:

- [Claude Code](https://docs.anthropic.com/en/docs/claude-code/skills)
- [VS Code](https://code.visualstudio.com/docs/copilot/customization/agent-skills) / [GitHub Copilot](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills)
- [Gemini CLI](https://geminicli.com/docs/cli/skills/)
- [Cline](https://docs.cline.bot/features/skills#skills)
- [Goose](https://block.github.io/goose/docs/guides/context-engineering/using-skills/)

## Verify Installation

Ask your agent "What skills do you have?" — you should see `create-mcp-app` and `migrate-oai-app` among the available skills.

## Next Steps

Try invoking the skills by asking your agent:

- "Create an MCP App" — scaffolds a new MCP App with an interactive UI
- "Migrate from OpenAI Apps SDK" — converts an existing OpenAI App to use the MCP Apps SDK
2 changes: 1 addition & 1 deletion plugins/mcp-apps/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# MCP Apps Plugin for Claude Code

A Claude Code plugin that provides the "Create MCP App" skill for building MCP Apps with interactive UIs.
A Claude Code plugin that provides skills for building MCP Apps.

## Installation

Expand Down
1 change: 1 addition & 0 deletions typedoc.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const config = {
projectDocuments: [
"docs/overview.md",
"docs/quickstart.md",
"docs/agent-skills.md",
"docs/patterns.md",
"docs/migrate_from_openai_apps.md",
],
Expand Down
Loading