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).