Bright Data의 Web MCP를 Pi Agent와 함께 사용하기

이 튜토리얼에서 배울 내용:

Pi Agent가 무엇이며, 왜 최소한의 구성으로도 강력한 터미널 기반 코딩 에이전트로 주목받는지 알아봅니다.
실시간 웹 데이터에 연결하면 Pi Agent의 기능이 어떻게 크게 확장되는지 알아봅니다.
Pi Agent를 Bright Data의 Web MCP 서버와 통합하여 실시간 검색 및 스크래핑 기능을 추가하는 방법을 알아봅니다.

바로 시작해 봅시다!

Pi Agent란 무엇인가요?

Pi Agent는 libGDX 게임 프레임워크 창시자인 Mario Zechner가 만든 터미널 기반 코딩 에이전트입니다. 수십 가지 내장 기능을 제공하는 대부분의 코딩 에이전트와 달리, Pi는 의도적으로 최소한의 접근 방식을 취합니다. Pi Agent는 libGDX 게임 프레임워크 창시자인 Mario Zechner가 만든 터미널 기반 코딩 에이전트로, 수십 가지 내장 기능 대신 의도적으로 최소한의 접근 방식을 택했습니다.

npm을 통해 전역으로 설치할 수 있습니다:

npm install -g @mariozechner/pi-coding-agent

기본 제공 도구는 네 가지입니다:
read: 파일 및 디렉토리 읽기
write: 파일 생성 및 편집
edit: 기존 파일의 특정 부분 편집
bash: 셸 명령 실행

그 외 모든 기능은 선택적으로 추가할 수 있습니다. TypeScript 확장, 스킬, 프롬프트 템플릿을 패키지로 묶어 npm이나 git으로 설치해 Pi를 확장할 수 있습니다. 즉, Pi가 여러분의 워크플로우에 맞게 적응하며, 특정 방식을 강요하지 않습니다.

Pi는 Anthropic, OpenAI, Google, Mistral, Groq 등 다양한 모델 제공업체를 지원하며, 네 가지 모드로 실행됩니다:

Interactive: 대화형 터미널 세션용
Print/JSON: 스크립팅을 위한 구조화된 출력용
RPC: stdin/stdout을 통한 프로세스 통합용
SDK: 자체 애플리케이션에 Pi를 직접 임베딩하기 위한 용도

Pi에 웹 접근이 필요한 이유

Pi는 기본 상태에서도 뛰어난 코딩 에이전트이지만, 기반 모델의 학습 데이터로 지식이 제한됩니다. 즉, 라이브러리의 최신 API 변경 사항 조회, 최신 문서 가져오기, 실시간 웹 데이터 수집이 불가능합니다. 빠르게 변화하는 생태계에서 작업하는 개발자에게 이는 실질적인 한계입니다.

Pi를 실시간 웹 데이터에 연결하면 이 문제가 해결됩니다. 잠재적으로 오래된 지식에 의존하는 대신, Pi가 최신 정보를 검색하고 코드 생성 전에 필요한 정확한 페이지를 스크래핑할 수 있습니다.

웹 접근이 활성화되면 Pi는 다음을 수행할 수 있습니다:

모든 라이브러리나 프레임워크의 최신 문서 가져오기
최신 코드 예제 및 모범 사례 검색
모든 공개 웹페이지에서 구조화된 콘텐츠 스크래핑
실제 최신 정보를 기반으로 코드 생성

Bright Data의 Web MCP란 무엇인가요?

Bright Data는 대규모로 웹 데이터를 수집하고 추출하는 도구를 제공하는 웹 데이터 플랫폼입니다. Web MCP 서버는 이러한 기능을 MCP 호환 에이전트가 대화에서 직접 사용할 수 있는 도구로 제공합니다.

Web MCP 서버는 에이전트에게 다양한 강력한 웹 상호작용 도구를 제공합니다:

search_engine: 웹 쿼리 및 제목, URL, 스니펫이 포함된 순위별 결과 조회
search_engine_batch: 단일 요청으로 여러 검색 쿼리 실행
scrape_as_markdown: 모든 공개 웹페이지를 가져와 깔끔하고 구조화된 Markdown으로 반환
scrape_batch: 단일 요청으로 여러 URL 스크래핑
discover: 주제나 시드 URL을 기반으로 관련 URL 찾기

이 도구들을 통해 Pi는 완전한 웹 리서치 및 데이터 추출 기능을 갖추게 됩니다. 에이전트가 필요한 내용을 검색하고, 가장 관련성 높은 소스를 식별하여 스크래핑한 후, 추출된 콘텐츠를 코드 생성에 활용할 수 있습니다.

