Claude Desktopで作業を実施する際に、毎回テンプレプロンプトを打ち込んだりどこかからコピペしてくることがよくあると思います。今回は、そんなテンプレプロンプトをClaude Desktop上からサクッと呼び出せるMCPサーバーを作ります。
ついでに、作ったMCPサーバーを他の人にサクッと使ってもらえるように、DXTを使って配布できるようにします。
- ターゲット：業務でClaude Desktop等のMCP連携可能なGUIアプリをよく使う人、またはチーム
- ユースケース：Claudeに読み込ませたい定型的なドキュメントがある場合に、読み込みの手間を削減
MCPサーバーの作成
1. プロジェクト準備
- 前提：Node.js（バージョン18以上）がインストールされていること
以下コマンドを実行してプロジェクトを作成する。
mkdir demo-mcp-server
cd demo-mcp-server
npm init -y
package.jsonを以下のように編集する。
{
"type": "module",
"scripts": {
"build": "tsc && chmod 755 build/index.js"
}
}
依存ライブラリをインストールする。
npm install @modelcontextprotocol/sdk zod
npm install -D @types/node typescript
mkdir src
プロジェクトルートにtsconfig.jsonを作成する。
{
"compilerOptions": {
"target": "ES2022",
"module": "Node16",
"moduleResolution": "Node16",
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}
2. プロンプト準備
Claudeに読み込ませたいプロンプトを用意する。ここではサンプルとして買い物リスト（shopping.txt）を用意する。
# 買い物リスト
- 牛乳
- パン
- 卵
- トマト
- トイレットペーパー
- 洗剤
- シャンプー
3. MCPサーバーの作成
- src/index.tsを作成し、以下のコードをコピペする
-
<PATH>はshopping.txtを配置したフォルダの絶対パスに置き換える -
<NAME>はClaude Desktop上でのプロンプトの表示名になるので、わかりやすい名前に変更する - プロンプトを複数参照できるようにしたい場合は、それぞれ
server.registerResourceを定義する
import { promises as fs } from "fs";
import { fileURLToPath } from "url";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
// サーバの準備
const server = new McpServer({
name: "demo-mcp-server",
version: "1.0.0"
});
const metadata = {
title: "買い物リスト",
description: "食材・日用品などの購入予定アイテムを記載したテキストファイルです。",
mimeType: "text/plain"
};
// 買い物リストをプロンプトとして追加
server.registerResource(
"<NAME>", // NOTE: Claude Desktop上の表示名になる
"file://<PATH>/shopping.txt", // NOTE: 実際に参照されるファイルのURI
metadata,
async (uri: URL) => {
try {
const localPath = fileURLToPath(uri).replace("file://", "");
const text = await fs.readFile(localPath, "utf-8");
return {
contents: [
{
uri: uri.href,
mimeType: "text/plain",
text,
},
],
};
} catch (err) {
throw new Error(`リソースの読み込みに失敗しました。: ${err}`);
}
}
);
// メイン
async function main() {
const transport = new StdioServerTransport();
await server.connect(transport);
console.error("stdio上で動作するリソースMCPサーバ");
}
main().catch((err) => {
console.error("致命的なエラー:", err);
process.exit(1);
});
mcpサーバーをビルドする。
npm run build
mcpサーバーを実行し、「stdio上で動作するプロンプトMCPサーバ」と表示されていれば問題なく動作している。
node build/index.js
4. DXTの作成
DXT作成のためのパッケージをインストールする。
npm install @anthropic-ai/dxt
DXTで追加するための設定ファイル（manifest.json）を作成する。
dxt init
質問に答えるだけで自動で生成される。
今回のユースケースだと、質問は以下を回答すれば良さそう。
- ✔ Extension name
- ✔ Author name
- ✔ Display name (optional)
- ✔ Description
- ✔ Server type: Node.js
- ✔ Entry point: build/index.js
プロンプトを提供する場合は以下の質問にも回答する。
- ✔ Does your MCP Server provide prompts you want to advertise (optional)?
以下コマンドでDXTが生成される。
dxt pack
Claude Desktop > 設定 > エクステンションの画面を開く。
生成されたDXTファイルをドラッグ&ドロップし、インストールをクリックするとインストールが完了する。
Claude Desktopのテキスト入力画面の「+」ボタンをクリックすると、インストールしたMCPが追加されていることが確認できる。
まとめ
DXTをチームやプロジェクトのメンバーに配布・インストールしてもらうことで、全員が共通のテンプレドキュメントをClaudeに読み込ませることができます。
これで、今まで色んなところに散らばっていたテンプレに毎回アクセスして、コピペして貼り付けるだけの作業から解放されます。
めでたしめでたし。
補足
MCPサーバーにはリソース、プロンプト、ツールの3種類を提供するサーバーが存在しています。
非常に紛らわしくて申し訳ないですが、今回はプロンプトを提供するMCPサーバーではなく、リソースを提供するMCPサーバーを使ってコンテキストとしてテンプレプロンプトを読み込むようにしています。
Servers offer any of the following features to clients:
Resources: Context and data, for the user or the AI model to use
Prompts: Templated messages and workflows for users
Tools: Functions for the AI model to execute
参考記事
以下のnpakaさんの記事をガッツリ参考にしているので、一つひとつの技術について知りたい場合はこちらをご覧いただくのがわかりやすいと思います。
- リソースとプロンプトを提供する MCPサーバ の作成(https://note.com/npaka/n/nbf6347f9615b)
- Anthropic の Desktop Extensions (DXT) を試す(https://note.com/npaka/n/nb206aa63ac7e)