広告掲載
MCP.so
ログイン

Building a CSS Tutor MCP Server

@3mdistal

リポジトリ

基本情報

カテゴリ

その他

トランスポート

stdio

作者

3mdistal

Building a CSS Tutor MCP Server について

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

Building a CSS Tutor MCP Server の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

Building a CSS Tutor MCP Server のツール

ツール一覧はまだありません

この掲載には表示できるツール一覧がまだありません。サーバーにツールがないという意味ではありません。対応機能はプロジェクトのドキュメントをご確認ください。

上のボタンで一時的なサンドボックスでこのサーバーを実行し、ツール一覧を取得できます。

概要

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

よくある質問

1

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.

2

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

3

Where is user memory stored?

User’s known CSS concepts are stored persistently in `data/memory.json` as a simple JSON file.

4

What transport does the server use?

The server uses the StdioServerTransport, running as a child process launched by the MCP client.

5

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.

コメント

「その他」の他のコンテンツ

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

LoadOptimizer

LoadOptimizer plans truck, container and pallet loads with a real optimization engine, straight from your AI assistant. Describe the order in plain language, for example "plan 36 Euro pallets on a standard 13.6 m trailer

DeepMark

DeepMark helps teachers deliver rapid, consistent marking with meaningful feedback for every student — in a fraction of the time. What once took a week, now takes one free period.

FastMCP v2 🚀

jlowin

🚀 The fast, Pythonic way to build MCP servers and clients.

26.0K

Volley.sh

Volley

A good sequence diagram can solve almost any communication problem in engineering. Volley lets your agent write them as plain text, with the real request and response payloads on every arrow. It checks its own syntax wi

広告掲載