스틸 MCP 서버

https://github.com/user-attachments/assets/25848033-40ea-4fa4-96f9-83b6153a0212

Claude와 같은 LLM이 Puppeteer 기반 도구와 Steel을 통해 웹을 탐색할 수 있도록 하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. Web Voyager 프레임워크를 기반으로 클릭, 스크롤, 타이핑 등 모든 표준 웹 액션과 스크린샷 촬영을 위한 도구를 제공합니다.

Claude에게 다음과 같은 작업에 대한 도움을 요청하세요.

• "레시피를 검색하고 재료 목록을 저장하세요"
• "패키지 배송 상태 추적"
• "특정 제품의 가격을 찾아 비교하세요"
• "온라인 구직 신청서를 작성하세요"

🚀 빠른 시작

다음은 Claude Desktop에서 Steel Voyager를 실행하는 간단한 가이드입니다. Steel Cloud와 로컬/자체 호스팅 인스턴스 간에 전환하려면 환경 옵션만 조정하면 됩니다.

필수 조건

1. 최신 버전의 Git 및 Node.js가 설치되었습니다.
2. Claude Desktop 설치됨
3. (선택 사항) 자체 호스팅을 계획하는 경우 로컬에서 실행되는 Steel Docker 이미지
4. (선택 사항) Steel Cloud를 사용하는 경우 API 키를 가져오세요. 여기에서 키를 받으세요.

A) 퀵스타트(스틸클라우드)

1. 프로젝트를 복제하고 빌드합니다.지엑스피1
2. 서버 항목을 추가하여 Claude Desktop( ~/Library/Application Support/Claude/claude_desktop_config.json )을 구성합니다.
   { "mcpServers": { "steel-puppeteer": { "command": "node", "args": ["path/to/steel-voyager/dist/index.js"], "env": { "STEEL_LOCAL": "false", "STEEL_API_KEY": "YOUR_STEEL_API_KEY_HERE", "GLOBAL_WAIT_SECONDS": "1" } } } }
   • "YOUR_STEEL_API_KEY_HERE"를 유효한 Steel API 키로 바꾸세요.
   • 클라우드 모드에서는 "STEEL_LOCAL"이 "false"로 설정되어 있는지 확인하세요.
3. Claude Desktop을 시작하세요. 자동으로 MCP 서버가 클라우드 모드로 실행됩니다.
4. (선택 사항) 대시보드 에서 활성 Steel Browser 세션을 보거나 관리할 수 있습니다.

B) 빠른 시작(로컬/셀프 호스팅 스틸)

1. 로컬 또는 자체 호스팅 Steel 서비스가 실행 중인지 확인하세요(예: 오픈 소스 Steel Docker 이미지 사용).
2. 프로젝트를 복제하고 빌드합니다(아직 완료되지 않았다면 위와 동일):
   git clone https://github.com/steel-dev/steel-mcp-server.git cd steel-mcp-server npm install npm run build
3. 로컬 모드에 대해 Claude Desktop( ~/Library/Application Support/Claude/claude_desktop_config.json )을 구성합니다.
   { "mcpServers": { "steel-puppeteer": { "command": "node", "args": ["path/to/steel-voyager/dist/index.js"], "env": { "STEEL_LOCAL": "true", "STEEL_BASE_URL": "http://localhost:3000", "GLOBAL_WAIT_SECONDS": "1" } } } }
   • "STEEL_LOCAL"은 "true"여야 합니다.
   • 클라우드 서버에서 셀프 호스팅하는 경우 "STEEL_BASE_URL"을 로컬/셀프 호스팅 Steel URL을 가리키도록 구성하세요.
4. Claude Desktop을 시작하면 로컬에서 실행 중인 Steel에 연결되고 Steel Voyager가 로컬 모드로 실행됩니다.
5. (선택 사항) 로컬에서 세션을 보려면 자체 호스팅 대시보드( localhost:5173 )를 방문하거나 Steel 런타임 환경에 대한 로그를 확인하세요.

이제 끝입니다! Claude Desktop이 시작되면 백그라운드에서 MCP 서버를 조정하고 Steel Voyager를 통해 웹 자동화 기능과 상호 작용할 수 있습니다.

설정에 대한 자세한 내용을 보거나 문제가 있는 경우 MCP 설정 문서를 확인하세요: https://modelcontextprotocol.io/quickstart/user

구성 요소

도구

• 탐색하다
  • 브라우저에서 모든 URL로 이동합니다.
  • 입력:
    • url (문자열, 필수): 이동할 URL(예: " https://example.com ").
• 찾다
  • " https://www.google.com/search?q=encodedQuery "로 이동하여 Google 검색을 수행하세요.
  • 입력:
    • query (문자열, 필수): Google에서 검색할 텍스트입니다.
• 딸깍 하는 소리
  • 번호가 매겨진 레이블을 사용하여 페이지의 요소를 클릭합니다.
  • 입력:
    • label (숫자, 필수): 클릭할 요소의 레이블 번호입니다.
• 유형
  • 번호가 매겨진 레이블을 사용하여 입력 필드에 텍스트를 입력합니다.
  • 입력:
    • label (숫자, 필수): 입력 필드의 레이블 번호입니다.
    • text (문자열, 필수): 필드에 입력할 텍스트입니다.
    • replaceText (부울, 선택 사항): true인 경우 필드에 있는 기존 텍스트를 모두 바꿉니다.
• 아래로 스크롤
  • 페이지를 아래로 스크롤하세요
  • 입력:
    • pixels (정수, 선택 사항): 아래로 스크롤할 픽셀 수입니다. 지정하지 않으면 한 페이지 전체가 스크롤됩니다.
• 위로 스크롤
  • 페이지를 위로 스크롤하세요
  • 입력:
    • pixels (정수, 선택 사항): 위로 스크롤할 픽셀 수입니다. 지정하지 않으면 한 페이지 전체가 스크롤됩니다.
• 돌아가다
  • 브라우저 기록에서 이전 페이지로 이동합니다.
  • 입력이 필요하지 않습니다
• 기다리다
  • 최대 10초 동안 기다리세요. 느리게 로드되는 페이지나 동적 콘텐츠가 나타나는 데 더 많은 시간이 필요한 페이지에 유용합니다.
  • 입력:
    • seconds (숫자, 필수): 대기할 시간(초)(0~10).
• 저장_표시되지_않은_스크린샷
  • 테두리 상자나 강조 표시 없이 현재 페이지를 캡처하여 리소스로 저장합니다.
  • 입력:
    • resourceName (문자열, 선택 사항): 스크린샷을 저장할 이름입니다(예: "before_login"). 생략하면 일반 이름이 자동으로 생성됩니다.

자원

• 스크린샷 : 저장된 각 스크린샷은 다음 형식의 MCP 리소스 URI를 통해 액세스할 수 있습니다. • screenshot://RESOURCE_NAME서버는 "save_unmarked_screenshot" 도구를 지정하거나 (대부분의 도구에서) 주석이 달린 스크린샷으로 작업이 종료될 때마다 이러한 스크린샷을 저장합니다. 이러한 이미지는 표준 MCP 리소스 검색 요청을 통해 가져올 수 있습니다.

(참고: 콘솔 로그는 분석 및 디버깅을 위해 계속 수집되지만, 이 구현에서는 검색 가능한 리소스로 노출되지 않습니다. 서버 로그에 나타나지만 MCP 리소스 URI를 통해 제공되지는 않습니다.)

주요 특징

• Puppeteer를 사용한 브라우저 자동화
• 브라우저 세션 관리를 위한 Steel 통합
• 번호가 매겨진 레이블을 통한 시각적 요소 식별
• 스크린샷 기능
• 기본 웹 상호작용(탐색, 클릭, 양식 작성)
• 스크롤을 통한 레이지 로딩 지원
• 로컬 및 원격 Steel 인스턴스 지원

경계 상자 이해

Steel Puppeteer는 페이지와 상호 작용할 때 상호 작용 요소를 식별하는 데 도움이 되는 시각적 오버레이를 추가합니다.

• 각 대화형 요소(버튼, 링크, 입력)에는 고유한 번호가 매겨진 레이블이 지정됩니다.
• 색상 상자는 요소의 경계를 나타냅니다.
• 레이블은 쉽게 참조할 수 있도록 요소 위나 내부에 표시됩니다.
• 클릭 또는 유형 작업에 대한 요소를 지정할 때 이 숫자를 사용하세요.

구성

Steel Voyager는 "로컬" 또는 "클라우드" 두 가지 모드로 실행될 수 있습니다. 이 동작은 환경 변수에 의해 제어됩니다. 간략한 개요는 다음과 같습니다.

로컬 모드

1. STEEL_LOCAL="true"로 설정합니다.
2. (선택 사항) 사용자 지정 도메인에서 Steel 서버를 호스팅하는 경우 STEEL_BASE_URL을 Steel 서버로 설정하세요. 그렇지 않으면 Steel Voyager는 기본적으로 http://localhost:3000 으로 접속합니다.
3. 이 모드에서는 API 키가 필요하지 않습니다.
4. Puppeteer는 ws://0.0.0.0:3000을 통해 연결합니다.

예:

STEEL_LOCAL="true"로 내보내기

export STEEL_BASE_URL=" http://localhost:3000 " # 재정의하는 경우에만

