CSS Tutor

Follow these steps to get the server running quickly:

git clone https://github.com/3mdistal/css-mcp-server.git cd css-mcp-server

npm install # Or: yarn install / pnpm install

Build the Server:Compile the TypeScript code.

npm run build # Or: yarn build / pnpm run build

Configure Your MCP Client:Tell your client how to launch the serverandprovide the API key as an environment variable. Here's an example for the Claude desktop app'sclaude_desktop_config.json:

- Go toCursor Settings>MCP>Add new global MCP server.
- Paste in the same JSON as above in the Claude Desktop step, with all the same caveats.

-

Create the directory.cursor/rulesin your project root if it doesn't exist.

Create a file inside it namedcss-tutor.rule(or any.rulefilename).

Paste the following guidance text intocss-tutor.rule:

You are a helpful assistant connecting to a CSS knowledge server. Your goal is to provide the user with personalized updates about new CSS features they haven't learned yet. Available Tools: 1. get_latest_updates: Fetches recent general news and articles about CSS. Use this first to see what's new. 2. read_from_memory: Checks which CSS concepts the user already knows based on their stored knowledge profile. 3. write_to_memory: Updates the user's knowledge profile. Use this when the user confirms they have learned or already know a specific CSS concept mentioned in an update. Workflow: 1. Call get_latest_updates to discover recent CSS developments. 2. Call read_from_memory to get the user's current known concepts (if any). 3. Compare the updates with the known concepts (if any). Identify 1-2 new concepts relevant to the user. Important: They _must_ be from the response returned by get_latest_updates tool. 4. Present these new concepts to the user, adding any context as needed, in addition to the information returned by the get_latest_updates. 5. Ask the user if they are familiar with these concepts or if they've learned them now. 6. If the user confirms knowledge of a concept, call write_to_memory to update their profile for that specific concept. 7. Focus on providing actionable, personalized learning updates.

- Ensure thecss-tutorserver is enabled in Cursor's MCP settings.
- Start a new chat or code generation request (e.g., Cmd+K) and include@css-tutor-rule(or whatever you named your rule file) in your request. This tells Cursor to load the rule's content, which includes the instructions on how to use theread_from_memory,write_to_memory, andget_latest_updatestools provided by the connected MCP server.

Note thatwithoutthe prompt/rule, Cursor will still be able to use individual tools if you ask it to. The prompt provides a workflow and order in which to call the tools and read/write from memory.

This section provides a higher-level overview of how the server is implemented.

- Resource (css_knowledge_memory):Represents the user's known CSS concepts, stored persistently indata/memory.json.
- Tools:Actions the server can perform:

- get_latest_updates: Fetches CSS news from OpenRouter/Perplexity.
- read_from_memory: Reads the content of thecss_knowledge_memoryresource.
- write_to_memory: Modifies thecss_knowledge_memoryresource.

- data/memory.json: A simple JSON file acting as the database for known CSS concepts. A default version is included in the repo.
- src/resources/index.ts: Defines thecss_knowledge_memoryresource. It includes:

- A Zod schema for validating the data.
- readMemoryandwriteMemoryfunctions for file I/O.
- Registration usingserver.resource, specifying thememory://URI scheme and read/write permissions. The read handler returns the content ofdata/memory.json.

- read_from_memory: CallsreadMemory.
- write_to_memory: Takesconceptandknownas input (schema defined with Zod), usesreadMemoryandwriteMemoryto update the JSON file.
- get_latest_updates: RequiresOPENROUTER_API_KEY, calls the OpenRouter API usingnode-fetchand theperplexity/sonar-promodel, returns the AI-generated summary.

- Initializes theMcpServerinstance from@modelcontextprotocol/sdk.
- Imports and calls theregisterPrompts,registerResources, andregisterToolsfunctions from the other modules.
- UsesStdioServerTransportto handle communication over standard input/output.
- Connects the server to the transport and includes basic error handling.

If you need to debug the server or inspect the raw JSON-RPC messages being exchanged, you can use the@modelcontextprotocol/inspectortool. This tool acts as a basic MCP client and launches your server, showing you the communication flow.

Run the inspector from your terminal in the project root:

npx @modelcontextprotocol/inspector node ./build/index.js

- npx @modelcontextprotocol/inspector: Downloads (if needed) and runs the inspector package.
- node: The command used to execute your server.
- ./build/index.js: The path (relative to your project root) to your compiled server entry point.

Note that the inspector launches your server as a child process. If your server relies on environment variables (likeOPENROUTER_API_KEYfor theget_latest_updatestool), you need to ensure they are available in the environment where you run thenpxcommand. The.envfile might not be automatically loaded in this context. You can typically prefix the command:

# Example on Linux/macOS OPENROUTER_API_KEY="sk-or-xxxxxxxxxx" npx @modelcontextprotocol/inspector node ./build/index.js # Example on Windows (Command Prompt) set OPENROUTER_API_KEY=sk-or-xxxxxxxxxx && npx @modelcontextprotocol/inspector node ./build/index.js # Example on Windows (PowerShell) $env:OPENROUTER_API_KEY="sk-or-xxxxxxxxxx"; npx @modelcontextprotocol/inspector node ./build/index.js

Replacesk-or-xxxxxxxxxxwith your actual key.

This demo demonstrates the core steps involved in creating a functional MCP server using the TypeScript SDK. We defined a resource to manage state, tools to perform actions (including interacting with an external API), and a prompt to guide the AI client.

Hope this demo can help you understand how to build servers that are much more complex (and useful) than this one!

(Also, if you run into any 🐛bugs, feel free to open up an issue.)

This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.

Create crafted UI components inspired by the best 21st.dev design engineers.

Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server

An MCP server to help AI assistants to answer questions and generate AccelByte Extend SDK code more effectively .

MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent

ALAPI MCP Tools,Call hundreds of API interfaces via MCP

AI-powered SVG animation generator that transforms static files into animated SVG components using the Allyson platform

MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.

APIMatic MCP Server is used to validate OpenAPI specifications using APIMatic. The server processes OpenAPI files and returns validation summaries by leveraging APIMatic’s API.

One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.