广告合作
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.

评论

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

Blender

ahujasid

Open-source MCP to use Blender with any LLM

23.6K

Screenpipe

screenpipe

YC (S26) | Open Computer History | Continuously record your company computer work, map your workflows, help you find work worth automating, and power your agents' context

22.0K

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.

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

der die das – German noun genders (Lingviko)

Lingviko

The article (der, die, das) of 90,000 German nouns, compounds included, plus a checker that finds wrong articles in German text (“mit der Zug” → dem). Uses dictionary data, not AI guessing. Free, no login.

广告合作