opencode CLI를 Bright Data Web MCP에 연결하는 방법

이 튜토리얼에서는 다음을 확인하게 됩니다:

오픈코드가 무엇인지, 어떤 기능을 제공하는지, 그리고 왜 크러시(Crush)와 혼동해서는 안 되는지.
웹 상호작용 및 데이터 추출 기능으로 확장하여 더욱 유용하게 활용하는 방법.
CLI에서 opencode를 Bright Data MCP 서버에 연결하여 강력한 AI 코딩 에이전트를 생성하는 방법.

자, 시작해 보겠습니다!

opencode란 무엇인가요?

오픈코드는 터미널용으로 개발된 오픈소스 AI 코딩 에이전트입니다. 특히 다음과 같이 작동합니다:

CLI 내 TUI(터미널 사용자 인터페이스)
Visual Studio Code, Cursor 등에 통합되는 IDE 확장 프로그램.
GitHub 확장 프로그램.

더 자세히 설명하면, opencode를 통해 다음과 같은 작업을 수행할 수 있습니다:

반응형 테마 적용 가능한 터미널 인터페이스 구성
LLM에 적합한 LSP(언어 서버 프로토콜) 로드.
동일한 프로젝트에서 여러 에이전트를 병렬로 실행합니다.
참조 또는 디버깅을 위해 모든 세션 링크 공유.
Anthropic 계정으로 로그인하여 Claude Pro 또는 Max 계정을 사용할 수 있으며, Models.dev를 통해 75개 이상의 다른 LLM 제공업체(로컬 모델 포함)와 통합할 수 있습니다.

보시다시피 CLI는 LLM에 구애받지 않습니다. 주로 Go와 TypeScript로 개발되었으며 GitHub에서 이미 20,000개 이상의 스타를 획득하여 커뮤니티 내 인기를 입증하고 있습니다.

참고: 본 기술은 원래 “opencode”였던 다른 프로젝트인 Crush와 혼동하지 마십시오. 명칭 분쟁에 대한 자세한 내용은 X에서 확인하세요. Crush를 찾고 계시다면 Bright Data 웹 MCP와 Crush를 통합하는 가이드를 참조하십시오.

Bright Data의 Web MCP를 opencode TUI에 통합하는 것이 중요한 이유

opencode에서 어떤 LLM을 구성하든, 모두 동일한 한계점을 공유합니다: 그들의 지식은 정적입니다. 그들이 훈련받은 데이터는 특정 시점의 스냅샷을 나타내며, 이는 빠르게 구식이 됩니다. 소프트웨어 개발과 같이 빠르게 변화하는 분야에서는 특히 그렇습니다.

이제 opencode CLI 어시스턴트에게 다음과 같은 능력을 부여한다고 상상해 보세요:

최신 튜토리얼과 문서를 가져올 수 있습니다.
코드를 작성하는 동안 실시간 가이드를 참조합니다.
로컬 파일을 탐색하듯 동적 웹사이트를 쉽게 탐색합니다.

바로 이러한 기능들이 Bright Data의 Web MCP에 연결함으로써 가능해집니다.

Bright Data 웹 MCP는 실시간 웹 상호작용 및 데이터 수집을 위해 설계된 60개 이상의 AI 지원 도구에 대한 접근을 제공하며, 모두 Bright Data AI 인프라로 구동됩니다.

Bright Data Web MCP에서 가장 많이 사용되는 두 가지 도구(무료 계정에서도 이용 가능)는 다음과 같습니다:

도구	설명
`scrape_as_markdown`	고급 추출 옵션으로 단일 웹페이지의 콘텐츠를 스크랩하여 결과 데이터를 마크다운 형식으로 반환합니다. 봇 탐지 및 CAPTCHA를 우회할 수 있습니다.
`search_engine`	Google, Bing 또는 Yandex에서 검색 결과를 추출합니다. SERP 데이터를 JSON 또는 마크다운 형식으로 반환합니다.

이 두 가지 외에도, 웹 페이지와 상호 작용하고(예: scraping_browser_click) LinkedIn, Amazon, Yahoo Finance, TikTok 등 여러 도메인에서 구조화된 데이터를 수집하는 55개 이상의 전문 도구가 있습니다. ool은 전문가의 URL이 주어지면 공개 LinkedIn 페이지에서 구조화된 프로필 정보를 검색합니다.

이제 opencode 내에서 Web MCP가 어떻게 작동하는지 확인해 보세요!

