HTML 태그 하나로 Claude + MCP를 웹앱에 붙이는 오픈소스 컴포넌트 만들어봤습니다

Claude를 웹앱 안에서 MCP 도구랑 연결해서 쓸 수 있으면 좋겠다 싶어서 mcp-drop이라는 걸 만들어봤습니다.

기본 아이디어는 이렇습니다. Claude Desktop이나 Cursor 같은 별도 앱 없이, 웹 컴포넌트 하나만 넣으면 Claude가 GitHub, Notion, Slack, Figma, PostgreSQL 같은 MCP 서버에 바로 접근할 수 있게 되는 거죠.

사용법은 꽤 단순한데요,

<mcp-drop
  mcp-servers='[{"name":"github","url":"..."}]'
></mcp-drop>

이렇게 태그 하나 넣으면 끝입니다. 내부적으로는 Anthropic API에 직접 연결해서 Claude가 메시지를 처리하고 MCP 도구를 호출하는 구조입니다.

패키지는 세 개로 나눴습니다.

아직 다듬을 부분이 있긴 한데, 기본적인 동작은 잘 되고 있습니다. 혹시 이런 방식으로 연결해보고 싶은 MCP 서버가 있으시면 알려주세요.

Claude를 웹앱 안에서 MCP 도구랑 연결해서 쓸 수 있으면 좋겠다 싶어서 mcp-drop이라는 걸 만들어봤습니다.

사용법은 꽤 단순한데요,

<mcp-drop
  mcp-servers='[{"name":"github","url":"..."}]'
></mcp-drop>

이렇게 태그 하나 넣으면 끝입니다. 내부적으로는 Anthropic API에 직접 연결해서 Claude가 메시지를 처리하고 MCP 도구를 호출하는 구조입니다.

패키지는 세 개로 나눴습니다.

아직 다듬을 부분이 있긴 한데, 기본적인 동작은 잘 되고 있습니다. 혹시 이런 방식으로 연결해보고 싶은 MCP 서버가 있으시면 알려주세요.

댓글