🚀 MCP Apps in VS Code Insiders: Create and Run Your First App

<div align="center">

🇪🇸 Leer en español

</div>

---

Hey developer 👋🏻! This repo implements an MCP server with YouTube tools (get-video, get-channel, get-latest-video) and two MCP Apps (video-render, channel-profile) bundled with Vite into a single HTML file to display them in VS Code Insiders. Learn how to build, serve and consume MCP Apps ❤️

<a href="https://youtu.be/AeaMNYddZTE"> <img src="https://img.youtube.com/vi/AeaMNYddZTE/maxresdefault.jpg" alt="🚀 MCP Apps in VS Code Insiders: Create and Run Your First App" width="100%" /> </a>

🚀 Features

• get-video: Searches for a video on YouTube by query and returns title, description and thumbnail (base64) with video-render UI
• get-channel: Gets channel info (stats, base64 thumbnail) and displays it with channel-profile UI
• get-latest-video: Returns the latest video from a channel (used in channel-profile)
• UI Apps:
  • video-render: Renders a video card with links
  • channel-profile: Renders channel profile and shows the latest video

📋 Requirements

• Node.js 18+
• npm or yarn
• YouTube Data API v3 key (YOUTUBE_API_KEY)

🛠️ Installation

# Clone the repository
git clone https://github.com/0GiS0/mcp-apps.git
cd mcp-apps

# Install dependencies
npm install

# Configure environment
cp .env-sample .env
# Edit .env and set your YOUTUBE_API_KEY

🏗️ Project Structure

src/
├── server.ts              # MCP Server with Express and YouTube tools
├── services/
│   └── youtube.ts         # YouTube Data API integration logic
└── apps/
    ├── channel-profile/   # Channel profile UI
    │   ├── index.html
    │   ├── app.ts
    │   └── styles.css
    └── video-render/      # Video renderer UI
        ├── index.html
        ├── app.ts
        └── styles.css

🔧 Usage

Build the apps

npm run build

Start the MCP server

npm run serve

The server will start at http://localhost:3001/mcp

Configure in VS Code

Add the following configuration to your .vscode/mcp.json file:

{
  "servers": {
    "my-mcp-server": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

📦 Main Dependencies

• @modelcontextprotocol/sdk - Model Context Protocol SDK
• @modelcontextprotocol/ext-apps - Extension for creating MCP Apps
• express - HTTP Server
• cors - CORS Middleware (runtime)
• vite + vite-plugin-singlefile - App bundling

🌐 Follow Me on Social Media

If you liked this project and want to see more content like this, don't forget to subscribe to my YouTube channel and follow me on social media:

<div align="center">

</div>