home / mcp / css tutor mcp server

CSS Tutor MCP Server

Delivers personalized CSS feature updates to an MCP client by querying live CSS news and tracking user knowledge.

Installation

Add the following to your MCP client configuration file.

Configuration

{
  "mcpServers": {
    "ebimopondei-css-tutor-mcp-server": {
      "command": "node",
      "args": [
        "/full/path/to/your/css-mcp-server/build/index.js"
      ],
      "env": {
        "OPENROUTER_API_KEY": "sk-or-xxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

You run a small Node.js and TypeScript MCP server that acts as a CSS Tutor. It keeps track of what CSS concepts you’ve learned, fetches up‑to‑date CSS news, and presents personalized updates to your connected AI client through a simple, extensible MCP interface.

How to use

Connect to the CSS Tutor MCP server from your MCP client to receive personalized CSS feature updates based on what you already know and what is new. The server exposes three tools you can invoke from your client: get_latest_updates, read_from_memory, and write_to_memory. Use them in a loop to discover new concepts, check the user’s current knowledge, and update their memory when they learn something new.

How to install

Prerequisites: you need Node.js v18 or later and npm (or another Node.js package manager such as yarn or pnpm). You also need an AI client capable of connecting to an MCP server and an OpenRouter API key if you want live CSS updates.

Step-by-step commands to get the server running locally and ready to connect to an MCP client:

Clone the repository (adjust the URL if you are using a fork):

# Clone the repository
git clone https://github.com/3mdistal/css-mcp-server.git
cd css-mcp-server

Configure your client to start the server

Prepare your environment and provide the OpenRouter API key to the MCP client so it can start the server with the required environment variable.

Here is an example configuration you can place in your Claude Desktop app configuration to launch the server as a local stdio MCP server:

{
  "mcpServers": {
    "css-tutor": {
      "command": "node",
      "args": [
        "/full/path/to/your/css-mcp-server/build/index.js"
      ],
      "env": {
        "OPENROUTER_API_KEY": "sk-or-xxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}

Connect and use

Start the client’s connection flow to boot the server process with the API key in its environment. Then begin requesting updates and reviewing concepts as you work.

Additional notes and tips

The server uses a memory resource to track known CSS concepts and three tools to interact with that memory and with live updates. You can customize your setup further by running the server locally, providing your own API key, and integrating with your preferred MCP client.

Troubleshooting and notes

If you encounter issues starting the server, verify that Node.js and npm are installed, that dependencies are installed, and that the built entry file path in your client configuration is correct. Ensure your OPENROUTER_API_KEY is valid and accessible to the client process. If the OpenRouter API key is not available, you can still run the server locally but live updates will be unavailable.

Security considerations

Keep your API keys secure. Do not commit keys to source control and use environment variables to inject secrets at runtime. When deploying, prefer CI/CD secrets management and restrict access to the MCP client configuration.

Available tools

read_from_memory

Reads the content of the css_knowledge_memory resource to learn what CSS concepts the user already knows.

write_to_memory

Updates the css_knowledge_memory resource by adding or modifying known concepts for the user.

get_latest_updates

Fetches recent CSS news and articles using the OpenRouter API and returns an AI-generated summary.