Skip to main content
Glama

React Tailwind Views MCP Server

by deco-cx
GitHub
TypeScript
3
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

React + Tailwind MCP Server Template

A full-stack template for building Model Context Protocol (MCP) 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: 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 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:

// 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 which can be found at the deco-cx/chat repository.

Ready to build your next MCP server with a beautiful frontend? Get started now!

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

A full-stack template for building Model Context Protocol servers that expose tools and workflows to AI agents while also serving a web interface built with React and Tailwind CSS.

  1. ✨ Features
    1. 🚀 Quick Start
      1. Prerequisites
      2. Setup
    2. 📁 Project Structure
      1. 🛠️ Development Workflow
        1. 🔗 Frontend ↔ Server Communication
          1. 📖 Learn More

            Related MCP Servers

            • WithSeismic MCP

              dougwithseismic
              -
              security
              A
              license
              -
              quality
              A TypeScript implementation of a Model Context Protocol server that provides a frictionless framework for developers to build and deploy AI tools and prompts, focusing on developer experience with zero boilerplate and automatic tool registration.
              Last updated -
              544
              12
              TypeScript
              MIT License

            • SupaUI MCP Server

              buoooou
              A
              security
              F
              license
              A
              quality
              A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
              Last updated -
              3
              255
              4
              TypeScript

            • Xava Labs MCP Template

              null-shot
              -
              security
              A
              license
              -
              quality
              A template repository for building Model Context Protocol (MCP) servers that enables developers to create interactive AI agents with real-time bidirectional communication capabilities through WebSocket and SSE endpoints.
              Last updated -
              TypeScript
              MIT License

            • MCP Template

              rhit-bhuwalk
              -
              security
              A
              license
              -
              quality
              A template for building Model Context Protocol servers that allow AI assistants to interact with custom data and services through queryable resources and specialized tools.
              Last updated -
              TypeScript
              MIT License

            View all related MCP servers

            New MCP Servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/deco-cx/react-tailwind-views'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server