Bright Data의 Web MCP에 opencode 연결 방법

로컬에 opencode를 설치 및 구성하고 Bright Data Web MCP 서버와 통합하는 방법을 알아보세요. 결과적으로 60개 이상의 웹 도구에 접근할 수 있는 확장된 코딩 에이전트가 생성됩니다. 이 CLI 에이전트는 샘플 태스크에서 다음과 같은 작업을 수행하는 데 사용됩니다:

실시간으로 LinkedIn 제품 페이지를 스크래핑하여 실제 프로필 데이터를 수집합니다.
데이터를 로컬 JSON 파일에 저장합니다.
데이터를 불러와 처리하는 Node.js 스크립트 생성

아래 단계를 따라 해보세요!

참고: 이 튜토리얼 섹션은 CLI를 통한 opencode 사용에 중점을 둡니다. 그러나 문서에 언급된 대로 유사한 설정을 사용하여 IDE에 직접 통합할 수도 있습니다.

필수 사항

시작하기 전에 다음 사항을 확인하세요:

macOS 또는 Linux 환경 (Windows 사용자는 WSL을 사용해야 함).
Claude Pro 또는 Max 구독권, 또는 일부 자금과 API 키가 있는 Anthropic 계정 (이 튜토리얼에서는 Anthropic API 키를 사용하지만, 다른 지원되는 LLM도 구성할 수 있습니다).
로컬에 설치된 Node.js (최신 LTS 버전을 권장합니다).
API 키가 준비된 Bright Data 계정.

Bright Data 설정은 다음 단계에서 안내해 드리므로 당분간 걱정하지 마십시오.

다음은 선택 사항이지만 유용한 배경 지식입니다:

MCP(Machine Learning Control Panel)의 작동 방식에 대한 일반적인 이해.
Bright Data의 Web MCP 및 관련 도구에 대한 기본적인 이해.

1단계: opencode 설치

Unix 기반 시스템에 다음 명령어로 opencode 설치:

curl -fsSL https://opencode.ai/install | bash

이 명령은 https://opencode.ai/install에서 설치 프로그램을 다운로드하여 실행하여 시스템에 opencode를 설정합니다. 다른 가능한 설치 옵션도 살펴보세요.

다음 명령어로 opencode가 정상 작동하는지 확인하세요:

opencode

“실행 파일이 없습니다” 또는 “알 수 없는 명령어” 오류가 발생하면 시스템을 재시작한 후 다시 시도하십시오.

모든 것이 예상대로 작동하면 다음과 같은 메시지가 표시됩니다:

훌륭합니다! 이제 opencode를 사용할 준비가 되었습니다.

2단계: LLM 구성

opencode는 다양한 LLM에 연결할 수 있지만, 권장 모델은 Anthropic 제품입니다. Claude Max 또는 Pro 구독권, 또는 자금이 충전된 Anthropic 계정과 API 키가 있는지 확인하세요.

다음 단계에서는 API 키를 통해 opencode를 Anthropic 계정에 연결하는 방법을 보여드리지만, 지원되는 다른 LLM 통합도 동일하게 작동합니다.

/exit 명령어로 opencode 창을 닫은 후, 다음 명령어로 LLM 공급자와의 인증을 시작하세요:

opencode auth login

AI 모델 제공업체를 선택하라는 메시지가 표시됩니다:

Selecting the “Anthropic” provider in opencode

Enter 키를 눌러 “Anthropic”을 선택한 후 “수동으로 API 키 입력” 옵션을 선택하세요:

Selecting the “Manually enter API key” option

Anthropic API 키를 붙여넣고 Enter 키를 누르세요:

이제 LLM 구성이 완료되었습니다. opencode를 재시작하고 /models 명령어를 실행하면 Anthropic 모델을 선택할 수 있습니다. 예를 들어 “Claude Opus 4.1″을 선택하세요:

Enter 키를 누르면 다음과 같은 화면이 표시됩니다:

Selecting the “Claude Opus 4.1” model from Anthropic

이제 opencode가 설정된 Anthropic Claude Opus 4.1 모델을 사용하여 작동하는 것을 확인할 수 있습니다. 잘하셨습니다!

단계 #3: opencode 프로젝트 초기화

cd 명령어로 프로젝트 디렉터리로 이동한 후 해당 위치에서 opencode를 실행하세요:

cd <프로젝트 폴더 경로>
opencode

/init 명령어를 실행하여 opencode 프로젝트를 초기화하세요. 출력은 다음과 유사하게 표시됩니다:

특히 /init 명령어는 AGENTS.md 파일을 생성합니다. CLAUDE.md나 커서 규칙과 유사하게, 이 파일은 opencode에 대한 사용자 지정 지침을 제공합니다. 이러한 지침은 LLM의 컨텍스트에 포함되어 특정 프로젝트에 맞게 동작을 맞춤 설정합니다.

IDE(예: Visual Studio Code)에서 AGENTS.md 파일을 열면 다음과 같은 내용을 확인할 수 있습니다:

프로젝트 디렉토리 내에서 AI 코딩 에이전트가 작동하는 방식을 지시하기 위해 필요에 따라 커스터마이징하세요.

팁: AGENTS.md 파일은 프로젝트 폴더의 Git 저장소에 커밋해야 합니다.

단계 #4: Bright Data의 Web MCP 테스트

오픈코드 에이전트를 Bright Data 웹 MCP 서버와 통합하기 전에, 이 서버의 작동 방식과 사용 중인 컴퓨터에서 실행 가능한지 여부를 이해하는 것이 중요합니다.

아직 계정이 없다면 Bright Data 계정 생성을 먼저 시작하세요. 이미 계정이 있다면 로그인만 하면 됩니다. 빠른 설정을 위해 계정의 “MCP” 페이지를 확인하세요:

The Bright Data “MCP” page in your account

그렇지 않은 경우 아래 지침을 따르세요.

이제 Bright Data API 키를 생성하세요. 곧 필요할 수 있으니 안전한 곳에 보관하세요. 여기서는 통합을 쉽게 하기 위해 관리자 권한이 있는 API 키를 사용한다고 가정하겠습니다.

터미널에서 @brightdata/mcp 패키지를 통해 Web MCP를 전역으로 설치하세요:

npm install -g @brightdata/mcp

다음 Bash 명령어로 로컬 MCP 서버가 작동하는지 확인하세요:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

<YOUR_BRIGHT_DATA_API> 자리 표시자를 실제 Bright Data API 토큰으로 대체하세요. 이 명령어는 필수 API_TOKEN 환경 변수를 설정한 후 @brightdata/mcp 패키지를 통해 Web MCP를 실행합니다.

성공 시 다음과 유사한 로그가 표시됩니다:

첫 실행 시 패키지는 Bright Data 계정에 두 개의 기본 영역을 자동으로 설정합니다:

mcp_unlocker: 웹 언로커용 영역.
mcp_browser: 브라우저 API용 영역입니다.

이 두 영역은 Web MCP가 제공하는 모든 도구를 실행하는 데 필수적입니다.

위 두 영역이 생성되었는지 확인하려면 Bright Data 계정에 로그인하세요. 대시보드에서 “프록시 및 스크래핑 인프라” 페이지로 이동하면 테이블에 두 영역이 표시됩니다:

The mcp_unlocker and mcp_browser zones created by the Web MCP at startup

참고: API 토큰에 관리자 권한이 없는 경우, 이 영역들이 자동으로 생성되지 않을 수 있습니다. 이 경우, 패키지의 GitHub 페이지에 설명된 대로 대시보드에서 수동으로 설정하고 환경 변수를 통해 이름을 지정할 수 있습니다.

기본적으로 MCP 서버는 search_engine 및 scrape_as_markdown 도구만 노출합니다(무료로 사용 가능!).

브라우저 자동화 및 구조화된 데이터 피드 검색과 같은 고급 기능을 사용하려면 Pro 모드를 활성화해야 합니다. 이를 위해 MCP 서버 실행 전에 PRO_MODE=true 환경 변수를 설정하세요:

API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp

중요: 프로 모드를 활성화하면 60개 이상의 모든 도구를 이용할 수 있습니다. 반면 프로 모드는 무료 계정에 포함되지 않으며 추가 요금이 부과됩니다.

완벽합니다! 이제 웹 MCP 서버가 여러분의 머신에서 작동함을 확인했습니다. 서버 프로세스를 중지하세요. 이제 opencode를 구성하여 서버를 자동으로 실행하고 연결할 예정입니다.

단계 #5: Web MCP를 opencode에 통합하기

opencode는 설정 파일의mcp 항목을 통해 MCP 통합을 지원합니다. 두 가지 지원되는 설정 방식을 기억하세요:

