TypeScript Prompt MCP サーバー

AI アシスタントに事前定義されたプロンプト テンプレートを提供し、TypeScript プロジェクト、API アーキテクチャ、GitHub ワークフローの包括的なプランを生成できるようにする Model Context Protocol (MCP) サーバー。

🌟 概要

このMCPサーバーは、AIアシスタントがTypeScriptプロジェクト計画のための詳細かつ構造化された応答を生成するために使用できるプロンプトテンプレートのセットを提供します。以下のテンプレートが用意されています。

• 包括的なAPIアーキテクチャ計画の作成

• ベストプラクティスに従って新しい TypeScript プロジェクトを設定する

• GitHubワークフロー構成の生成

このMCPはLocal Dev MCPと連携するように特別に設計されており、Prompt MCPが詳細なプロジェクト計画を作成し、Local Dev MCPがそれを実行するという強力な組み合わせを実現します。これらを組み合わせることで、AI支援によるTypeScriptプロジェクト開発のためのシームレスなワークフローが実現します。

各プロンプト テンプレートは、AI アシスタントが最新の TypeScript 開発標準に従って、一貫性があり、高品質で詳細なプロジェクト計画を提供できるように設計されています。

Related MCP server: Documentation Generator MCP Server

🚀 機能

• 🏗️ API アーキテクチャ計画: レイヤー、フォルダ構造、データベース スキーマを含む包括的な API アーキテクチャ計画を生成します

• 🚀 プロジェクトのセットアップ: 適切な依存関係と構成を備えた新しい TypeScript プロジェクトの詳細なセットアップ計画を作成します。

• 🔄 GitHub ワークフロー: ブランチ戦略、PR テンプレート、CI/CD 構成を使用して GitHub ワークフロー プランを設計します

• 🛠️ カスタマイズ: 各プロンプトは、生成されたプランを特定のニーズに合わせて調整するためのパラメータを受け入れます

• ⚡ 一貫した出力: AIアシスタントがベストプラクティスに従った構造化された詳細な応答を提供することを保証します

📋 前提条件

• Node.js (v14以上)

• npmまたはyarn

🔧 インストール

1. リポジトリをクローンする

   git clone <repository-url>
   cd typescript-prompt-mcp

2. 依存関係をインストールする

   npm install

3. 環境変数を設定する

   # Create development environment file
   cp .env.example .env.development
   # Create production environment file
   cp .env.example .env.production

🎮 使用方法

開発モード

npm run dev

これにより、ホット リロードを使用して MCP サーバーが開発モードで起動します。

生産モード

npm run build
npm start

または、次の略語を使用します。

npm run prod

🔗 Local Dev MCP および Claude Desktop との統合

この MCP サーバーを Claude Desktop に追加するには:

1. **MCP サーバーを起動します。**サーバーがローカルで実行されていることを確認します。

2. Claudeデスクトップの設定を開く

   • Claudeデスクトップを起動

   • 右上のプロフィール写真またはアイコンをクリックします

   • ドロップダウンメニューから「設定」を選択します

3. 拡張機能の設定に移動する

   • 設定サイドバーで「拡張機能」をクリックします

   • 「カスタムMCPを追加」を選択します

4.1 MCP接続を構成する

• 名前: TypeScript Prompt MCP (または任意の名前)

• URL: MCP サーバーが実行されている URL を入力します (例: ローカル開発の場合はhttp://localhost:3000 )

• 「MCPを追加」をクリックします

4.2代替案: コマンドでMCP接続を構成する

• まずプロジェクトをビルドし、コンパイルされたサーバーへのフルパスを指定する必要があります。

• Claude Desktop 構成に以下を追加します。

"ts-prompts": {
  "command": "node",
  "args": [
    "YOUR_CUSTOM_PATH/dist/index.js"
  ]
}

5. MCPを有効にする

   • 新しく追加されたMCPの横にあるスイッチを切り替えて有効にします

   • Claude DesktopはMCPサーバーへの接続を試みます

6. ローカル開発MCPを追加

   • 手順3～5を繰り返して、Local Dev MCPをClaude Desktopに追加します。

   • 両方のMCPを有効にすると、計画から実装までの完全なワークフローが可能になります。

7. 接続を確認する

   • クロードと新しい会話を始める

   • ClaudeにTypeScriptプロジェクトやAPIアーキテクチャの計画を依頼する

   • クロードはプロンプトテンプレートを使用して詳細な計画を提供できるようになりました。

   • 次に、Claude に Local Dev MCP を使用して計画を実装するよう依頼します。

クロードの使用例

両方の MCP に接続したら、Claude に次のことを依頼できます。

• 「MongoDB と JWT 認証を使用した 'ecommerce-backend' という TypeScript プロジェクトの API アーキテクチャの計画を手伝ってもらえますか？」 (この Prompt MCP を使用)

• 「React コンポーネントを使用した新しい TypeScript フロントエンド ライブラリのセットアップ プランが必要です」(この Prompt MCP を使用)

• 「自動テストと npm 公開を備えた TypeScript CLI プロジェクトの GitHub ワークフロー プランを作成する」(この Prompt MCP を使用)

• 「では、Local Dev MCP を使用して、計画した API プロジェクトを実装しましょう」（Local Dev MCP を使用）

• 「作成したプランを使用して TypeScript プロジェクトをセットアップする」(Local Dev MCP を使用)

この MCP の組み合わせにより、プロジェクトを詳細に計画し、Claude インターフェースを離れることなくそれを実装できる強力なワークフローが作成されます。

🧠 利用可能なプロンプト

サーバーは、AI アシスタントが使用できるいくつかのプロンプトを公開します。

api-architecture

TypeScript API の包括的なアーキテクチャ プランを生成します。

パラメータ:

• projectName : APIプロジェクトの名前

• database : 使用するデータベース (postgres、mysql、mongodb など)

• auth : 認証方法（jwt、oauth、none）

• endpoints : 主要なAPIエンドポイントのカンマ区切りリスト

new-project-setup

新しい TypeScript プロジェクトの包括的なセットアップ プランを生成します。

パラメータ:

• projectName : プロジェクトの名前

• projectType : プロジェクトのタイプ (api、frontend、library、cli)

• features : 主要な機能または要件をコンマで区切って指定します。

github-workflow

TypeScript プロジェクトの GitHub ワークフロー プランを生成します。

パラメータ:

• projectName : プロジェクトの名前

• ciFeatures : CI 機能 (lint、test、build など) のコンマ区切りリスト

• deployTarget : デプロイメントターゲット (netlify、vercel、aws、azure など)

• branchStrategy : ブランチ戦略 (gitflow、trunk、github-flow)

🔍 仕組み

サーバーは ModelContextProtocol SDK を使用して MCP サーバーを作成します。

1. 検証にzodを使用してパラメータ付きの構造化プロンプトを定義します。

2. 各プロンプトは、AIアシスタントが包括的な計画を生成するためのガイドとなるフォーマットされたメッセージを返します。

3. プロンプトには、計画に何を含めるべきかについての詳細な指示が含まれています

4. サーバーは、トランスポート（通常はstdio）を介してClaudeまたは他のMCP互換AIアシスタントに接続します。

🛠️ プロジェクト構造

src/
  ├── index.ts                # Entry point that sets up the MCP server
  ├── prompts/                # Prompt definitions
  │   ├── apiArchitecture.ts  # API architecture prompt
  │   ├── githubWorkflow.ts   # GitHub workflow prompt
  │   ├── newProjectSetup.ts  # New project setup prompt
  │   └── index.ts            # Exports all prompts
scripts/
  ├── prepare-build.ts        # Script for preparing production builds
  ├── run-relevant-tests.ts   # Script for running tests on changed files
  └── setup-husky.js          # Script for setting up Git hooks

⚙️ 開発

新しいプロンプトの追加

新しいプロンプト テンプレートを追加するには:

1. src/promptsディレクトリに新しいファイルを作成する

2. mcpServer.prompt()メソッドを使用してプロンプトを定義します。

3. zodスキーマを使用してパラメータ検証を追加する

4. src/prompts/index.tsにプロンプトをエクスポートします。

例：

import { z } from 'zod';
import { mcpServer } from '../index';

mcpServer.prompt(
  'my-new-prompt',
  'Description of what this prompt does',
  {
    param1: z.string().describe('Description of param1'),
    param2: z.number().optional().describe('Description of param2'),
  },
  async ({ param1, param2 = 0 }) => {
    return {
      messages: [
        {
          role: 'user',
          content: {
            type: 'text',
            text: `Your prompt template with ${param1} and ${param2}...`,
          },
        },
      ],
    };
  },
);

環境設定

サーバーは開発と本番で異なる環境ファイルを使用します。

• .env.development - 開発モードで実行するときに使用されます

• .env.production - 本番モードで実行するときに使用されます

テスト

次のようにテスト スイートを実行します。

npm test

リンティングとフォーマット

# Run ESLint
npm run lint

# Fix ESLint errors
npm run lint:fix

# Format code with Prettier
npm run format

# Check formatting
npm run format:check

📝 デプロイメントに関する注意事項

本番環境にデプロイする場合:

1. 必要に応じて、 .env.productionファイルに有効な認証情報が含まれていることを確認してください。

2. ビルドプロセスはこれらの資格情報をコンパイルされたコードに埋め込みます

3. npm run prodを使用して本番サーバーをビルドして起動します。

📄 ライセンス

このプロジェクトは MIT ライセンスに基づいてライセンスされています - 詳細についてはLICENSEファイルを参照してください。

著者

Gpaul | ファルディン