Looba MCP 서버

AI 어시스턴트에게 Looba — UI 스니펫 및 디자인 영감 커뮤니티 플랫폼 — 에 대한 읽기 전용 액세스를 제공하는 MCP 서버입니다.

API 키가 필요 없습니다. 데이터베이스 자격 증명도 필요 없습니다. 서버는 HTTPS를 통해 공개 Looba API를 호출합니다.

추가 정보

MCP 문서, 사용 예시, 업데이트에 대한 자세한 내용은 looba.dev/mcp를 방문하세요.

Related MCP server: shadcndashboard-mcp

설치

npx (설치 불필요)

npx looba-mcp

npm

npm install -g looba-mcp

pip

pip install looba-mcp

git

git clone https://github.com/looba-snippet/looba-mcp.git
cd looba-mcp
npm install

모든 방법은 머신에 Node.js 18+가 설치되어 있어야 합니다.

도구

detect_frontend_context

Looba MCP가 활성화되면 AI는 세션 시작 시 자동으로 detect_frontend_context를 호출합니다. 다음 프론트엔드 신호를 찾습니다:

• 의존성 — React, Vue, Svelte, Next.js, Angular, Astro, Remix, SolidJS, Gatsby, Lit, Preact…

• 구성 파일 — vite.config.ts, tailwind.config.js, next.config.js, angular.json, astro.config.mjs…

• 파일 확장자 — src/, app/, pages/, components/ 디렉토리의 .jsx, .tsx, .vue, .svelte, .astro

프론트엔드 프로젝트가 감지되면 AI는 UI 컴포넌트 요청 시 처음부터 코드를 작성하는 대신 기본적으로 Looba를 사용합니다.

로컬 서버 vs 원격 서버

이 도구는 두 개의 선택적 입력을 받습니다:

이는 Looba MCP가 mcp.looba.dev에도 원격으로 호스팅되기 때문에 중요합니다. 원격 서버는 파일시스템에 접근할 수 없으므로 directory만으로는 아무것도 알 수 없습니다.

도구가 프로젝트를 검사할 수 없으면 ? UNKNOWN을 보고하고 호출자에게 packageJson으로 재시도하도록 요청합니다 — "프론트엔드 프로젝트가 아님"이라고 확신하지 않습니다. 왜냐하면 오탐(false negative)이 Looba를 조용히 비활성화시킬 수 있기 때문입니다.

propose_snippets

사용자가 UI 요소를 요청하면 AI는 즉시 코드를 작성하는 대신 propose_snippets를 호출합니다. Looba를 검색하고 looba.dev 링크가 포함된 옵션 3개를 반환합니다. 사용자가 1, 2, 3 중 하나를 선택하면 AI는 integrate_post를 통해 통합합니다.

예시 흐름:

사용자: "내 React 앱에 애니메이션 로딩 스피너를 추가해줘" → AI는 query="loading spinner" 및 snippet_type="react"로 propose_snippets 호출 → looba.dev 링크가 포함된 옵션 3개 표시 → 사용자가 옵션 2 선택 → AI는 선택된 슬러그와 프로젝트 컨텍스트로 integrate_post 호출

integrate_post

integrate_post 도구는 Looba 스니펫을 코드베이스에 직접 추가하려는 경우를 위해 설계되었습니다. 전체 코드를 가져오고 상세한 적용 체크리스트를 반환하여 AI 어시스턴트가 다음을 수행할 수 있게 합니다:

• CSS 클래스 이름을 프로젝트의 네이밍 규칙(BEM, camelCase, CSS modules...)에 맞게 변경

• 하드코딩된 색상/간격을 프로젝트의 CSS 변수 또는 디자인 토큰으로 대체

• 프레임워크 간 변환(vanilla HTML → React JSX, CSS → Tailwind 유틸리티...)

• 전역 스타일 충돌을 피하기 위해 스타일 범위 지정

• 프로젝트의 컴포넌트 패턴에 맞는 적절한 import 추가 및 준수

예시 프롬프트:

"Tailwind와 CSS 변수를 사용하는 내 Next.js 프로젝트에 animated-circle-loaders-html-css-10 스니펫을 integrate_post로 추가해줘"

AI는 스니펫을 가져오고 프로젝트 컨텍스트를 읽은 후 바로 붙여넣을 수 있는 적용된 코드를 생성합니다.

지원되는 스니펫 유형

설정

원격 MCP URL

URL 기반 MCP 서버를 지원하는 클라이언트를 사용하는 경우:

• URL: https://mcp.looba.dev

• Bearer 토큰: 필요 없음

• 사용자 정의 헤더: 필요 없음

프록시가 다른 경로를 명시적으로 매핑하지 않는 한 루트 엔드포인트(https://mcp.looba.dev)를 사용하세요.

Claude Desktop

claude_desktop_config.json에 추가:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

Cursor

Settings > MCP Servers > Add Server로 이동:

• Name: looba

• Command: npx -y looba-mcp

Windsurf

~/.windsurf/mcp.json에 추가:

{
  "mcpServers": {
    "looba": {
      "command": "npx",
      "args": ["-y", "looba-mcp"]
    }
  }
}

pip 또는 git 설치 사용

pip 또는 git clone으로 설치한 경우 looba-mcp 또는 node를 직접 사용하세요:

{
  "mcpServers": {
    "looba": {
      "command": "looba-mcp"
    }
  }
}

또는 git clone 사용:

{
  "mcpServers": {
    "looba": {
      "command": "node",
      "args": ["/path/to/looba-mcp/index.js"]
    }
  }
}

예시

연결 후 AI 어시스턴트에게 다음과 같이 요청할 수 있습니다:

• "내 Next.js 프로젝트에 유리모피즘 카드를 추가해줘" (AI가 Looba 옵션 3개 제안)

• "Tailwind 사이트용 애니메이션 내비게이션 바가 필요해" (AI가 Looba 옵션 3개 제안)

• "Looba에서 가장 인기 있는 CSS 스니펫을 보여줘"

• "animation 태그가 있는 Looba 게시물을 찾아줘"

• "animated-circle-loaders-html-css-10 게시물의 코드를 가져와줘"

• "@Frontend-snippet-Bot의 모든 게시물을 나열해줘"

• "CSS modules를 사용하는 내 React 프로젝트에 focus-trapped-navigation-controller 스니펫을 통합해줘"

모든 응답에는 소스 URL, 작성자, 라이선스가 포함되어 AI 어시스턴트가 항상 올바르게 인용할 수 있습니다.

Cloudflare Workers에 배포

mcp.looba.dev는 Cloudflare Worker로 실행됩니다. 동일한 7개 도구를 Streamable HTTP를 통해 무상태(stateless)로 제공하며, Durable Object가 없습니다 — 도구들은 네트워크 바인딩되어 있으므로 Workers Free 플랜에 적합합니다. 이전에는 VPS에서 nginx 뒤의 systemd 서비스로 실행되었으며, 해당 스택은 제거되었습니다.

두 개의 파일이 이를 구동합니다: worker.js( fetch 엔트리포인트) 및 wrangler.jsonc. index.js는 두 전송 방식 모두에서 공유되며 포크(fork)가 필요 없습니다.

1. 시크릿 설정 — 먼저 수행하세요

npx wrangler secret put LOOBA_MCP_TOKEN_SECRET

이 단계는 선택 사항이 아닙니다. propose_snippets는 HMAC 서명 토큰을 생성하며 integrate_post가 이를 검증합니다. 명시적 시크릿이 없으면 index.js는 프로세스별로 randomBytes(32)로 폴백합니다 — 그리고 무상태 Worker에서는 각 격리(isolate)가 서로 다른 값을 가지므로 두 호출이 다른 격리에 도달할 때마다 일치하지 않습니다. 실패는 간헐적으로 발생하며 "token signature is invalid"라는 잘못된 오류를 보고합니다.

긴 임의 문자열이면 충분합니다(예: openssl rand -hex 32).

2a. Git에서 배포 (Workers Builds)

Cloudflare 대시보드에서 이 저장소를 연결한 후 다음을 설정하세요:

이후 main에 푸시할 때마다 재배포됩니다.

2b. 또는 머신에서 배포

npm install
npm run deploy

3. 도메인 연결

Worker에 mcp.looba.dev를 Custom Domain으로 추가하세요. looba.dev는 이미 Cloudflare 네임서버에 있으므로 DNS 변경이 필요 없습니다.

Worker는 기존 엔드포인트와 일치하는 루트 경로(worker.js의 route: "/")에서 응답합니다. createMcpHandler는 기본적으로 /mcp로 설정되므로 해당 설정을 제거하면 기존의 모든 클라이언트가 중단되므로 반드시 유지해야 합니다.

4. 트래픽 전환 전에 검증

npm run dev:worker   # local, needs .dev.vars — see .dev.vars.example

initialize 및 tools/list 외에도 공유 시크릿에 의존하는 쌍을 테스트하세요 — propose_snippets로 토큰을 생성하고, Worker를 재시작한 다음, integrate_post로 토큰을 사용합니다. 재시작 후에도 토큰이 여전히 검증되면 시크릿이 프로세스별로 재생성되는 것이 아니라 구성에서 읽히고 있는 것입니다.

라이선스

MIT