클라우드 모드

1. STEEL_LOCAL="false"로 설정합니다.
2. Steel Voyager가 Steel 클라우드 서비스(또는 STEEL_BASE_URL을 변경한 경우 자체 호스팅 Steel)에 인증할 수 있도록 STEEL_API_KEY를 설정합니다.
3. STEEL_BASE_URL의 기본값은 https://api.steel.dev 입니다. 다른 엔드포인트에서 실행되는 자체 호스팅 Steel 인스턴스가 있는 경우 이를 재정의하세요.
4. Puppeteer는 wss://connect.steel.dev?sessionId=…&apiKey=…를 통해 연결합니다.

예:

STEEL_LOCAL="false" 내보내기

STEEL_API_KEY="YOUR_STEEL_API_KEY_HERE"를 내보내세요

클로드 데스크톱 구성

Claude Desktop과 함께 Steel Voyager를 사용하려면 다음과 같은 내용을 구성 파일(일반적으로 ~/Library/Application Support/Claude/claude_desktop_config.json에 있음)에 추가하세요.

원하는 모드에 맞게 환경 변수를 조정하세요.

• 로컬/자체 호스팅으로 실행하는 경우 "STEEL_LOCAL": "true" 유지하고 선택적으로 "STEEL_BASE_URL": "http://localhost:3000" 유지합니다.
• 클라우드 모드에서 실행하는 경우 "STEEL_LOCAL": "true" 제거하고 "STEEL_LOCAL": "false" 추가하고 "STEEL_API_KEY": "<YourKey>" 제공합니다. 이렇게 하면 Claude Desktop이 올바른 모드에서 Steel Voyager를 시작할 수 있습니다.

설치 및 실행

Smithery를 통해 설치

Smithery 를 통해 Claude Desktop용 Steel MCP Server를 자동으로 설치하려면:

지역 개발

1. 저장소를 복제합니다
2. 종속성 설치:
   npm install
3. 프로젝트를 빌드하세요:
   npm run build
4. 서버를 시작합니다:
   npm start

사용 예시 📹

우리는 Claude에게 새로운 기능으로 우리에게 인상을 심어달라고 요청했고, Claude는 Sora를 사용하여 최신 개발 사항을 조사한 다음 모델의 데이터와 작동 방식을 보여주는 대화형 시각화를 만들기로 결정했습니다. 🤯

https://github.com/user-attachments/assets/8d4293ea-03fc-459f-ba6b-291f5b017ad7

*화질이 좋지 않아서 죄송합니다. github에서는 영상 크기를 10MB 이하로 유지하도록 강제하고 있습니다 :/

문제 해결

일반적인 문제 및 해결 방법:

1. 클라우드 서비스를 사용할 때 Steel API 키를 확인하고 로컬 Steel 인스턴스가 실행 중인지 확인하세요. 서비스에 대한 네트워크 연결이 원활한지 확인하세요.
2. 페이지가 렌더링되거나 마크업되어 Claude로 전송되는 방식에 문제가 있는 경우 GLOBAL_WAIT_SECONDS 환경 변수를 통해 구성에 지연을 추가해보세요.
3. 페이지가 완전히 로드되었는지 확인하고 뷰포트 크기 설정을 확인하세요. 스크린샷을 캡처하기에 충분한 시스템 메모리가 있는지 확인하세요.
4. 현재 세션 정리가 최선이 아니므로 작업을 실행하기 위해 세션이 시작되면 수동으로 세션을 해제해야 할 수도 있습니다.
5. 클로드에게 올바른 방식으로 촉구하는 것은 성과를 크게 향상시키고, 이로 인해 발생할 수 있는 어리석은 실수를 피하는 데 도움이 될 수 있습니다.
6. 세션 뷰어를 활용하여 모델이 어디에서 중단되는지 분석하세요.
7. 브라우저에서 15~20회 정도 작업을 수행한 후, Claude의 컨텍스트 창이 이미지로 가득 차면서 속도가 느려지기 시작합니다. 심각한 문제는 아니지만, 특히 Claude 데스크톱 클라이언트가 지연되는 등 약간의 지연 현상이 나타났습니다.

기여하다

이 프로젝트는 실험적이며 활발하게 개발 중입니다. 여러분의 참여를 환영합니다!

1. 저장소를 포크하세요
2. 기능 브랜치 생성
3. 풀 리퀘스트 제출

다음을 포함하세요.

• 변경 사항에 대한 명확한 설명
• 동기 부여
• 문서 업데이트

부인 성명

⚠️ 이 프로젝트는 실험적이며 Web Voyager 코드베이스를 기반으로 합니다. 프로덕션 환경에서의 사용은 사용자의 책임입니다.