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

<div align="center">

[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UC140iBrEZbOtvxWsJ-Tb0lQ?style=for-the-badge&logo=youtube&logoColor=white&color=red)](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1) [![GitHub followers](https://img.shields.io/github/followers/0GiS0?style=for-the-badge&logo=github&logoColor=white)](https://github.com/0GiS0) [![LinkedIn Follow](https://img.shields.io/badge/LinkedIn-Follow-blue?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/giselatorresbuitrago/) [![X Follow](https://img.shields.io/badge/X-Follow-black?style=for-the-badge&logo=x&logoColor=white)](https://twitter.com/0GiS0)

**[🇪🇸 Leer en español](README.es.md)**

</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

```bash
# 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

```bash
npm run build
```

### Start the MCP server

```bash
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:

```json
{
  "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">

[![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UC140iBrEZbOtvxWsJ-Tb0lQ?style=for-the-badge&logo=youtube&logoColor=white&color=red)](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1)
[![GitHub followers](https://img.shields.io/github/followers/0GiS0?style=for-the-badge&logo=github&logoColor=white)](https://github.com/0GiS0)
[![LinkedIn Follow](https://img.shields.io/badge/LinkedIn-Follow-blue?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/giselatorresbuitrago/)
[![X Follow](https://img.shields.io/badge/X-Follow-black?style=for-the-badge&logo=x&logoColor=white)](https://twitter.com/0GiS0)

</div>