Epic スタック例追加 モデルコンテキストプロトコル(MCP)のサポート

MCPとは?

モデルコンテキストプロトコル(MCP)は、どのように標準化するオープンプロトコルです。 アプリケーションの文脈を大きい言語モデル(LLMs)に提供します。 MCPの考え方 AI アプリケーション用の USB-C ポート - AI に接続するための標準化された方法を提供します。 異なるデータソースとツールにモデル。

詳しくはこちら MCP ドキュメント

導入事例

このリポジトリは、MCPをEpic Stackに統合する方法を示しています アプリケーション。 実装には以下が含まれます。

1. クライアント接続を処理するためのサーバー側MCP設定 2.リアルタイム通信用のSSE(サーバー・セント・イベント)トランスポートレイヤー
2. LLM に機能を公開する方法を示すツールの実装例

##キーコンポーネント

##1. MCPサーバー設定(app/routes/mcp+/mcp.server.ts)

MCP サーバーは、ツールの登録を処理するコアコンポーネントです。 実行。 独自の名前とバージョンを設定し、定義します。 提供する機能。

###2. ツールの実装

ツールはLMSの機能を公開する主な方法です。 各ツール:

• 記述的な名前および目的を持って下さい
• 型安全パラメータの検証のためにZodを使用する

Epic MCP

An Epic Stack example adding support for the Model Context Protocol (MCP).

What is MCP?

The Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to Large Language Models (LLMs). Think of MCP like a USB-C port for AI applications - it provides a standardized way to connect AI models to different data sources and tools.

Learn more from the MCP Documentation

Example Implementation

This repository demonstrates how to integrate MCP into an Epic Stack application. The implementation includes:

1. Server-side MCP setup for handling client connections
2. SSE (Server-Sent Events) transport layer for real-time communication
3. Example tool implementations showing how to expose functionality to LLMs

Key Components

1. MCP Server Setup (app/routes/mcp+/mcp.server.ts)

export const server = new McpServer(
	{
		name: 'epic-mcp-a25d',
		version: '1.0.0',
	},
	{
		capabilities: {
			tools: {},
		},
	},
)

The MCP server is the core component that handles tool registration and execution. It’s configured with a unique name and version, and defines the capabilities it provides.

2. Tool Implementation

server.tool(
	'Find User',
	'Search for users in the Epic Notes database by their name or username',
	{ query: z.string().describe('The query to search for') },
	async ({ query }) => {
		// Implementation...
	},
)

Tools are the primary way to expose functionality to LLMs. Each tool:

• Has a descriptive name and purpose
• Uses Zod for type-safe parameter validation
• Can return multiple content types (text, images, etc.)
• Integrates with your existing application logic

3. Transport Layer (app/routes/mcp+/fetch-transport.server.ts)

The transport layer handles the bi-directional communication between the MCP client and server:

• Uses Server-Sent Events (SSE) for real-time server-to-client communication
• Handles POST requests for client-to-server messages
• Maintains session state for multiple concurrent connections

4. Route Integration (app/routes/mcp+/index.ts)

export async function loader({ request }: Route.LoaderArgs) {
	const url = new URL(request.url)
	const sessionId = url.searchParams.get('sessionId')
	const transport = await connect(sessionId)
	return transport.handleSSERequest(request)
}

The Remix route:

• Establishes SSE connections for real-time communication
• Handles incoming tool requests via POST endpoints
• Manages session state for multiple clients

Learning Points

1. Tool Design: When designing tools for LLMs:

   • Provide clear, descriptive names and purposes
   • Use strong type validation for parameters
   • Return structured responses that LLMs can understand
   • Consider supporting multiple content types (text, images, etc.)

2. State Management: The implementation demonstrates: