Building a CSS Tutor MCP Server

Name: Building a CSS Tutor MCP Server
Author: 3mdistal

@3mdistal

Repository

About Building a CSS Tutor MCP Server

A demo of how to build an MCP server (without just vibe coding).

Basic information

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "css-mcp-server": {
      "command": "npx",
      "args": [
        "@modelcontextprotocol/inspector",
        "node",
        "./build/index.js"
      ]
    }
  }
}

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Building a CSS Tutor MCP Server?

A Model Context Protocol (MCP) server built with Node.js and TypeScript that acts as a CSS tutor. It provides personalized updates about CSS features to a connected AI client, demonstrating key MCP concepts: Resources, Tools, and Prompts.

How to use Building a CSS Tutor MCP Server?

Clone the repository, install dependencies with npm install, build with npm run build, then configure your MCP client (e.g., Claude desktop app or Cursor) to launch the server with the absolute path to build/index.js and provide an OpenRouter API key as the OPENROUTER_API_KEY environment variable. For Cursor, a project rule file is needed to supply the guidance prompt.

Key features of Building a CSS Tutor MCP Server

Defines a css_knowledge_memory resource stored in a JSON file
Provides three tools: get_latest_updates, read_from_memory, write_to_memory
Includes a static css-tutor-guidance prompt for the AI client
Fetches live CSS news via OpenRouter and the Perplexity model
Supports read/write permissions for the resource using Zod validation
Uses StdioServerTransport for communication over standard input/output

Use cases of Building a CSS Tutor MCP Server

Fetching the latest CSS news and articles for personalized learning
Checking which CSS concepts a user already knows from stored memory
Updating the user’s knowledge profile when they confirm learning a concept
Demonstrating MCP patterns for building more complex agentic servers

FAQ from Building a CSS Tutor MCP Server

What are the prerequisites?

Node.js v18 or later, npm, an AI client that supports MCP (e.g., Claude desktop app), and an OpenRouter API key for the get_latest_updates tool.

How do I provide the OpenRouter API key?

You must set the OPENROUTER_API_KEY environment variable in your MCP client configuration (e.g., in claude_desktop_config.json under the server’s env object).

Where is user memory stored?

User’s known CSS concepts are stored persistently in data/memory.json as a simple JSON file.

What transport does the server use?

The server uses the StdioServerTransport, running as a child process launched by the MCP client.

Can I debug the server?

Yes, you can use the @modelcontextprotocol/inspector tool from the terminal, passing the OpenRouter API key as an environment variable.

Comments

More Other MCP servers

Awesome Mcp Servers

punkpeye

A collection of MCP servers.

90.5K

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K