mcp using deco.chat

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 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 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!

MCP Server ยท Populars

MCP Server ยท New