css

This MCP server acts as a CSS Tutor. Built with Node.js and TypeScript, it provides a lightweight assistant that can fetch latest CSS updates, read from and write to a memory of CSS concepts you know, and present personalized, actionable guidance to the connected AI client. The key tools exposed by the server are: get_latest_updates (fetches CSS news via OpenRouter/Perplexity), read_from_memory (reads the user’s known CSS concepts from data/memory.json), and write_to_memory (updates the memory with newly learned concepts). To use the server, connect your MCP client to the configured server (css-tutor) using the provided command and environment variable for the OpenRouter API key. Once connected, call get_latest_updates to discover recent CSS developments, then read_from_memory to understand which concepts the user already knows, and finally use write_to_memory to update the memory as the user confirms learning new concepts. For Cursor users, you can load the same server configuration and incorporate the provided guidance rules to drive the learning workflow. In practice, you’ll typically start by fetching updates, compare them with the user’s memory, and present 1–2 new concepts at a time with actionable context.

Prerequisites:

• Node.js v18 or later
• npm (or yarn/pnpm)
• An MCP client capable of connecting to an MCP server (e.g., Claude desktop app)
• An OpenRouter API Key for get_latest_updates

Installation steps:

1. Clone the repository and install dependencies git clone https://github.com/3mdistal/css-mcp-server.git cd css-mcp-server npm install

2. Build the server (TypeScript to JavaScript) npm run build

3. Prepare API key for updates (required by get_latest_updates) Obtain your key from OpenRouter and keep it ready to provide to the MCP client or configure via environment when launching the server.

4. Run or configure the server for client usage

   • If running locally for testing: node build/index.js
   • Or configure your MCP client with the server path and environment variable (OPENROUTER_API_KEY) as shown in the Quick Start example. Ensure the absolute path to build/index.js is correct in the client config.

5. Connect your MCP client to the server and begin interactions.

Tips and caveats:

• OPENROUTER_API_KEY is required for get_latest_updates. Keep your key secure and do not expose it in client-side configurations. Use environment variables as shown in the example client config.
• The server stores user memory in data/memory.json. This file acts as the persistent knowledge base for known CSS concepts.
• The server exposes three tools: get_latest_updates, read_from_memory, and write_to_memory. When guiding users, start with updates, then assess memory, and finally update memory as concepts are learned.
• If you modify the server, re-run npm run build to reflect changes in the built index.js used by the MCP client.
• For Cursor users, you can embed the guidance rule into your project rules to optimize the interaction flow.