MCP 서버

Todae는 https://todae.omsoo.design/api/mcp에서 Model Context Protocol(MCP) 서버를 운영합니다. 여기에 연결한 AI 에이전트는 Todae의 컴포넌트, 레시피, 토큰을 찾아보고, 두 버전 사이에 무엇이 바뀌었는지 확인하고, 회사의 토큰 파일을 todae-tokens build와 같은 빌드로 검사하고, Todae 위에 만드는 디자인 시스템의 시작 파일을 작성할 수 있습니다. Streamable HTTP로 통신하며 로그인이나 설치가 필요 없습니다. 이 서버는 npm에 올라간 @tounsoo/todae의 최신 버전을 설명하고 그 버전을 자기 버전으로 알려 주므로, main의 변경은 다음 릴리스와 함께 반영됩니다.

이 페이지의 내용

연결하기

Claude Code

프로젝트 폴더에서 서버를 추가합니다.

claude mcp add --transport http todae https://todae.omsoo.design/api/mcp

--scope project를 붙이면 프로젝트의 .mcp.json에 저장되어, 저장소에서 작업하는 모든 사람이 함께 씁니다.

{
  "mcpServers": {
    "todae": { "type": "http", "url": "https://todae.omsoo.design/api/mcp" }
  }
}

Claude Desktop과 claude.ai

Settings에서 Connectors를 열고 Add custom connector를 고른 뒤, URL에 https://todae.omsoo.design/api/mcp를 입력합니다.

Cursor

프로젝트의 .cursor/mcp.json에, 또는 모든 프로젝트에서 쓰려면 ~/.cursor/mcp.json에 서버를 추가합니다.

{
  "mcpServers": {
    "todae": { "url": "https://todae.omsoo.design/api/mcp" }
  }
}

VS Code

프로젝트의 .vscode/mcp.json에 서버를 추가합니다.

{
  "servers": {
    "todae": { "type": "http", "url": "https://todae.omsoo.design/api/mcp" }
  }
}

다른 클라이언트

Streamable HTTP를 지원하는 클라이언트에는 URL을 그대로 넣습니다. stdio로 로컬 서버만 실행하는 클라이언트는 mcp-remote 같은 브리지를 거쳐 연결할 수 있습니다.

{
  "mcpServers": {
    "todae": { "command": "npx", "args": ["-y", "mcp-remote", "https://todae.omsoo.design/api/mcp"] }
  }
}

도구

컴포넌트:

list_components: 모든 컴포넌트, 파트, 훅, 헬퍼와 각각의 설명, 문서 페이지.
get_component: 컴포넌트나 파트 하나와 그 props, 파트.
when_to_use: 컴포넌트 문서 페이지의 "When to use" 섹션. 이 섹션이 없는 페이지는 status: "missing"을 돌려주며, 서버가 내용을 직접 지어내지 않습니다.

레시피:

list_recipes: 모든 레시피와 그 요약, 코드가 쓰는 export. 레시피는 데이터 테이블이나 위저드 같은 제품 흐름에 맞춰 Todae의 export를 엮는 문서 속 코드입니다.
get_recipe: 레시피 하나의 페이지 소스와 코드. data-table 같은 이름이나 제목으로 찾습니다.

토큰:

list_tokens: Todae 카탈로그의 토큰과 각각의 타입, 레이어, 컨텍스트, 그 토큰을 선언한 세트나 모디파이어, CSS 사용자 정의 속성, CSS 값, 설명. color.accent 같은 경로 접두사나 레이어로 거를 수 있습니다.
get_token: 토큰 하나의 용도, 그 토큰을 선언한 세트나 모디파이어, 컨텍스트별 값(light, dark 등)과, 그 토큰을 값에서 읽는 토큰들.
get_contrast_pairs: Todae의 APCA 쌍. 쌍마다 최소 Lc와 Todae 기본 테마에서 잰 값을 함께 줍니다. 회사 토큰 패키지는 이 쌍을 물려받으며, 쌍의 최소값을 바꾸거나 쌍을 추가할 수 있습니다.

디자인 시스템 만들기:

build_tokens: 회사 토큰 패키지에 todae-tokens build를 실행합니다. .json 파일마다 토큰 폴더 안의 경로로 넘기고, 리졸버가 resolver.json이 아니면 resolver로 그 경로를 알려 줍니다. CSS 선택자인 scope는 --scope처럼 페이지 일부에 쓸 테마를 빌드합니다. 테마 CSS와 THEME_OVERRIDE_TYPES 모듈을 돌려주거나, 기준에 못 미치는 대비 쌍을 나열한 빌드 오류를 돌려줍니다.
scaffold_design_system: 회사 리졸버와 토큰 파일을 작성합니다. name을 받고, 선택적으로 바꿀 appearance 색(light와 dark의 OKLCH 채널), secondary를 복사해 시작하는 새 버튼 variant, comfortable을 복사해 시작하는 새 density를 받습니다. 토큰 파일은 tokens 폴더 안의 경로로, build_tokens가 받는 모양 그대로 돌려주고, 새 variant와 density 이름을 선언하는 src/todae.d.ts, 토큰 파일을 빌드한 결과도 함께 돌려줍니다.
get_guide: Todae 위에 만드는 방법을 다룬 문서 페이지의 소스: get-started, build-on-todae, tokens, css-layers, composition, platform, mcp.

업그레이드:

get_changes: 설치된 버전(예: 0.2.0)인 from 이후부터 to까지, to를 생략하면 최신 릴리스까지 각 릴리스의 변경 기록 항목. 릴리스는 오래된 것부터 나오고, 릴리스마다 호환성을 깨는 변경을 나머지와 따로 줍니다. 1.0 전에는 마이너 릴리스가 호환성을 깨는 릴리스입니다.

에이전트와 디자인 시스템 만들기

원하는 디자인 시스템을 에이전트에게 요청합니다. 예를 들면 다음과 같습니다.

todae MCP로 Todae 위에 acme라는 디자인 시스템을 시작해 줘. light와 dark 모두 강조색을 짙은 빨강으로 하고, outline 버튼 variant를 추가하고, 빌드가 알려 주는 대비 쌍을 고쳐 줘. 파일은 이 저장소에 저장해 줘.

이 도구들을 가진 에이전트는 get_guide로 Todae로 디자인 시스템 만들기를 읽고, list_tokens로 바꿀 토큰을 찾고, scaffold_design_system으로 파일을 작성한 다음, 파일을 고칠 때마다 빌드가 통과할 때까지 build_tokens로 검사할 수 있습니다. 파일은 에이전트가 저장합니다. 서버는 여러분의 컴퓨터에 아무것도 쓰지 않습니다.

그다음 프로젝트에서 todae-tokens CLI로 파일을 빌드하고, Todae로 디자인 시스템 만들기에 나온 대로 Todae의 CSS 다음에 CSS를 불러옵니다.

에이전트와 업그레이드하기

에이전트에게 업그레이드를 요청하세요. 예를 들어:

todae MCP로 이 저장소의 @tounsoo/todae를 최신 버전으로 올리고, 호환성을 깨는 변경에 맞게 코드를 고쳐 줘.

에이전트는 node_modules/@tounsoo/todae/package.json이나 lockfile에서 설치된 버전을 찾고(내 package.json의 ^0.2.0 같은 범위가 아니라), 그 버전으로 get_changes를 호출한 뒤, 릴리스마다 호환성을 깨는 변경을 순서대로 처리할 수 있습니다.

제한

build_tokens와 scaffold_design_system은 토큰 파일을 서버의 임시 폴더에 쓰고, 호출이 끝나면 그 폴더를 지웁니다. build_tokens는 파일을 최대 64개, 모두 합쳐 512 KB까지 받습니다. 10초보다 오래 걸리는 빌드는 중단되며, 서버가 다른 빌드로 바쁠 때 온 호출에는 다시 시도하라고 알려 줍니다.

컴포넌트 도구와 가이드 도구는 영어 문서 페이지를 읽으므로, 그 내용은 영어입니다.