Bright Data의 Web MCP를 시작하려면 Bright Data 계정과 API 키가 필요합니다.

MCP 브릿지: pi-mcp-adapter

Pi는 MCP 지원을 기본 제공하지 않으며, 이는 의도적인 설계 결정입니다. Pi 창시자 Mario Zechner는 MCP 도구 정의가 최소형 에이전트에 비해 토큰 소비가 너무 많다고 주장합니다. Playwright MCP는 21개 도구를 노출하며 13.7k 토큰을 소비하고, Chrome DevTools MCP는 26개 도구를 노출하며 18k 토큰을 소비합니다. 몇 개의 서버만 연결해도 대화가 시작되기 전에 컨텍스트 윈도우의 상당 부분이 소진될 수 있습니다.

커뮤니티는 pi-mcp-adapter로 이에 응답했습니다. 이 Pi 확장은 모든 MCP 도구 정의를 미리 로드하는 대신, 약 200 토큰만 소비하는 단일 프록시 도구를 노출합니다. 에이전트는 필요에 따라 개별 도구를 검색하고 호출하며, MCP 서버는 필요할 때만 시작됩니다.

어댑터는 표준 MCP 구성 파일을 자동으로 읽으므로, 구성한 MCP 서버는 즉시 Pi에서 사용 가능합니다. 또한 Pi 내부에 대화형 /mcp 패널을 제공하여 연결된 서버 확인, 연결 상태 점검, 실시간 도구 관리가 가능합니다.

설치는 단 한 줄의 명령으로 완료됩니다:

pi install npm:pi-mcp-adapter

Pi Agent를 Bright Data의 Web MCP에 연결하는 방법

사전 요구사항

시작하기 전에 다음 사항을 준비해 주세요:

Node.js 18 이상이 설치되어 있어야 합니다
API 키가 있는 Bright Data 계정. Bright Data에서 가입할 수 있습니다.
Anthropic, OpenAI, Mistral, Google 등 Pi가 지원하는 모델 제공업체의 유효한 API 키

1단계: Pi Agent 설치

터미널을 열고 프로젝트 폴더로 이동한 후 다음을 실행하세요:

npm install -g @mariozechner/pi-coding-agent

다음 명령으로 설치를 확인하세요:

pi --version

2단계: pi-mcp-adapter 설치

Pi가 설치되었으면 MCP 어댑터 확장을 추가하세요:

pi install npm:pi-mcp-adapter

3단계: Bright Data API 키 발급

[Bright Data 계정]()에 로그인하여 대시보드로 이동합니다. 설정(Settings)을 클릭한 후 사용자 및 API 키(Users and API Keys)를 선택하면 API 키를 확인하고 복사할 수 있는 API 대시보드가 열립니다.

또는 메인 대시보드를 아래로 스크롤하면 API 키가 직접 표시되는 빠른 시작(Quickstart) 섹션이 있어 설정 메뉴를 거치지 않고도 바로 복사할 수 있습니다.

4단계: .mcp.json 파일 구성

프로젝트 폴더에 .mcp.json 파일을 생성합니다. 이 파일은 Pi에게 연결할 MCP 서버와 인증 방법을 알려줍니다. 다음 구성을 추가하세요:

{
  "mcpServers": {
    "brightdata": {
      "command": "npx",
      "args": ["-y", "@brightdata/mcp"],
      "env": {
        "API_TOKEN": "YOUR_BRIGHT_DATA_API_KEY"
      }
    }
  }

}

YOUR_BRIGHT_DATA_API_KEY를 Bright Data 대시보드에서 복사한 API 키로 교체하세요. command 필드는 어댑터에게 npx로 Bright Data MCP 서버를 실행하도록 지시하므로 별도 설치가 필요하지 않습니다.

서버는 Pi가 처음 연결할 때 자동으로 다운로드되어 실행됩니다.

5단계: 모델 제공업체에 연결

터미널에서 다음 명령을 실행하여 Pi를 시작합니다:
pi

Pi가 실행되면 Extensions 아래에 pi-mcp-adapter가 표시된 메인 터미널 인터페이스가 나타납니다.

선호하는 모델 제공업체로 인증하려면 /login을 입력하세요. Pi가 먼저 인증 방법을 선택하도록 요청합니다: 구독 또는 API 키 중 하나를 선택할 수 있습니다.
Pi 인터페이스

API 키 사용을 선택한 후 목록에서 제공업체를 선택하세요. Pi는 Anthropic, OpenAI, Google Gemini, Mistral, DeepSeek 등 다양한 제공업체를 지원합니다.
사용 가능한 제공업체

