mcp-apps

This MCP server implements YouTube tooling integrated with two MCP Apps (video-render and channel-profile) and exposes them through a single Express-based MCP server. It provides commands to search for videos, fetch channel information (including a base64-encoded thumbnail), and retrieve the latest video from a channel. The bundled UI apps are built with Vite and served as part of the MCP experience, allowing you to render video cards and channel profiles within VS Code Insiders via MCP App panels. To use it, first build and run the server, then configure your MCP client in VS Code to point at the server URL (for example http://localhost:3001/mcp). The server exposes endpoints that the MCP SDK and apps consume to render the provided UIs and data.

Prerequisites:

• Node.js 18+ installed on your machine
• npm (or yarn)
• A YouTube Data API v3 key

Install and run:

1. Clone the repository:

git clone https://github.com/0GiS0/mcp-apps.git
cd mcp-apps

2. Install dependencies:

npm install

3. Configure environment:

cp .env-sample .env

4. Add your YouTube API key to .env (or export YOUTUBE_API_KEY in your environment).
5. Build the apps (if applicable):

npm run build

6. Start the MCP server:

npm run serve

The server should be available at http://localhost:3001/mcp

Notes:

• Ensure you have a valid YouTube Data API key set in YOUTUBE_API_KEY; the MCP tools rely on this to query video and channel data.
• The server defaults to port 3001 and path /mcp; if you customize ports, update your VS Code MCP configuration accordingly.
• If you modify or expand the apps (video-render, channel-profile), rebuild before serving to ensure the latest UI bundles are loaded.
• The project uses @modelcontextprotocol/sdk and @modelcontextprotocol/ext-apps for MCP integration; ensure your editor/IDE has the MCP extension installed and configured.
• Environment variables can be extended in the mcpServers configuration if additional secrets or options are needed.