React + Tailwind MCP Server Template
A full-stack template for buildingModel Context Protocol (MCP) serverswith a modern React frontend. This template provides a complete developmentenvironment where your MCP server not only exposes tools and workflows to AIagents but also serves a beautiful web interface built with React and TailwindCSS.
โจ Features
- ๐ค MCP Server: Cloudflare Workers-based server with typed tools andworkflows
- โ๏ธ React Frontend: Modern React app with Vite, TanStack Router, andTailwind CSS
- ๐จ UI Components: Pre-configured shadcn/ui components for rapiddevelopment
- ๐ง Type Safety: Full TypeScript support with auto-generated RPC clienttypes
- ๐ Hot Reload: Live development with automatic rebuilding for bothfrontend 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:
deno install -Ar -g -n deco jsr:@deco/cli
Setup
# 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 endpointsand 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 reloadnpm run gen
- Generate types for external integrationsnpm run gen:self
- Generate types for your own tools/workflowsnpm run deploy
- Deploy to production
๐ Frontend โ Server Communication
The template includes a fully-typed RPC client that connects your React frontendto your MCP server:
// 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 theDeco platform which can be found at thedeco-cx/chat repository.
Ready to build your next MCP server with a beautiful frontend?Get started now!