Spring AI로 챗 인터페이스에 풍부한 UI를 더하다!
챗GPT(ChatGPT)와 같은 챗 인터페이스의 장점과 전통적인 UI(Traditional UI)의 장점을 결합하여 사용자 경험을 향상시킴
Spring AI 2.0.0-M3 버전을 통해 MCP 서버(MCP Server)에서 풍부한 UI를 쉽게 생성할 수 있도록 지원하며, MCP 앱(MCP App) 개발을 용이하게 함
MCP 앱은 HTML, JavaScript, CSS로 구성된 UI와 MCP 서버(MCP Server)가 제공하는 도구(Tool)로 구성되며, JSON-RPC(JSON-RPC)를 통해 통신
Dice Roller 예제를 통해 MCP 앱의 구조와 개발 과정을 설명하며, @McpResource 및 @McpTool 어노테이션(Annotation) 사용법을 제시함
Claude Desktop과 같은 MCP 클라이언트를 사용하여 MCP 앱을 실행하고, 챗 인터페이스 내에서 UI 상호작용(UI Interaction)을 구현함
MCP 앱(MCP App) 아키텍처(Architecture) 심층 분석
MCP 앱(MCP App)은 MCP 서버(MCP Server)가 제공하는 도구(Tool)와 HTML, JavaScript, CSS로 구성된 UI로 이루어진다. UI는 JSON-RPC(JSON-RPC)를 통해 MCP 서버(MCP Server)와 통신하며, ext-apps.ts 모듈을 사용하여 서버의 도구를 호출하고 컨텍스트를 변경한다.
@McpResource 어노테이션(Annotation): HTML UI를 제공하는 메서드에 사용되며, MIME 타입(MIME Type)과 CSP(Content Security Policy) 설정을 통해 보안을 관리한다.
@McpTool 어노테이션(Annotation): MCP 앱과 연결될 도구를 정의하며, ui.resourceUri 메타데이터(Metadata)를 통해 UI 리소스를 참조한다.
MCP 클라이언트(MCP Client): MCP Jam 또는 Claude Desktop과 같은 클라이언트를 사용하여 MCP 앱을 실행하고, 챗 인터페이스 내에서 UI 상호작용을 구현한다.
Spring AI를 활용한 MCP 앱(MCP App) 개발 과정
Spring AI를 사용하여 MCP 앱을 개발하려면, Spring Boot Initializr를 통해 Spring MVC와 Model Context Protocol Server 의존성을 포함하는 프로젝트를 생성해야 한다. Spring AI 2.0.0-M3 이상 버전에서 MCP 관련 기능이 통합되었으며, MCP 앱 개발에 필요한 메타데이터(Metadata) 설정을 지원한다.
프로젝트 초기화(Project Initialization): Spring Boot Initializr를 사용하여 프로젝트를 생성하고, Spring AI 버전을 확인한다.
UI 정의(UI Definition): HTML, JavaScript, CSS를 사용하여 UI를 구현하고, ext-apps.ts 모듈을 통해 MCP 서버와 상호작용한다.
MCP 서버 구현(MCP Server Implementation): @McpResource 및 @McpTool 어노테이션(Annotation)을 사용하여 MCP 서버를 구현하고, CspMetaProvider 및 DiceMetaProvider를 통해 메타데이터를 설정한다.
실행 및 테스트(Run and Test): MCP 서버를 실행하고, MCP 클라이언트를 사용하여 MCP 앱을 테스트한다.
MCP 앱(MCP App)의 UI 구성 요소 분석
MCP 앱의 UI는 HTML, JavaScript, CSS로 구성되며, ext-apps.ts 모듈을 사용하여 MCP 서버와 상호작용한다. UI는 App 객체를 통해 MCP 서버에 연결하고, updateModelContext() 함수를 사용하여 챗 인터페이스의 컨텍스트를 업데이트한다.
HTML 구조(HTML Structure): UI의 시각적 요소를 정의하며, CSS(CSS)를 사용하여 스타일을 적용한다.
JavaScript 로직(JavaScript Logic): UI의 동작을 제어하며, ext-apps.ts 모듈을 사용하여 MCP 서버의 도구를 호출하고 컨텍스트를 변경한다.
ext-apps.ts 모듈: MCP 서버와의 통신을 위한 API를 제공하며, sendMessage() 및 callServerTool() 함수를 통해 챗 인터페이스와 상호작용한다.
결과적으로, MCP 앱의 UI는 챗 인터페이스와 풍부한 UI를 결합하여 사용자 경험을 향상시키는 핵심 요소이다.
MCP 앱(MCP App)의 장점과 활용 사례
MCP 앱은 챗 인터페이스와 풍부한 UI를 결합하여 사용자 경험을 향상시키고, AI와의 상호작용을 더욱 직관적으로 만든다. Dice Roller 예제와 같이, 챗 인터페이스 내에서 UI를 통해 사용자와 상호작용할 수 있으며, Spring AI를 통해 MCP 앱 개발을 쉽게 할 수 있다.
향상된 사용자 경험(Enhanced User Experience): 챗 인터페이스의 유연성과 전통적인 UI의 직관성을 결합하여 사용자 경험을 향상시킨다.
다양한 활용 사례(Various Use Cases): 챗 인터페이스를 통해 AI와 대화하면서, UI를 통해 도구를 사용하고 워크플로우를 실행할 수 있다.
Spring AI의 지원: Spring AI를 통해 MCP 앱 개발을 쉽게 할 수 있으며, @McpResource 및 @McpTool 어노테이션(Annotation)을 사용하여 MCP 서버를 구현할 수 있다.
결론적으로, MCP 앱은 AI와의 상호작용을 혁신하고, 챗 인터페이스의 활용 범위를 넓히는 데 기여한다.
MCP 앱(MCP App) 배포 및 운영 고려 사항
MCP 앱을 배포하고 운영하기 위해서는 MCP 서버의 설정과 MCP 클라이언트의 호환성을 고려해야 한다. Streamable HTTP 전송 방식을 지원하는 MCP 클라이언트를 사용해야 하며, Claude Desktop과 같은 클라이언트를 사용할 경우, mcp-remote를 사용하여 프록시 설정을 해야 한다.
MCP 서버 설정(MCP Server Configuration): spring.ai.mcp.server.protocol 및 server.port 설정을 통해 MCP 서버의 전송 방식과 포트를 설정한다.
MCP 클라이언트 호환성(MCP Client Compatibility): Streamable HTTP 전송 방식을 지원하는 MCP 클라이언트를 사용하고, Claude Desktop과 같은 클라이언트를 사용할 경우, 프록시 설정을 해야 한다.
테스트 및 디버깅(Testing and Debugging): MCP 앱을 테스트하고 디버깅하기 위해, MCP 클라이언트와 MCP 서버 간의 통신을 확인하고, UI의 동작을 검증한다.
결과적으로, MCP 앱의 배포 및 운영은 MCP 서버와 MCP 클라이언트의 호환성을 고려하여, 안정적인 서비스를 제공하는 것이 중요하다.
