React + Tailwind MCP Server Template

# React + Tailwind MCP Server Template A full-stack template for building [Model Context Protocol (MCP)](https://spec.modelcontextprotocol.io/) servers with a modern React frontend. This template provides a complete development environment where your MCP server not only exposes tools and workflows to AI agents but also serves a beautiful web interface built with React and Tailwind CSS. ## ✨ Features - **🤖 MCP Server**: Cloudflare Workers-based server with typed tools and workflows - **⚛️ React Frontend**: Modern React app with Vite, TanStack Router, and Tailwind CSS - **🎨 UI Components**: Pre-configured shadcn/ui components for rapid development - **🔧 Type Safety**: Full TypeScript support with auto-generated RPC client types - **🚀 Hot Reload**: Live development with automatic rebuilding for both frontend and backend - **☁️ Ready to Deploy**: One-command deployment to Cloudflare Workers ## 🚀 Quick Start ### Prerequisites - Node.js ≥18.0.0 - Deno ≥2.0.0 - [Deco CLI](https://deco.chat): `deno install -Ar -g -n deco jsr:@deco/cli` ### Setup ```bash # Install dependencies npm install # Configure your app npm run configure # Start development server npm run dev ``` The server will start on `http://localhost:8787` serving both your MCP endpoints and the React frontend. ## 📁 Project Structure ``` ├── server/ # MCP Server (Cloudflare Workers + Deco runtime) │ ├── main.ts # Server entry point with tools & workflows │ └── deco.gen.ts # Auto-generated integration types └── view/ # React Frontend (Vite + Tailwind CSS) ├── src/ │ ├── lib/rpc.ts # Typed RPC client for server communication │ ├── routes/ # TanStack Router routes │ └── components/ # UI components with Tailwind CSS └── package.json ``` ## 🛠️ Development Workflow - **`npm run dev`** - Start development with hot reload - **`npm run gen`** - Generate types for external integrations - **`npm run gen:self`** - Generate types for your own tools/workflows - **`npm run deploy`** - Deploy to production ## 🔗 Frontend ↔ Server Communication The template includes a fully-typed RPC client that connects your React frontend to your MCP server: ```typescript // Typed calls to your server tools and workflows const result = await client.tools.MY_TOOL({ input: "data" }); const workflowResult = await client.workflows.MY_WORKFLOW({ input: "data" }); ``` ## 📖 Learn More This template is built for deploying primarily on top of the [Deco platform](https://deco.chat/about) which can be found at the [deco-cx/chat](https://github.com/deco-cx/chat) repository. --- **Ready to build your next MCP server with a beautiful frontend? [Get started now!](https://deco.chat)**