web-frontend-mcp-demo
このプロジェクトは、TypeScriptを使用したウェブフロントエンドのデモです。ユーザーインターフェースの構築や、APIとの連携を通じて、フロントエンド開発の実践的なスキルを学ぶことができます。コードはモジュール化されており、再利用性が高く、メンテナンスが容易です。
GitHubスター
1
ユーザー評価
未評価
お気に入り
0
閲覧数
12
フォーク
0
イシュー
0
README
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