Epic Stack 예제 추가 모형 Context 의정서 (MCP)를 위한 지원.

MCP는 무엇입니까?

Model Context Protocol (MCP)는 방법을 표준화하는 개방형 프로토콜입니다. 응용 프로그램은 큰 언어 모델 (LLMs)에 컨텍스트를 제공합니다. MCP의 생각 AI 애플리케이션의 USB-C 포트 - AI를 연결하는 표준화 된 방법을 제공합니다. 다른 데이터 소스 및 도구에 모델.

더 알아보기 MCP 문서

예제 구현

이 저장소는 MCP를 Epic Stack으로 통합하는 방법을 보여줍니다. 신청. 구현은 다음과 같습니다 :

1. 클라이언트 연결을 취급하는 Server-side MCP 설정
2. SSE (Server-Sent Events) 실시간 통신을 위한 전송 층
3. 예제 도구 구현 LLMs에 기능을 노출하는 방법을 보여주는

키 구성 요소

###1. MCP 서버 설정 (app/routes/mcp+/mcp.server.ts)

MCP 서버는 도구 등록 및 처리하는 핵심 구성 요소입니다. 실행. 그것은 독특한 이름과 버전으로 구성, 그리고 정의 기능 제공.

###2. 도구 구현

도구는 LLMs에 기능을 노출하는 기본 방법입니다. 각 공구:

• descriptive 이름과 목적이 있습니다.
• Type-safe 매개 변수 검증을 위해 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: