sleekcms/sleekcms-mcp-server

SleekCMS Chat Assistant

A chatbot system that integrates with SleekCMS to provide AI-powered insights about website content. The system uses MCP (Model Context Protocol) to manage AI interactions and maintain conversation context.

Features

• 🔐 Pub Token Authentication: Connect to SleekCMS using your pub token
• 🤖 AI-Powered Chat: Ask questions about your website content
• 🧩 Visual Cards: AI can optionally return Tailwind components rendered inline
• 💾 Session Management: Maintains conversation context throughout the session
• 🎨 Modern UI: Clean, responsive interface built with Tailwind CSS
• 🔄 MCP Integration: Uses Model Context Protocol for managing AI context

Project Structure

sitechatsystem/
├── frontend/
│   └── index.html          # Frontend HTML with Tailwind CSS
├── backend/
│   ├── src/
│   │   ├── index.ts        # Express server
│   │   ├── session-manager.ts  # Session management
│   │   └── mcp/
│   │       └── server.ts   # MCP server for AI interactions
│   ├── package.json
│   └── tsconfig.json
└── README.md

Setup Instructions

Backend Setup

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file and add your Anthropic API key. Optionally set the Claude model (defaults to claude-3-haiku-20240307, which is available on the free evaluation plan):

ANTHROPIC_API_KEY=your_actual_api_key_here
# Optional: pick another Claude 3 model if your account has access (e.g. claude-3-5-sonnet-20241022)
ANTHROPIC_MODEL=claude-3-haiku-20240307

4. Start the development server:

npm run dev

The backend will run on http://localhost:3000

Frontend Setup

1. Simply open frontend/index.html in your web browser, or serve it using a local server:

# Using Python
cd frontend
python -m http.server 8000

# Using Node.js http-server
npx http-server -p 8000

2. Open http://localhost:8000 in your browser

Usage

1. Enter Pub Token: Paste the full token SleekCMS gives you (format: pub-<siteId>-<secret>). The app will automatically call https://pub.sleekcms.com/<siteId>/latest, so you do not need to type any URL.
2. Start Chatting: After connecting, the token input will be replaced with a prompt input. Ask any questions about your website
3. View Responses: AI responses will appear in the message box. When the assistant includes a visual card (e.g., pricing breakdowns), it renders directly below the text
4. End Session: Click "End Session" to disconnect and start fresh

API Endpoints

• POST /api/connect - Connect with pub token

  • Body: { "pubToken": "your_token" }
  • Returns: { "sessionId": "...", "websiteData": {...} }

• POST /api/chat - Send a chat message

  • Body: { "sessionId": "...", "prompt": "your question" }
  • Returns: { "response": "AI response", "sessionId": "..." }

• POST /api/end-session - End a session

  • Body: { "sessionId": "..." }
  • Returns: { "message": "Session ended successfully" }

How It Works

1. Connection: User provides SleekCMS pub token → Backend fetches website JSON data → Creates session
2. Chat: User asks question → Backend sends to MCP server → MCP server processes with website context → AI generates response → Returns to user
3. Context Management: MCP server maintains conversation history and website data throughout the session
4. Session End: User clicks "End Session" → All session data is cleared

Technologies Used

• Frontend: HTML, Tailwind CSS, Vanilla JavaScript
• Backend: Node.js, Express, TypeScript
• AI: Anthropic Claude 3 (Sonnet)
• MCP: Custom MCP server implementation for context management

Notes

• Sessions automatically expire after 2 hours of inactivity
• The system maintains the last 10 messages in conversation history for context
• Make sure your Anthropic API key has sufficient credits for API calls