제공업체를 선택하고 API 키를 붙여넣으면 Pi가 자동으로 자격 증명을 저장합니다. 이후 세션에서는 이 단계를 반복할 필요가 없습니다. /model을 입력하여 모델 선택 패널을 열고 사용할 모델을 선택하세요.

모델을 선택하면 터미널 오른쪽 하단에 선택한 모델이 표시됩니다. 이제 Pi가 프롬프트를 받을 준비가 완료되었습니다.

6단계: 연결 확인

Pi가 실행 중인 상태에서 /mcp를 입력하여 MCP 패널을 엽니다. Bright Data 서버가 목록에 표시됩니다. 이 시점에서 0/5로 표시될 수 있으며, 이는 아직 연결이 설정되지 않았음을 나타냅니다.
Pi 인터페이스

방향키를 사용하여 Bright Data 서버를 선택하고 Ctrl+R을 눌러 재연결합니다. 연결에 성공하면 터미널 하단에 MCP: 1/1 servers가 표시되어 Bright Data가 활성화되어 사용 준비가 완료되었음을 확인할 수 있습니다.

Esc를 눌러 패널을 닫으면 첫 번째 작업을 실행할 준비가 됩니다.

7단계: 실제 작업 실행

모든 연결이 완료되면 Bright Data의 웹 도구를 활용하는 프롬프트를 Pi에 입력할 수 있습니다. 다음 프롬프트를 Pi에 입력하세요:

Search the web for the official axios npm documentation, scrape the page, and generate a working JavaScript example that makes a GET request with error handling. Save it as axios-example.js

Pi는 즉시 brightdata_search_engine을 호출하여 웹을 검색하고, 공식 axios 문서에서 링크와 설명이 포함된 순위별 결과 목록을 반환합니다.
웹을 검색하는 Pi agent

가장 관련성 높은 페이지를 식별하면 Pi는 brightdata_scrape_as_markdown을 호출하여 axios 문서 페이지의 전체 콘텐츠를 추출합니다.
작동 중인 Pi agent

그런 다음 Pi는 공식 axios 문서에 기재된 오류 처리 패턴을 완전히 파악하기 위해 추가 페이지를 스크래핑합니다.
Pi agent

문서가 완전히 추출되면 Pi는 포괄적인 axios-example.js 파일을 생성하고 완료된 모든 내용을 확인합니다.
Pi의 결과

8단계: 출력 결과 확인

Pi가 작업을 완료하면 프로젝트 폴더에서 axios-example.js를 찾을 수 있습니다. 이 파일에는 Pi가 스크래핑한 공식 axios 문서를 기반으로 생성된 6가지 완전한 예제가 포함되어 있습니다.
다음은 포괄적인 오류 처리가 포함된 GET 요청을 보여주는 파일의 주요 예제 중 하나입니다:

async function example3AsyncAwaitGet() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log('Status Code:', response.status);
    console.log('Post Title:', response.data.title);
    console.log('Post Body:', response.data.body);
  } catch (error) {
    if (error.response) {
      console.error('Status Code:', error.response.status);
      console.error('Error Data:', error.response.data);
    } else if (error.request) {
      console.error('No response received from server');
    } else {
      console.error('Request setup error:', error.message);
    }
  }
}

To run the file, install axios and execute it with Node.js:
npm install axios
node axios-example.js

마무리

이 튜토리얼에서는 Pi Agent를 Bright Data의 Web MCP 서버에 연결하여 실시간 웹 접근 기능을 확장하는 방법을 살펴봤습니다. pi-mcp-adapter를 설치하고 간단한 .mcp.json 파일을 구성하면, 터미널을 벗어나지 않고도 Pi가 코드 생성 전에 웹을 검색하고 실시간 문서를 스크래핑할 수 있게 됩니다.

이 조합이 잘 작동하는 이유는 두 도구의 설계 방식 덕분입니다. Pi는 최소한의 구성을 유지하면서 필요한 것만 추가할 수 있고, Bright Data의 Web MCP는 에이전트가 즉시 활용할 수 있는 신뢰할 수 있고 구조화된 웹 데이터를 제공합니다. 그 결과, 모델이 이미 알고 있는 정보에만 의존하지 않고 실제 최신 정보를 기반으로 코드를 생성하는 코딩 에이전트가 탄생합니다.

더 알아보고 싶다면 Bright Data는 여기서 다룬 것보다 훨씬 더 다양한 웹 데이터 도구를 제공합니다. Bright Data 문서를 방문하여 자세한 내용을 확인하세요.

문의하기 무료 체험 시작하기