전역 설정: ~/.config/opencode/opencode.json 파일을 통해 적용됩니다. 테마, 제공자, 키 바인딩과 같은 설정에 유용합니다.
프로젝트별: 프로젝트 디렉토리 내의 로컬 opencode.json 파일을 통해 설정합니다.

로컬에서 MCP 통합을 구성한다고 가정합니다. 작업 디렉터리 내에 opencode.json 파일을 생성하세요.

그런 다음 파일을 열고 다음 내용이 포함되어 있는지 확인하세요:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "brightData": {
      "type": "local",
      "enabled": true,
      "command": [
        "npx",
        "-y",
        "@brightdata/mcp"
      ],
      "environment": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

<YOUR_BRIGHT_DATA_API_KEY> 를 앞서 생성하고 테스트한 Bright Data API 키로 대체하세요.

이 구성에서:

mcp 객체는 opencode가 외부 MCP 서버를 시작하는 방법을 알려줍니다.
brightData 항목은 웹 MCP를 실행하는 데 필요한 명령어(npx)와 환경 변수를 지정합니다. (PRO_MODE는 선택 사항이지만, 활성화하면 사용 가능한 모든 도구를 사용할 수 있습니다.)

다시 말해, 위 opencode.json 구성은 CLI가 이전에 정의된 환경 변수와 함께 동일한 npx 명령을 실행하도록 지시합니다. 이를 통해 opencode는 Bright Data 웹 MCP 서버를 실행하고 연결할 수 있습니다.

현재 시점에서 MCP 서버 연결 상태나 사용 가능한 도구를 확인하는 전용 명령어는 없습니다. 따라서 바로 테스트 단계로 넘어가 보겠습니다!

6단계: opencode에서 작업 실행

강화된 opencode 코딩 에이전트의 웹 기능을 확인하려면 다음과 같은 프롬프트를 실행하세요:

"https://it.linkedin.com/in/antonello-zanini"를 스크래핑하고 결과 데이터를 로컬 "profile.json" 파일에 저장합니다. 다음으로, JSON 파일을 읽고 그 내용을 반환하는 기본 Node.js 스크립트를 설정합니다.

이는 실제 데이터를 수집한 후 Node.js 스크립트에서 활용하는 실제 사용 사례를 보여줍니다.

opencode를 시작하고 프롬프트를 입력한 후 Enter를 눌러 실행하세요. 다음과 유사한 동작을 확인할 수 있습니다:

GIF는 속도를 높여 재생되었지만, 단계별로 발생하는 과정은 다음과 같습니다:

Claude Opus 모델이 실행 계획을 정의합니다.
계획의 첫 단계는 LinkedIn 데이터를 가져오는 것입니다. 이를 위해 LLM은 프롬프트에서 추출한 올바른 인자(https://it.linkedin.com/in/antonello-zanini)를 사용하여 적절한 MCP 도구(CLI에서 Brightdata_web_data_linkedin_person_profile로 참조되는web_data_linkedin_person_profile)를 선택합니다.
LLM은 LinkedIn 스크래핑 도구를 통해 대상 데이터를 수집하고 계획을 업데이트합니다.
데이터는 로컬 profile.json 파일에 저장됩니다.
profile.json 에서 데이터를 읽고 출력하기 위한 Node.js 스크립트( readProfile.js)가 생성됩니다.
생성된 Node.js 스크립트를 실행하라는 지침과 함께 실행된 단계의 요약이 표시됩니다.

이 예시에서 작업이 생성한 최종 출력은 다음과 같습니다:

The final instructions produced by opencode

작업이 완료되면 작업 디렉터리에 다음 파일들이 생성됩니다:

├── AGENTS.md
├── opencode.json
├── profile.json   # <-- CLI 생성
└── readProfile.js # <-- CLI 생성

훌륭합니다! 이제 생성된 파일에 의도한 데이터와 로직이 포함되었는지 확인해 보겠습니다.

7단계: 출력 결과 탐색 및 테스트

Visual Studio Code에서 프로젝트 디렉터리를 열고 profile.json 파일을 먼저 살펴보세요:

중요: profile.json 의 데이터는 Bright Data LinkedIn 스크레이퍼가 전용 MCP 도구인 web_data_linkedin_person_profile을 통해 수집한 실제 LinkedIn 데이터입니다. Claude 모델이 생성한 허구 또는 가상 콘텐츠가 아닙니다!

프롬프트에 언급된 공개 LinkedIn 프로필 페이지를 확인해 보면 알 수 있듯이 LinkedIn 데이터는 성공적으로 검색되었습니다: