📦
Web Frontend MCP Demo
This project demonstrates how to integrate ChatGPT with the Model Context Protocol (MCP) to extend AI capabilities with external tools.
0 installs
1 stars
Trust: 41 — Fair
Ai
Installation
npx web-frontend-mcp-demoAsk AI about Web Frontend MCP Demo
Powered by Claude · Grounded in docs
I know everything about Web Frontend MCP Demo. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Loading tools...
Reviews
Documentation
Web Frontend MCP Demo
A demonstration project showing integration of the Model Context Protocol (MCP) with a modern web application.
Project Structure
This project consists of two main parts:
- Frontend: A React 19 application built with Vite
- Backend: A Node.js server using Hono framework
Both parts utilize the @modelcontextprotocol/sdk package for MCP integration.
Technologies
Frontend
- React 19
- Vite
- TypeScript
- Tailwind CSS
Backend
- Node.js
- Hono
- TypeScript
- Zod for validation
Getting Started
Prerequisites
- Node.js (latest LTS version recommended)
- npm
Installation
- Clone the repository
- Install dependencies in the root project:
npm install - Install dependencies in each subdirectory:
cd frontend && npm install cd backend && npm install
Development
Run both frontend and backend concurrently:
npm run dev
This will start:
- Frontend development server (Vite)
- Backend development server (using tsx)
Building for Production
Frontend
cd frontend && npm run build
Backend
cd backend && npm run build
License
MIT