MCP Fullstack Application

A complete fullstack application demonstrating Model Context Protocol (MCP) integration with Convex backend and Remix frontend.

What is Model Context Protocol (MCP)?

Model Context Protocol (MCP) is an open standard that enables AI assistants to securely connect to external data sources and tools. This application demonstrates:

• MCP Server: Provides tools and resources for task management
• MCP Client: Consumes MCP server capabilities in a web interface
• Real-time Data: Live task management with Convex database
• Modern Stack: Remix frontend with TypeScript and Tailwind CSS

Project Structure

mcp-fullstack-app/
├── backend/          # Convex backend with MCP server
│   ├── convex/       # Convex functions and schema
│   ├── src/          # MCP server implementation
│   └── package.json
├── frontend/         # Remix frontend application
│   ├── app/          # Remix app routes and components
│   ├── public/       # Static assets
│   └── package.json
└── package.json      # Root workspace configuration

Features

• ✅ Task Management (CRUD operations)
• ✅ Real-time updates with Convex
• ✅ MCP Server with tools and resources
• ✅ Modern React frontend with Remix
• ✅ TypeScript throughout
• ✅ Responsive design with Tailwind CSS

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Convex account (free tier available)

Installation

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Set up Convex backend:

   cd backend
   npx convex dev
   

4. Set up frontend:

   cd frontend
   npm run dev
   

5. Run both services:

   npm run dev
   

MCP Integration

This application demonstrates MCP concepts:

MCP Server (Backend)

• Tools: create_task, get_tasks, update_task, delete_task
• Resources: Task database access
• Prompts: Task management templates

MCP Client (Frontend)

• Consumes MCP server tools
• Real-time UI updates
• Error handling and validation

Technology Stack

• Backend: Convex (serverless functions + database)
• Frontend: Remix (React framework)
• Database: Convex built-in database
• Styling: Tailwind CSS
• Language: TypeScript
• Protocol: Model Context Protocol (MCP)

Learning Objectives

By building this application, you'll learn:

• How MCP enables AI-data integration
• Convex serverless backend development
• Remix fullstack React development
• Real-time data synchronization
• Modern TypeScript patterns

Next Steps

• Add authentication
• Implement more MCP tools
• Add AI chat interface
• Deploy to production
• Extend with more data sources

Resources

• Model Context Protocol Docs
• Convex Documentation
• Remix Documentation