Building a CSS Tutor MCP Server

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

@3mdistal

代码仓库

关于 Building a CSS Tutor MCP Server

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

基本信息

分类

其他

运行时

node

传输方式

stdio

发布者

3mdistal

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

工具

未检测到工具

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

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.

其他分类下的更多 MCP 服务器

Inbox Zero AI

elie222

The world's best AI personal assistant for email. Open source app to help you reach inbox zero fast.

11.6K

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