mcp-apps

# 🚀 MCP Apps in VS Code Insiders: Create and Run Your First App <div align="center"> [](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1) [](https://github.com/0GiS0) [](https://www.linkedin.com/in/giselatorresbuitrago/) [](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"> [](https://www.youtube.com/c/GiselaTorres?sub_confirmation=1) [](https://github.com/0GiS0) [](https://www.linkedin.com/in/giselatorresbuitrago/) [](https://twitter.com/0GiS0) </div>