mcp

MCP 관련 정보

json-render MCP 통합은 Claude, ChatGPT, Cursor, VS Code 등 MCP 기능을 지원하는 클라이언트 내에서 json-render UI를 대화형 MCP 앱으로 제공합니다. 서버 측에서는 createMcpApp()이 render-ui 도구와 ui:// HTML 리소스를 등록하는 전체 McpServer를 구축합니다. 도구 설명에는 카탈로그 프롬프트가 포함되어 있어 모델이 유효한 UI 명세를 생성할 수 있도록 안내하며, HTML 리소스는 Vite로 번들링된 단일 파일 React 앱입니다.

렌더링 흐름은 iframe 내부에서 실행됩니다. 클라이언트 훅 useJsonRenderApp()은 postMessage를 통해 호스트와 연결되며, spec, 로딩 상태, 연결 여부, 오류, 그리고 callServerTool을 반환합니다. 이러한 값들은 작은 React 뷰에 전달되어 JSONUIProvider와 Renderer에 제공됩니다. 자체적인 iframe HTML은 React 앱을 Vite와 vite-plugin-singlefile로 번들링하여 생성되며, 모든 것이 단일 파일로 제공됩니다.

주요 진입점 외에도 서버 API는 registerJsonRenderTool과 registerJsonRenderResource를 노출하여 기존 서버에 json-render를 연결할 수 있게 하며, 클라이언트 API는 buildAppHtml을 추가합니다. 이 문서에는 .cursor/mcp.json을 통한 Cursor용 및 Claude Desktop용 클라이언트 구성 예제가 포함되어 있으며, 서버용 설치 세트(@json-render/mcp, @json-render/core, @modelcontextprotocol/sdk), 클라이언트 iframe용(@json-render/react, @json-render/shadcn, react, react-dom), 그리고 빌드 도구 목록을 제공합니다. 이는 단순 텍스트 출력 대신 대화형 컴포넌트 기반 UI를 제시해야 하는 MCP 서버를 구축할 때 적합합니다.

자주 묻는 질문

이 MCP 통합이 타겟으로 하는 MCP 클라이언트는 무엇인가요?

Claude, ChatGPT, Cursor, VS Code 및 MCP 앱을 호스팅할 수 있는 기타 MCP 지원 클라이언트입니다.

createMcpApp()은 무엇을 설정하나요?

render-ui 도구와 ui:// HTML 리소스를 등록하는 전체 McpServer입니다. 도구 설명에는 카탈로그 프롬프트가 포함되어 있어 모델이 유효한 명세를 생성할 수 있습니다.

iframe HTML은 어떻게 빌드되나요?

Vite와 vite-plugin-singlefile을 사용하여 React 앱을 단일 자체 포함 HTML 파일로 번들링합니다.

명세를 렌더링하는 클라이언트 훅은 무엇인가요?

useJsonRenderApp()은 postMessage를 통해 호스트에 연결하며, React 뷰가 렌더링할 spec, 로딩 상태, 연결 여부, 오류, 그리고 callServerTool을 반환합니다.

서버에 필요한 패키지는 무엇인가요?

@json-render/mcp, @json-render/core, 그리고 @modelcontextprotocol/sdk입니다. iframe 클라이언트는 추가로 @json-render/react, @json-render/shadcn, react, 그리고 react-dom을 사용합니다.