ShaderToy MCP 서버

“ShaderToy” MCP 서버는 무엇을 하나요?

ShaderToy-MCP는 AI 어시스턴트와 ShaderToy(인기 있는 GLSL 셰이더 제작·실행·공유 웹사이트)를 연결하기 위해 설계된 MCP(모델 컨텍스트 프로토콜) 서버입니다. MCP를 통해 Claude와 같은 LLM(대형 언어 모델)을 ShaderToy에 연결하면 AI가 ShaderToy 전체 웹 페이지를 질의·읽을 수 있어, 단독일 때보다 복잡한 셰이더를 생성·개선할 수 있습니다. 이 통합은 ShaderToy 콘텐츠에 원활히 접근함으로써 셰이더 아티스트와 AI 개발자의 개발 워크플로우를 강화하며, 더욱 정교한 셰이더 제작, 탐색, 공유를 가능하게 합니다.

프롬프트 목록

저장소에 프롬프트 템플릿 관련 정보가 제공되지 않습니다.

리소스 목록

사용 가능한 파일 또는 문서에서 명시적 리소스 정의를 찾을 수 없습니다.

도구 목록

저장소에 MCP 도구 세부 정보를 포함한 명시적 도구 목록이나 server.py 파일이 없습니다.

이 MCP 서버의 활용 사례

• 셰이더 생성: AI 어시스턴트가 ShaderToy 저장소를 질의·참조하여 복잡한 GLSL 셰이더를 생성할 수 있습니다.
• 셰이더 탐색: AI의 요약 및 설명 기능으로 ShaderToy 셰이더를 더욱 효율적으로 탐색하고 분석할 수 있습니다.
• 창의적 코딩 지원: MCP를 통해 AI가 ShaderToy 예제 및 문서를 참고해 셰이더 코드 디버깅이나 확장에 도움을 줄 수 있습니다.
• AI 제작 셰이더 공유: AI가 생성한 셰이더를 바로 ShaderToy에 공유할 수 있어, AI 창작과 커뮤니티 공유의 선순환을 완성합니다.

설치 방법

Windsurf

1. Node.js와 Windsurf가 설치되어 있는지 확인하세요.
2. .windsurf/config.json 설정 파일을 찾으세요.
3. 다음 JSON 스니펫으로 ShaderToy MCP 서버를 추가하세요:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 파일을 저장하고 Windsurf를 재시작하세요.
5. Windsurf 인터페이스에서 설정이 적용되었는지 확인하세요.

Claude

1. Claude와 Node.js가 설치되어 있는지 확인하세요.
2. Claude의 config.json 설정을 편집하세요.
3. ShaderToy MCP 서버 구성 스니펫을 삽입하세요:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 설정을 저장 후 Claude를 재시작하세요.
5. Claude 인터페이스에서 서버가 사용 가능한지 확인하세요.

Cursor

1. Node.js와 Cursor를 설치하세요.
2. 사용자 디렉터리에서 cursor.config.json을 찾으세요.
3. 아래 스니펫을 추가하세요:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 저장 후 Cursor를 재시작하세요.
5. 서버 목록에 ShaderToy MCP 서버가 표시되는지 확인하세요.

Cline

1. Node.js와 Cline을 설치하세요.
2. .cline/config.json 파일을 여세요.
3. ShaderToy MCP 서버를 추가하세요:

   {
     "mcpServers": {
       "shadertoy": {
         "command": "npx",
         "args": ["@shadertoy/mcp-server@latest"]
       }
     }
   }
   

4. 저장 후 Cline을 재시작하세요.
5. Cline의 진단 기능으로 서버가 실행 중인지 확인하세요.

API 키 보안 예시

{
  "mcpServers": {
    "shadertoy": {
      "command": "npx",
      "args": ["@shadertoy/mcp-server@latest"],
      "env": {
        "SHADERTOY_API_KEY": "${SHADERTOY_API_KEY}"
      },
      "inputs": {
        "apiKey": "${SHADERTOY_API_KEY}"
      }
    }
  }
}

참고: 보안을 위해 API 키는 환경 변수에 저장하세요.

플로우 내에서 MCP 사용 방법

FlowHunt에서 MCP 사용하기

FlowHunt 워크플로우에 MCP 서버를 통합하려면, MCP 컴포넌트를 플로우에 추가하고 AI 에이전트와 연결하세요:

MCP 컴포넌트를 클릭해 설정 패널을 엽니다. 시스템 MCP 설정 영역에 다음 JSON 형식으로 MCP 서버 정보를 입력하세요:

{
  "shadertoy": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

구성을 마치면 AI 에이전트가 MCP의 모든 기능과 역량을 도구로 사용할 수 있습니다. “shadertoy"를 실제 MCP 서버 이름으로 바꾸고 URL도 본인의 MCP 서버 주소로 변경하세요.

요약

위 내용을 종합하면 ShaderToy-MCP는 명확한 개요와 설치 안내를 제공하지만, 프롬프트 템플릿, 도구, 리소스에 대한 문서는 부족합니다. LLM과 ShaderToy를 연결하는 것이 주된 가치이며, 보다 확장된 문서와 명시적 MCP 기능 지원이 보완된다면 좋겠습니다. 일반 MCP 유틸리티 및 문서화 점수는 4/10으로 평가합니다.

MCP 점수