Css MCP Server

🚀 Model Context Protocolを使用したシンプルなサーバーの構築

このプロジェクトは、TypeScript SDKを使用して基本的なMCPサーバーを作成する方法を示しています。このサーバーは以下の機能を実装しています。

• リソース管理：既知のCSS概念を格納するための単純なリソース (css_knowledge_memory) を定義します。
• ツール交互：3つのツールを実装しています。
  • read_from_memory：メモリからデータを読み取ります。
  • write_to_memory：メモリにデータを書き込みます。
  • get_latest_updates：OpenRouter APIを呼び出して最新の更新を取得します。
• プロンプトガイダンス：AIクライアントがツールとリソースと効果的にやり取りする方法を指導する静的なプロンプト (css-tutor-guidance) を定義します。

✨ 主な機能

• リソース管理機能により、CSS概念を効率的に保存できます。
• 3つのツールを通じて、メモリの読み書きや最新情報の取得が可能です。
• プロンプトガイダンスにより、AIクライアントが適切に操作できるように支援します。

📦 インストール

環境変数の設定

サーバーを正常に動作させるためには、環境に以下の変数を設定する必要があります。

OPENROUTER_API_KEY=your_api_key_here

この環境変数は .env ファイルに追加するか、オペレーティングシステムの環境に直接設定できます。

依存関係のインストール

1. プロジェクトリポジトリをローカルにクローンします。

   git clone https://github.com/yourusername/css-tutor-server.git
   cd css-tutor-server
   

2. 依存関係をインストールします。

   npm install
   

サーバーの起動

npm start

💻 使用例

基本的な使用法

const server = await createServer({
  prompts: [css_tutor_guidance],
  tools: [
    read_from_memory,
    write_to_memory,
    get_latest_updates
  ],
});

// サーバーを起動する
await server.start();

📚 ドキュメント

プロジェクト構造

プロジェクトのファイル構造は以下の通りです。

project-root/
├── data/                   # データディレクトリ、memory.jsonデータベースファイルを含む
├── src/
│   ├── resources/          # リソース定義ディレクトリ
│   ├── tools/              # ツール定義ディレクトリ
│   ├── prompts/            # プロンプト定義ディレクトリ
│   └── index.ts           # メインプログラムのエントリーファイル
├── package.json           # プロジェクトの依存関係とスクリプトの設定
├── tsconfig.json          # TypeScriptコンパイラの設定
└── .gitignore             # コードリポジトリの無視規則

コード実装

リソース定義 (src/resources/index.ts)

import { readFileSync, writeFileSync } from 'fs';
import { resource, ResourceHandler } from '@modelcontextprotocol/sdk';

const memorySchema = z.object({
  concepts: z.record(z.string()),
});

export async function readMemory(): Promise<unknown> {
  try {
    const data = readFileSync('./data/memory.json', 'utf8');
    return JSON.parse(data);
  } catch (error) {
    console.error('メモリの読み取りエラー:', error);
    throw error;
  }
}

export async function writeMemory(data: unknown): Promise<void> {
  try {
    const isValid = memorySchema.safeParse(data).success;
    if (!isValid) {
      throw new Error('データ形式が無効です');
    }
    writeFileSync('./data/memory.json', JSON.stringify(data, null, 2));
  } catch (error) {
    console.error('メモリの書き込みエラー:', error);
    throw error;
  }
}

resource({
  name: 'css_knowledge_memory',
  uriPrefix: 'memory://',
  readHandler: async () => await readMemory(),
  writePermission: true,
  writeHandler: async (data) => await writeMemory(data),
});

ツール定義 (src/tools/index.ts)

import { resource } from '@modelcontextprotocol/sdk';
import { readMemory, writeMemory } from './resources';
import { z } from 'zod';

export const read_from_memory = tool({
  name: 'read_from_memory',
  description: 'メモリ内の知識ベースデータを読み取る',
  handler: async () => await readMemory(),
});

