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 -
              518
              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-SERVER-TEMPLATE

              vyasa1986
              -
              security
              F
              license
              -
              quality
              A TypeScript-based starter template for building Model Context Protocol servers that enables AI assistants to dynamically call tools, interpret prompts, and manage resources through modular architecture with support for multiple transport methods.
              Last updated -
              TypeScript

            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