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