export const write_to_memory = tool({
  name: 'write_to_memory',
  description: 'メモリに新しい知識を書き込む',
  parameters: {
    concept: z.string().describe('既知としてマークするCSS概念'),
    known: z.boolean().describe('その概念が既知かどうかを示す')
  },
  handler: async ({ concept, known }) => {
    const currentData = await readMemory();
    if (known) {
      // 既知の概念リストに追加
      currentData.concepts[concept] = true;
    } else {
      // 削除または未知としてマーク
      delete currentData.concepts[concept];
    }
    return await writeMemory(currentData);
  },
});

export const get_latest_updates = tool({
  name: 'get_latest_updates',
  description: '最新のCSS更新情報を取得する',
  handler: async () => {
    try {
      // ここでは実際のAPIを呼び出して最新の更新を取得する必要があります
      // 例では静的データを返します
      return {
        updates: ['CSS Gridの新しいレイアウトモードが追加されました', 'Flexboxの既知の問題が修正されました']
      };
    } catch (error) {
      console.error('更新の取得に失敗しました:', error);
      throw error;
    }
  },
});

プロンプト定義 (src/prompts/index.ts)

import { prompt } from '@modelcontextprotocol/sdk';

export const css_tutor_guidance = prompt({
  name: 'css_tutor_guidance',
  description: '学習者がCSSの核心概念を習得する方法を指導する',
  content: `経験豊富なCSS開発者として、学習者が重要なCSS概念を理解し習得するのを支援してください。明確で条理性のある方法で指導してください。`
});

メインプログラム (src/index.ts)

import { createServer } from '@modelcontextprotocol/sdk';
import { css_tutor_guidance } from './prompts';
import { read_from_memory, write_to_memory, get_latest_updates } from './tools';

async function main() {
  try {
    const server = await createServer({
      prompts: [css_tutor_guidance],
      tools: [
        read_from_memory,
        write_to_memory,
        get_latest_updates
      ],
    });

    console.log('サーバーが起動しました。監視アドレス:', server.url);
    await server.start();
  } catch (error) {
    console.error('サーバーの起動に失敗しました:', error);
  }
}

main().catch(console.error);

プロジェクト設定

package.json 設定

{
  "name": "css_tutor_server",
  "version": "1.0.0",
  "description": "Model Context Protocolをベースに構築されたCSS教学補助サーバー。",
  "scripts": {
    "start": "ts-node src/index.ts"
  },
  "dependencies": {
    "@modelcontextprotocol/sdk": "^0.5.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3",
    "zod": "^1.24.0"
  }
}

tsconfig.json 設定

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts"],
  "exclude": ["node_modules"]
}

デバッグツール

開発者のデバッグを支援するために、以下のデバッグツールが提供されています。

npx @modelcontextprotocol/inspector

上記のコマンドを実行すると、ブラウザでサーバーの状態、リソース、ツール、およびプロンプトを表示およびテストできる界面が開きます。

プロジェクトファイル構造の説明

• data/memory.json：既知のCSS概念を格納します。
• src/resources/：メモリリソースの読み書きロジックを含みます。
• src/tools/：実行可能な具体的な機能ツールを含みます。
• src/prompts/：教学用のプロンプト内容を定義します。
• src/index.ts：サーバーのエントリーファイルで、サービスの初期化と起動を担当します。

エラー処理

src/tools/index.ts では、各ツールにエラーキャッチと処理機構を追加しています。本番環境では、追加のエラー監視と報告機能を追加することをお勧めします。

拡張機能

将来的には以下の拡張を検討できます。

1. データ永続化：ローカルファイルストレージの代わりにデータベースを使用する。
2. ログシステム：専用のログ管理ツールを統合する。
3. 認証と承認：異なるユーザーロールに権限を割り当てる。
4. 国際化サポート：多言語の教学コンテンツをサポートする。
5. 進捗追跡：学習者の学習進捗と成果を記録する。

参考資料

• Model Context Protocol 公式ドキュメント
• Zod 公式ドキュメント
• TypeScript 公式ドキュメント