소개
AI SDK로 MCP Apps 호스트를 구축하는 Vercel Knowledge Base 가이드입니다. `@ai-sdk/mcp`와 `@ai-sdk/react`로 모델에 공개되는 도구와 앱 전용 도구를 분리하고, `ui://` 리소스를 읽으며, `experimental_MCPAppRenderer`를 사용해 샌드박스 iframe 안에 상호작용 도구 UI를 렌더링하는 방법을 보여 줍니다.
요약
이 가이드가 중요한 이유:
1. 구체적인 호스트 구현: MCP Apps를 프로토콜 개념에서 실제로 작동하는 React 앱 연결 구현으로 확장합니다
2. 도구 공개 범위 모델: 모델에 공개되는 도구와 앱에 공개되는 도구를 분리하는 방법을 다룹니다
3. 리소스 렌더링 경로: 호스트가 `ui://` 리소스를 읽고 HTML을 안전하게 렌더링하는 방법을 보여 줍니다
4. 보안 경계: 샌드박스 iframe 렌더링과 허용된 도구의 프록시 호출을 강조합니다
5. 리소스 모음에서의 역할: 현재의 Vercel AI SDK 통합 경로로 MCP Apps 표준 항목을 보완합니다
1. 구체적인 호스트 구현: MCP Apps를 프로토콜 개념에서 실제로 작동하는 React 앱 연결 구현으로 확장합니다
2. 도구 공개 범위 모델: 모델에 공개되는 도구와 앱에 공개되는 도구를 분리하는 방법을 다룹니다
3. 리소스 렌더링 경로: 호스트가 `ui://` 리소스를 읽고 HTML을 안전하게 렌더링하는 방법을 보여 줍니다
4. 보안 경계: 샌드박스 iframe 렌더링과 허용된 도구의 프록시 호출을 강조합니다
5. 리소스 모음에서의 역할: 현재의 Vercel AI SDK 통합 경로로 MCP Apps 표준 항목을 보완합니다
태그
vercelai-sdkmcp-appsreactimplementation