Web Frontend Mcp Demo
What is Web Frontend Mcp Demo
web-frontend-mcp-demo is a demonstration project that showcases the integration of ChatGPT with the Model Context Protocol (MCP) to enhance AI capabilities using external tools.
Use cases
Use cases include developing interactive AI-driven web applications, creating chatbots that utilize external data sources, and building tools that leverage AI capabilities for various business applications.
How to use
To use web-frontend-mcp-demo, clone the repository, install the necessary dependencies for both the frontend and backend, and run the development servers concurrently using ‘npm run dev’.
Key features
Key features include a modern web application built with React 19, a Node.js backend using the Hono framework, and integration with the @modelcontextprotocol/sdk package for seamless MCP functionality.
Where to use
web-frontend-mcp-demo can be used in fields such as AI development, web application development, and any scenario requiring enhanced AI interactions through external tools.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Web Frontend Mcp Demo
web-frontend-mcp-demo is a demonstration project that showcases the integration of ChatGPT with the Model Context Protocol (MCP) to enhance AI capabilities using external tools.
Use cases
Use cases include developing interactive AI-driven web applications, creating chatbots that utilize external data sources, and building tools that leverage AI capabilities for various business applications.
How to use
To use web-frontend-mcp-demo, clone the repository, install the necessary dependencies for both the frontend and backend, and run the development servers concurrently using ‘npm run dev’.
Key features
Key features include a modern web application built with React 19, a Node.js backend using the Hono framework, and integration with the @modelcontextprotocol/sdk package for seamless MCP functionality.
Where to use
web-frontend-mcp-demo can be used in fields such as AI development, web application development, and any scenario requiring enhanced AI interactions through external tools.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
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
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
