스크래핑용 신규 MCP 서버가 경이롭다 (+ Claude & LangChain AI 에이전트)

ByteGrad 구독자 188,000명

요약

이 영상에서는 AI 에이전트가 MCP 서버를 활용해 웹사이트를 프로그램적으로 스크래핑하는 과정을 단계별로 보여준다. Bright Data의 MCP 서버를 GitHub Copilot이나 Claude 같은 AI 애플리케이션에 통합해 봇 차단을 우회하고 지리적 제한까지 해결하는 방법을 설명한다. 이어 LangChain과 JavaScript를 사용해 MCP 서버 도구를 코드로 자동으로 연결·발견·호출하는 예시를 시연한다. 이를 통해 복잡한 스크래핑 워크플로우를 손쉽게 구성하는 팁과 핵심 개념을 전달한다.

주요 키워드

MCP 서버 AI 에이전트 웹 스크래핑 Bright Data LangChain API 토큰 프록시 서비스 LLM MCP 도구 GitHub Copilot

하이라이트

🔑 MCP 서버를 통해 사용자는 AI 에이전트 내에서 웹사이트 스크래핑을 손쉽게 위임할 수 있습니다.
🚀 Bright Data MCP 서버는 봇 차단 방어와 지리적 제한을 우회하는 프록시 기능을 제공합니다.
⚙️ GitHub Copilot에 mpm 패키지 형태의 MCP 서버를 추가해 스크래핑 도구를 곧바로 활용할 수 있습니다.
🌐 AI 에이전트가 ‘가장 저렴한 상품’이나 ‘최신 코스명’ 같은 질문을 내부 도구 호출만으로 자동 해결합니다.
💻 LangChain과 JavaScript를 통해 MCP 서버 도구를 프로그래밍적으로 검색(discover)하고 호출(invoke)하는 코드를 시연합니다.
📊 LLM(대형 언어 모델)이 JSON·HTML·Markdown 형태의 구조화된 데이터를 취합해 최적의 답변을 합성하는 과정을 보여줍니다.
🔒 API 토큰 입력, 레이트 리밋(rate limit) 설정 같은 보안·안정 장치를 구성하는 실용 팁을 제시합니다.
🎯 정교한 프롬프트 설계로 도구 호출 횟수를 제한하거나 특정 페이지만 타겟팅해 워크플로우를 최적화할 수 있습니다.

용어 설명

MCP 서버

AI 에이전트용 도구를 제공하는 마이크로서비스 프로토콜(Managed Control Plane) 서버

AI 에이전트

사용자의 명령을 받아 도구 호출과 데이터 처리 등 작업을 자동 수행하는 인공지능 애플리케이션

LLM(대형 언어 모델)

방대한 텍스트 학습으로 자연어 이해·생성이 가능한 모델(예: Claude, GPT 등)

API 토큰

서비스 접근 권한을 부여하는 문자열 키로, 요청자 신원 확인과 요금제 연동 등에 사용된다

프록시(Proxy) 서비스

사용자 대신 다른 서버에 요청을 보내고 응답을 받아 차단·제한을 우회하는 중계 서버

웹 스크래핑

웹페이지에서 원하는 정보를 추출하도록 자동화된 방법으로 데이터를 수집하는 기술

Bright Data

프록시·스크래핑·데이터 수집 API를 제공하는 서비스 기업이자 본 영상의 MCP 서버 스폰서

LangChain

프로그래밍 언어(JavaScript, Python 등)에서 LLM과 도구를 연결해 에이전트를 손쉽게 구축하는 프레임워크

GitHub Copilot

코드 작성 보조 AI 확장으로, MCP 서버 도구를 호출해 자동화된 정보 검색을 지원

Claude

Anthropic이 개발한 대화형 LLM으로, 이 영상에서는 Copilot 내장 혹은 외부 에이전트에 통합해 사용

인터넷 상에서 사용자 요청을 AI 에이전트가 대신 처리하는 시대가 도래했다는 개념을 소개한다. MCP 서버가 이 흐름을 어떻게 바꿀지, 사용자·개발자 입장에서 어떤 편의가 생기는지 설명한다.

[00:00] MCP(Model Context Protocol)가 인터넷 상호작용 방식을 완전히 바꿀 것이라고 소개하며, 인상적인 MCP 서버들이 출시되고 있다고 설명합니다.

[00:14] 사용자들이 Claude 데스크톱이나 ChatGPT 같은 AI 애플리케이션 안에 머물면서 에이전트에게 작업을 맡길 것이라고 예측합니다. 개발자들에게는 GitHub Copilot 같은 도구가 이미 많은 작업을 대신 수행하고 있다고 설명합니다.

[00:45] 이전에는 웹사이트에서 최저가 상품을 찾으려면 직접 방문해야 했지만, 앞으로는 에이전트에게 질문만 하면 된다고 설명합니다. 사용자들이 에이전트 애플리케이션 안에 머물면서 질문을 하고, 에이전트가 인터넷 서비스들에 연결하여 답을 찾을 것이라고 예측합니다.

[01:50] 에이전트를 구축할 때 프로그래밍 방식으로 인터넷을 탐색하는 것이 매우 어렵다고 설명합니다. 많은 웹사이트들이 봇에 대한 정교한 보호 장치를 가지고 있으며, 스크래핑이나 프로그래밍 방식의 상호작용을 감지할 수 있다고 경고합니다.

[02:23] e-commerce나 여행 웹사이트에 직접 접근하는 대신, 이런 제한들을 우회할 수 있는 서비스를 통해 프록시해야 한다고 조언합니다.

[02:37] Bright Data MCP 서버는 웹사이트의 접근 제한을 우회하고 차단을 해제할 수 있는 강력한 솔루션입니다. 사용자가 직접 전자상거래 사이트에 접속하는 대신 Bright Data가 대신 접속하여 지리적 제한이나 보호 장치를 우회할 수 있습니다.

봇 차단 방어와 지리적 제한 우회를 지원하는 Bright Data MCP 서버를 간략히 소개한다. 주요 기능(웹 언락, 브라우저 기능, 지리 기반 API)과 활용 사례를 개괄한다.

[03:06] 이 비디오에서는 MCP 서버를 설정하는 방법을 사용자 관점과 프로그래밍 관점 모두에서 설명합니다. JavaScript AI 에이전트를 구축할 때 어떻게 프로그래밍적으로 MCP 서버에 연결할 수 있는지도 다룹니다.

VS Code에서 mpm 패키지 형식(@brightdata/mcp)으로 MCP 서버를 추가하는 과정을 단계별로 보여준다. API 키 입력, 레이트 리밋 설정, 도구 자동 발견까지 설정 과정을 설명한다.

[03:47] Claude Desktop과 GitHub Copilot 모두에서 MCP 서버 설정 방법이 유사합니다. GitHub Copilot의 경우 빠르게 성장하고 있는 옵션으로, 개발자들에게 특히 인기가 있습니다.

[04:15] MCP 서버는 도구를 제공하는 방식으로 작동합니다. 예를 들어 웹사이트를 마크다운 형식으로 스크래핑하는 도구를 제공하며, 사용자가 쿼리할 때 LLM이 작업 수행을 위해 해당 도구를 호출할 수 있습니다.

[04:50] Bright Data MCP 서버를 추가하는 과정은 간단합니다. '@bright-data/mcp'라는 npm 패키지를 GitHub Copilot의 도구 설정에 추가하면 됩니다. 시스템이 설치 여부를 묻고 사용자가 허용하면 설정이 완료됩니다.

[05:12] bright data 서버를 설정하고 작업 공간에서 사용하도록 허용합니다. VS Code에서 MCP.json 파일이 열리며 MCP 서버를 실행하려고 시도합니다.

[05:25] 서버 시작 시 예상대로 오류가 발생합니다. bright data에서 받은 API 토큰을 제공해야 하기 때문입니다. 선택 사항인 다른 옵션들을 제거하고 시간당 100개의 속도 제한을 설정합니다.

[05:41] Bright Data 계정에 가입하여 대시보드의 계정 설정에서 API 키를 생성할 수 있습니다. 비밀 키는 다른 누구에게도 보여주지 말고 복사하여 설정에 붙여넣어야 합니다.

[05:58] API 키를 추가한 후 서버를 다시 시작하면 오류가 사라지고 49개의 도구가 발견됩니다. bright data라는 새로운 MCP 서버가 여러 도구를 제공하며, 추출 도구로 웹 페이지를 스크래핑하여 JSON 데이터, HTML, 마크다운 등으로 반환할 수 있습니다.

Copilot 내 에이전트가 '가장 저렴한 베개 찾기' 등 요청을 받아 scrape·extract 도구를 순차 호출한다. 도구 인풋·아웃풋 확인, JSON 데이터 활용, 결과 종합 과정을 시연한다.

[06:44] 에이전트 모드에서 이커머스 스토어의 가장 저렴한 베개를 찾는 질문을 합니다. 에이전트는 적절한 도구를 선택하고 bright data 도구를 사용하기로 결정하여 제한 사항을 우회하며 작업을 수행합니다.

[07:14] 에이전트가 마크다운으로 스크래핑하는 도구를 실행하기로 결정합니다. 도구는 함수와 같으며 입력이 필요합니다. 이 경우 스크래핑할 URL을 입력으로 받으며, 에이전트가 해당 입력 값을 결정합니다.

[07:33] GitHub 코파일럿에서는 실제로 도구를 호출하기 전에 사용자의 확인을 요청합니다. 계속 진행을 클릭하면 실제로 도구가 실행되어 작업을 수행합니다.

[07:54] MCP 서버의 도구 호출이 완료되어 URL을 입력으로 전달하고 15개의 결과를 얻었습니다. 시스템이 추출 도구를 호출하여 JSON 데이터를 받고 최종적으로 25달러 베개가 가장 저렴한 옵션임을 찾아냈습니다.

[08:48] 새로운 질문으로 Bitgrat.com에서 제공하는 최신 코스 이름을 요청했습니다. 일반적으로 에이전트로 웹사이트를 스크래핑할 때 쉽게 차단되지만, 브라이트 데이터의 차단 해제 기능과 AI 에이전트를 결합하면 매우 강력한 결과를 얻을 수 있습니다.

[09:11] 시스템이 웹사이트를 마크다운으로 스크래핑하고 /courses 페이지에서 데이터를 가져왔습니다. 브라이트 데이터에서 나온 출력이 클라우드 소넷 4 모델로 전달되어 정확한 최신 제안 정보를 성공적으로 얻었습니다.

[09:46] 사용자가 작업을 에이전트에게 넘겨주고 에이전트가 나머지를 관리하는 방식을 설명했습니다. 이제 JavaScript로 AI 에이전트를 직접 구축하여 프로그래밍 방식으로 MCP 서버에 연결하는 방법을 보여주겠다고 합니다.

JavaScript 환경에서 LangChain MCP 어댑터를 사용해 Bright Data 서버에 프로그래밍적으로 연결한다. 도구 발견·호출 로직, LLM(Entropic API) 통합, 터미널 대화형 UI 구성 방식을 설명한다.

[10:05] JavaScript 에이전트 구축에 필요한 패키지들을 소개했습니다. LangChain의 MCP 어댑터와 클라이언트를 사용하여 MCP 서버에 연결하고, Anthropic을 LLM으로 사용하여 워크플로우를 더 쉽게 orchestrate할 수 있습니다. 설정에 두 개의 환경 변수가 필요하다고 언급했습니다.

[10:32] Bright Data의 API 토큰과 Anthropic의 API 키라는 두 개의 환경 변수를 설정하여 EMV를 통해 프로세스에 로드합니다. 메인 함수를 파일 하단에서 실행하며, 가장 중요한 핵심 로직을 구현합니다.

[10:57] MCP 서버에 연결하기 위해 클라이언트를 설정하고, 표준 IO를 통한 Bright Data 서버를 MPX at bright data/mcp로 시작합니다. API 토큰을 전달하여 MCP 서버에 연결을 시도합니다.

[11:11] MCP 서버가 제공하는 도구들을 발견하기 위해 get tools를 사용합니다. 실제로 파일을 실행해보면 MCP bright data scrape as markdown, extract, raw HTML 스크래핑 등 다양한 도구 이름들을 확인할 수 있습니다.

[12:00] 이제 애플리케이션과 에이전트가 프로그래밍 방식으로 MCP 서버의 도구들에 접근할 수 있어 매우 강력한 기능을 구현할 수 있습니다. 사용자가 LLM과 채팅하면서 '어떤 스토어에서 가장 저렴한 아이템이 무엇인지'와 같은 쿼리를 할 수 있도록 합니다.

[12:31] Anthropic의 Claude 3.7을 LLM으로 사용하고, Langchain의 에이전트를 활용하여 에이전트 애플리케이션을 조율합니다. LLM이 어떤 도구를 호출할지 결정하고, Bright Data에서 제공하는 도구들을 추가합니다.

[12:56] UI 대신 터미널에서 작업하며, 더 나은 사용자 경험을 위해 추가 도구를 사용합니다. MCP 에이전트가 준비되었다는 로그를 남기고, 터미널에서 대화형 인터페이스를 구현합니다.

[13:10] MCP 에이전트가 준비되어 터미널에서 대화형 루프를 구현하고 있습니다. 사용자 입력을 받아 agent.invoke를 통해 처리합니다.

[13:40] AI agent.js를 실행하여 서버를 시작하고 Bright Data MCP 에이전트가 준비되었습니다. LLM과 채팅하면서 도구를 호출할 수 있게 되었습니다.

[13:55] 전자상거래 웹사이트에서 가장 비싼 베개를 찾는 쿼리를 실행합니다. 에이전트가 스크래핑 도구를 호출하여 마크다운 형식으로 데이터를 수집하기 시작합니다.

[14:23] Bright Data의 추출 도구가 JSON 형식으로 데이터를 가져오려고 시도합니다. 오류가 발생했지만 HTML 스크래핑 도구도 함께 사용하여 한 번의 쿼리로 여러 요청을 처리합니다.

[15:00] 자바스크립트로 렌더링되는 웹사이트를 스크래핑하는 도전 과제를 언급하며, Bright Data가 이런 문제 없이 처리할 수 있음을 설명합니다.

[15:14] 웹사이트가 사용하는 API를 발견하고 API 엔드포인트를 직접 스크래핑하는 더 효율적인 방법을 사용합니다. 다른 페이지로도 이동하는 정교한 스크래핑을 수행합니다.

[15:37] 토큰 소모를 피하기 위해 중단하고, 사용자가 제출하는 프롬프트에 제한사항을 추가하는 방법을 제안합니다.

[15:45] 사용자 프롬프트에 도구 사용 횟수 제한 등의 보안 조치를 추가하는 방법을 설명하고, 더 정확한 프롬프트 작성의 중요성을 강조합니다.

[16:24] 개선된 프롬프트를 사용한 실제 시연에서 LLM이 추출 도구를 빠르게 사용하여 최종 답변을 제공하는 과정을 보여줍니다.

[16:39] LLM의 원시 출력을 통해 도구 사용 유형, 도구 이름, 토큰 사용량 등의 상세한 정보를 확인할 수 있음을 설명합니다.

[16:57] LLM이 API에서 제품 데이터를 성공적으로 가져와 요청한 모든 정보를 제공하는 최종 결과를 보여줍니다.

[17:19] Bright Data MCP 서버를 활용하여 몇 줄의 코드로 정교한 AI 에이전트를 구축할 수 있음을 강조하며, 이 기술이 AI 에이전트의 고급 기능을 해제한다고 평가합니다.

몇 줄의 코드로 스크래핑 기능을 갖춘 AI 에이전트를 완성한 사례를 정리한다. 프롬프트 최적화, 호출 제한 설정, 추가 보안 장치 등 실용 팁을 제시하며 시청 독려로 마무리한다.

타임라인 정보가 없습니다.

[00:00] 안녕하세요 여러분, MCP에 대해서

[00:01] 좀 더 이야기해보겠습니다. 저는 사실

[00:03] 이것이 우리가 인터넷과 상호작용하는

[00:05] 방식을 완전히 바꿀 것이라고 믿습니다.

[00:07] 그리고 정말 인상적인 MCP 서버들이

[00:08] 지금 출시되고 있는데, 여러분이

[00:10] 알아야 할 것들이라고 생각합니다.

[00:12] 그래서 간단히 말하면, 왜 우리가

[00:14] 이 이야기를 하는 걸까요? 지금 무슨

[00:16] 일이 일어나고 있는 건가요? 왜 이게

[00:18] 그렇게 혁신적인 걸까요? 그 이유는

[00:21] 요즘 사용자로서 여러분은 어떤 종류의

[00:23] AI 타입의 애플리케이션 안에 앉아

[00:26] 있을 거라는 겁니다. 그래서 Claude 데스크톱이나

[00:28] ChatGPT나 그런 비슷한 앱을 사용하실 텐데요.

[00:31] 그리고 만약 여러분이 개발자라면

[00:33] 요즘 이런 종류의 에이전트들이

[00:35] 있다는 걸 알 거예요. 여기 Visual Studio

[00:37] Code에서 GitHub Copilot을 사용하고 있습니다.

[00:39] 이것이 매우 인기있는 이유는

[00:41] 우리를 대신해서 많은 일들을 할 수

[00:43] 있기 때문입니다. 이전에는 만약

[00:45] 어떤 정보를 찾고 싶었다면, 예를 들어

[00:48] 이 웹사이트의 이 매장에서 가장

[00:50] 저렴한 상품이 무엇인지 알고 싶으면

[00:52] 이전에는 제가 사용자로서 그 웹사이트에

[00:54] 직접 가야 했습니다. 직접 찾아봐야 했고

[00:56] 많은 번거로움이 있었습니다.

[00:58] 하지만 제가 생각하기에 앞으로

[00:59] 사람들은 자신의 에이전트 타입

[01:01] 애플리케이션 안에 머물면서

[01:04] 단순히 자신의 에이전트에게

[01:07] 어떤 웹사이트에서 가장 저렴한

[01:10] 옵션이 무엇인지 물어볼 것입니다.

[01:12] 제 에이전트 앱에서는 그냥 이 작업을

[01:14] 에이전트에게 넘겨줄 겁니다. 수동으로

[01:16] 그 웹사이트에 가고 싶지 않아요.

[01:18] 너무 많은 작업이거든요. 매우 게으르게

[01:20] 들릴 수 있지만, 사람들이 실제로

[01:22] 하게 될 일이라고 생각합니다. 제

[01:24] 에이전트가 이 쿼리를 받으면

[01:26] 실제로 그 웹사이트에 가서

[01:28] 답을 찾는 것은 에이전트의 몫입니다.

[01:30] 이건 단순히 더 편안한 사용자

[01:33] 경험입니다. 제 에이전트가 저를 대신해서

[01:36] 이 매장에 가서 정보를 찾아볼 수

[01:38] 있습니다. 제가 생각하기에 앞으로

[01:39] 사람들은 자신의 에이전트 타입

[01:41] 애플리케이션 안에 앉아서

[01:43] 단순히 많은 질문들을 할 것이고

[01:45] 이 에이전트들이 인터넷의 서비스들에

[01:48] 연결하여 답을 얻을 것입니다.

[01:50] 이제 만약 여러분이 그런 일을 해야 하는

[01:53] 타입의 에이전트를 구축한다면

[01:55] 프로그래밍 방식으로 인터넷을 탐색하는

[01:58] 것이 매우 어렵다는 것을 알게 됐을

[02:00] 것입니다. 요즘 많은 웹사이트들,

[02:02] 요즘 많은 서버들이 봇에 대한

[02:04] 보호 장치를 가지고 있기 때문입니다.

[02:07] 실제로 꽤 정교한 보호 장치들이

[02:08] 있는데, 이 웹사이트들은 여러분이

[02:10] 무엇을 하고 있는지 알고 있습니다.

[02:11] e-commerce 웹사이트나 여행 웹사이트

[02:13] 또는 다른 웹사이트에 갈 때

[02:15] 그들은 여러분이 그들을 스크래핑하거나

[02:18] 프로그래밍 방식으로 그들의 웹사이트와

[02:20] 상호작용하고 있다는 사실을 알아챌

[02:22] 수 있습니다. 따라서 사용자를 대신해서

[02:23] 인터넷의 다른 웹사이트들에 접근해야

[02:25] 하는 어떤 종류의 에이전트를 구축하고

[02:27] 있다면, 여러분은 아마도 e-commerce

[02:29] 스토어에 직접 가고 싶지 않을 것입니다.

[02:32] 그런 제한들을 우회할 수 있는 서비스를

[02:35] 통해 프록시하고 싶을 것입니다.

[02:37] 제한 사항들을 우회하고 차단을 해제할 수 있는 서비스입니다.

[02:39] 그래서 오늘 소개하고 싶은 것이 바로

[02:40] 오늘의 스폰서인 Bright Data입니다.

[02:42] 이들은 실제로 이를 도와주는 놀라운

[02:44] MCP 서버를 출시했습니다.

[02:46] 맞죠? 설명란에 링크를 확인해보세요.

[02:47] 직접 확인해보실 수 있습니다.

[02:48] 하지만 이 경우 제가 직접 전자상거래 사이트에

[02:50] 접속하지 않을 겁니다.

[02:53] 대신 Bright Data의 MCP 서버를 사용하고

[02:55] Bright Data가 전자상거래 사이트에

[02:58] 접속하게 될 것입니다. 여행 사이트나

[03:00] 검색 사이트 같은 곳에서도 마찬가지죠.

[03:02] 이것은 더 강력한 솔루션이 될 것입니다.

[03:04] 왜냐하면 Bright Data로 차단을 해제할 수 있기 때문입니다.

[03:06] 이 비디오에서 저는 MCP 서버를

[03:08] 설정하는 방법을 보여드리고 싶습니다.

[03:10] 사용자로서뿐만 아니라 프로그래밍적으로도요.

[03:13] 예를 들어 JavaScript AI 에이전트를 구축한다면

[03:15] 어떻게 프로그래밍적으로 MCP 서버에

[03:18] 연결할 수 있을까요?

[03:20] 이 MCP 서버를 통해 우리는

[03:22] 인터넷의 최신 정보에 접근할 수 있습니다.

[03:24] 때로는 이러한 서비스들이

[03:26] 지리적 위치에 따라 제한을 가하기도 합니다.

[03:29] 하지만 Bright Data가 이것도

[03:31] 도와줄 수 있습니다.

[03:33] 웹사이트에 어떤 보호 장치가 있다면

[03:34] 웹 언로커가 있습니다.

[03:36] 선택적으로 브라우저 관련 기능도

[03:39] 사용할 수 있고 MCP 호환

[03:41] AI 어시스턴트와 함께 작동합니다.

[03:44] 실제로 사용해보고 어떻게 작동하는지

[03:46] 확인해보겠습니다.

[03:49] 아마 Claude Desktop에서 설정하는 방법을

[03:50] 이미 보셨을 것입니다. 현재 가장

[03:52] 인기 있는 옵션 중 하나입니다.

[03:54] 또 다른 인기 있는 옵션은

[03:56] GitHub Copilot입니다. 특히 개발자라면요.

[03:58] 사용하고자 하는 두 옵션 중 어느 것이든

[04:00] 설정 방법은 매우 유사합니다.

[04:02] 실제로 GitHub Copilot에서

[04:04] 어떻게 하는지 보여드리겠습니다.

[04:06] 이것이 매우 빠르게 성장하고 있거든요.

[04:08] GitHub Copilot에 이런 쿼리가 있을 때

[04:10] 실제로 Bright Data MCP 서버를

[04:12] 사용하고 싶습니다. 어떻게 할 수 있을까요?

[04:15] 이러한 MCP 서버들이 작동하는 방식은

[04:17] 도구를 제공한다는 것입니다.

[04:19] 예를 들어 MCP 서버는

[04:21] 마크다운 형식으로 웹사이트를 스크래핑하는

[04:24] 도구를 제공할 수 있습니다.

[04:27] 그러면 사용자가 이런 쿼리를 했을 때

[04:29] LLM이 작업을 수행하기 위해

[04:32] 해당 도구를 호출하기로 결정할 수 있습니다.

[04:34] 사용 가능한 도구를 어떻게 볼 수 있을까요?

[04:35] GitHub Copilot에서는 이렇게 할 수 있는데

[04:37] Claude Desktop에서도 매우 유사합니다.

[04:38] MCP 서버 또는 MCP 서버가 제공하는

[04:40] 도구들을 볼 수 있는 옵션이 있습니다.

[04:43] 보시다시피 내장된 것들이 있지만

[04:46] 도구를 제공하는 확장 프로그램도

[04:47] 여기에 있습니다.

[04:50] 이제 Bright Data MCP 서버의

[04:52] 도구들도 추가하고 싶습니다.

[04:54] 아래쪽에 가서 더 많은 도구를 추가할 수 있습니다.

[04:56] MCP 서버를 추가하겠습니다.

[04:58] 이것은 실제로 npm 패키지입니다.

[05:00] 패키지 이름만 제공하면 됩니다.

[05:02] 여기 도구로 가면 패키지 이름은

[05:04] @bright-data/mcp입니다.

[05:06] 여기에 추가하고 엔터를 누르면

[05:08] 설치할 건가요?

[05:10] 네, 허용하겠습니다.

[05:12] 네, 허용하겠습니다. 서버 ID를 단순히 bright data로 설정하겠습니다.

[05:13] 어디서 사용할 수 있도록 할까요? 이 작업 공간에서 사용하도록 하겠습니다.

[05:16] 좋습니다.

[05:17] 그러면 실제로 VS Code에서 MCP.json 파일이 열릴 것입니다.

[05:19] 이 MCP 서버를 실행해 보겠습니다.

[05:23] 하지만 실행할 때 오류가 발생합니다.

[05:25] 서버를 시작하려고 하면 실제로 오류가 발생하는 것을 볼 수 있습니다.

[05:28] 이는 예상된 결과입니다.

[05:30] 왜냐하면 bright data에서 받은 API 토큰을 제공해야 하기 때문입니다.

[05:32] 다른 옵션들은 선택 사항입니다.

[05:34] 이 두 항목을 제거하겠습니다.

[05:36] 또한 속도 제한도 설정하는 것이 좋겠습니다.

[05:38] 시간당 100개 정도로 설정하겠습니다.

[05:40] 요청을 과도하게 보내지 않기 위해서입니다.

[05:41] Bright Data 계정에 가입할 수 있습니다.

[05:44] 대시보드의 계정 설정에서 API 키를 생성할 수 있습니다.

[05:46] 이미 생성해두었습니다.

[05:49] 비밀이라 여기서는 보여드릴 수 없습니다.

[05:51] 다른 누구에게도 보여주지 마세요.

[05:52] 키를 받으면 복사해서 여기에 붙여넣으면 됩니다.

[05:54] API 키를 추가하겠습니다.

[05:56] API 키를 보여드릴 수 없어서 파일을 닫겠습니다.

[05:58] 이제 여기를 클릭하고 서버를 다시 실행해보겠습니다.

[06:00] 서버 시작을 클릭하면 오류가 사라지고 실제로 49개의 도구가 발견된 것을 볼 수 있습니다.

[06:02] 다시 클릭하면 아래로 스크롤했을 때

[06:04] bright data라는 새로운 MCP 서버가 여러 도구를 제공하고 있는 것을 볼 수 있습니다.

[06:06] 간단히 살펴보면 어떤 도구들이 있을까요?

[06:08] 추출 도구가 있습니다.

[06:09] 웹 페이지를 스크래핑하고 JSON 데이터를 반환할 수 있는 도구입니다.

[06:12] HTML이나 마크다운으로 스크래핑할 수도 있습니다.

[06:14] bright data가 제공하는 다양한 도구들이 있습니다.

[06:16] 이제 에이전트 모드에서 질문을 해보겠습니다.

[06:19] 어떤 이커머스 스토어에서 가장 저렴한 베개가 무엇인지 물어보겠습니다.

[06:21] 이 작업을 에이전트에게 맡길 수 있습니다.

[06:23] 에이전트는 어떤 도구를 사용해야 하는지 확인할 것입니다.

[06:25] bright data 도구를 사용하기로 결정하면 이를 호출할 것입니다.

[06:27] 실제로 어떤 결과를 얻는지 확인해보겠습니다.

[06:29] bright data는 제한 사항을 우회하는 데 정말 뛰어납니다.

[06:31] 가장 저렴한 베개를 찾아드리겠다고 말하고 있습니다.

[06:33] 여기서 도구를 실행하기로 결정했습니다.

[06:36] 이 MCP 서버가 제공하는 마크다운으로 스크래핑하는 도구입니다.

[06:39] 이에 대한 설명이 있습니다.

[06:41] 도구는 함수와 같다고 생각할 수 있습니다.

[06:44] 함수는 입력을 가질 수 있고, 이 도구는 하나의 입력을 가집니다.

[06:46] 스크래핑할 URL을 알아야 합니다.

[06:52] 에이전트는 해당 입력의 값도 결정해야 합니다.

[06:55] 여기서 에이전트가 URL 입력을 제공하기로 결정한 것을 볼 수 있습니다.

[06:57] 그리고 스크래핑하려는 웹사이트를 지정했습니다.

[07:00] GitHub 코파일럿에서는 실제로 도구를 호출하기 전에 확인을 요청합니다.

[07:02] 계속 진행을 클릭하겠습니다.

[07:04] 네, 그러면 실제로 도구가 실행됩니다.

[07:07] bright data는 제한 사항을 우회하는 데 정말 뛰어납니다.

[07:09] 여기서 가장 저렴한 베개를 찾아드리겠다고 말하고 있습니다.

[07:12] 도구를 실행하기로 결정했습니다.

[07:14] 이 MCP 서버가 제공하는 마크다운으로 스크래핑하는 도구입니다.

[07:15] 이에 대한 설명이 있습니다.

[07:18] 도구는 함수와 같다고 생각할 수 있습니다.

[07:21] 함수는 입력을 가질 수 있고, 이 도구는 하나의 입력을 가집니다.

[07:23] 스크래핑할 URL을 알아야 합니다.

[07:25] 에이전트는 해당 입력의 값도 결정해야 합니다.

[07:27] 여기서 에이전트가 URL 입력을 제공하기로 결정한 것을 볼 수 있습니다.

[07:29] 그리고 스크래핑하려는 웹사이트를 지정했습니다.

[07:31] GitHub 코파일럿에서는 실제로 도구를 호출하기 전에 확인을 요청합니다.

[07:33] 계속 진행을 클릭하겠습니다.

[07:36] 네, 그러면 실제로 도구가 실행됩니다.

[07:38] 에이전트가 URL 입력을 제공하기로 결정했습니다.

[07:40] 스크래핑하려는 웹사이트를 지정했습니다.

[07:42] GitHub 코파일럿에서는 실제로 도구를 호출하기 전에 확인을 요청합니다.

[07:44] 계속 진행을 클릭하겠습니다.

[07:46] 네, 그러면 실제로 도구가 실행됩니다.

[07:48] 계속 진행을 클릭하겠습니다.

[07:50] 네, 그러면 실제로 도구가 실행됩니다.

[07:52] 네, 그러면 실제로 도구가 실행됩니다.

[07:54] 여기서 도구 호출이 완료되었습니다. URL을

[07:56] 입력으로 전달했고, 그 도구로부터

[07:58] 출력을 받았습니다. 그 도구는

[07:59] 15개의 결과가 있다고 보여주었습니다.

[08:01] 좋아요. 그리고 여기서 추출한다고 하네요.

[08:04] 이것은 또 다른 도구입니다. 다른

[08:07] 도구를 호출하기로 결정했습니다. 실제로

[08:09] 한번 봅시다. 입력을 전달해야 하고

[08:12] 여기서 허용해야 합니다. 물론

[08:14] 항상 허용할 수도 있습니다. 그것은

[08:15] 코파일럿에서 할 수 있는 일입니다.

[08:17] 좋아요. 이제 두 번째 도구인

[08:19] 추출 도구를 완료했습니다.

[08:20] 이것을 입력으로 전달했고, 출력으로

[08:23] 제품에 대한 JSON 데이터 목록을

[08:25] 본질적으로 받았습니다. 그리고

[08:28] 사용자인 저에게 최종 답변을

[08:30] 종합할 수 있었습니다. 그리고

[08:32] 가장 저렴한 옵션이 25달러

[08:34] 베개라는 것을 발견했습니다. 이러한

[08:36] LLM들은 브라이트 데이터에서 받은

[08:39] 이런 구조화된 데이터 유형을

[08:42] 정말 좋아합니다. 그리고 다른

[08:44] 질문이 있다면, 여기서 컨텍스트를

[08:46] 지워보겠습니다. 만약 내가

[08:48] bitgrat.com에서 Bitgrat이 제공하는

[08:49] 최신 코스 이름을 알려달라고

[08:52] 물어본다면? 실제로 할 수 있는지

[08:56] 봅시다. 일반적으로 에이전트로

[08:58] 이런 웹사이트들을 스크래핑할 때

[09:00] 꽤 쉽게 차단될 수 있습니다.

[09:02] 브라이트 데이터가 제공하는

[09:04] 차단 해제 기능을 AI 에이전트와

[09:05] 결합할 수 있다는 것은 매우

[09:07] 강력합니다. 여기서 스크래핑을

[09:09] 하고 싶어합니다. 웹사이트를

[09:11] 마크다운으로 스크래핑하고 싶어합니다.

[09:13] 그것이 사용하려는 도구입니다.

[09:15] 허용하겠습니다. 그리고 실제로

[09:16] 때로는 다른 것을 원합니다.

[09:18] 좋아요, 다시 해봅시다.

[09:20] 계속 진행하겠습니다. 몇 가지를

[09:23] 발견했습니다. 실제로 /courses

[09:26] 페이지인 다른 페이지를 스크래핑했습니다.

[09:28] 브라이트 데이터로부터 출력을

[09:30] 받았습니다. 도구의 출력은

[09:31] 이 경우 브라이트 데이터에서

[09:33] 나오는 것이고, 클라우드 소넷 4

[09:35] 모델인 LLM에 전달됩니다.

[09:38] 브라이트 데이터로부터의 출력을

[09:40] 기반으로 LLM이 최종 답변을

[09:42] 종합할 수 있었습니다. 실제로

[09:44] 맞게 나왔습니다. 이것은 정말

[09:45] 최신 제안입니다. 좋아요. 이전에

[09:48] 여기서 사용자인 제가 이 작업을

[09:50] 에이전트에게 넘겨주었습니다.

[09:52] 에이전트는 나머지 모든 것을

[09:54] 관리할 것입니다. 이제 실제로

[09:57] JavaScript로 AI 에이전트를 구축해

[09:59] 봅시다. 프로그래밍 방식으로

[10:02] MCP 서버에 연결하고 비슷한

[10:03] 훌륭한 결과를 얻는 방법을

[10:05] 보겠습니다. 좋아요. 여기서 몇 가지

[10:08] 패키지를 사용하겠습니다. 이런 유형의

[10:10] 워크플로우를 조금 더 쉽게

[10:12] orchestrate하는 데 도움이 되는

[10:15] 도구들이 있습니다. 사용할 필요는

[10:18] 없지만 저는 LangChain을

[10:19] 사용하는 것을 좋아합니다. 클라이언트와

[10:22] 함께 MCP 어댑터 옵션이

[10:24] 있습니다. 실제로 그 MCP

[10:26] 서버에 연결할 수 있습니다.

[10:28] 여기서 Anthropic을 LLM으로

[10:31] 사용하겠습니다. 이것으로 에이전트를

[10:32] 첫 번째는 대시보드에서 보여드린 Bright Data의 API 토큰입니다.

[10:35] 두 번째는 사실 Anthropic의 API 키입니다.

[10:36] 그래서 실제로 그들의 LLM을 사용할 수 있습니다.

[10:38] 여기서 EMV를 사용해서 이 프로세스로 로드할 거예요.

[10:42] 그리고 여기에 실행할 메인 함수가 있습니다.

[10:44] 파일 하단에서 실행하겠습니다.

[10:45] 그리고 여기에 핵심 로직이 있습니다.

[10:48] 가장 중요한 로직 말이죠.

[10:50] 첫 번째로 하고 싶은 것은

[10:51] MCP 서버에 연결을 시도하는 것입니다.

[10:53] 여기에 클라이언트가 있고

[10:55] 여기서 어떤 MCP 서버를 사용할지 지정해야 합니다.

[10:57] 표준 IO를 통한 Bright Data가 될 거예요.

[10:58] 이 서버를 시작할 수 있습니다.

[11:00] MPX at bright data/mcp로 말이죠.

[11:02] 그리고 API 토큰을 전달해야 합니다.

[11:04] 이것이 Bright Data 토큰입니다.

[11:06] 그러면 여기에 클라이언트가 있고

[11:08] 이제 MCP 서버에 연결되었기를 바랍니다.

[11:11] MCP 서버는 우리에게 무엇을 제공할까요?

[11:13] 몇 가지를 제공하지만

[11:15] 도구가 가장 중요하다고 생각합니다.

[11:17] 이미 get tools를 사용해서

[11:20] 실제로 그 도구들을 발견할 수 있는지 볼 수 있습니다.

[11:22] 일단 로그를 남겨보겠습니다.

[11:23] 실제로 이걸 실행해보고

[11:25] 무엇을 얻는지 살펴보겠습니다.

[11:27] 터미널을 열어보겠습니다.

[11:29] 이 파일을 실행해보겠습니다.

[11:30] node AI agent.js라고 입력하고

[11:32] 어떤 결과가 나오는지 보겠습니다.

[11:34] 그리고 이미 많은 도구 이름을 얻었습니다.

[11:36] 실제로 이미 여기에 많은 도구 이름들이 있습니다.

[11:38] MCP bright data scrape as markdown가 보이는데, 이전에 본 것과 같습니다.

[11:41] 그리고 extract도 있습니다.

[11:44] 실제로 우리는 raw HTML로 스크래핑할 수도 있고

[11:46] 다른 도구들도 많이 있습니다.

[11:48] 하지만 이것으로 증명된 것은

[11:50] 이제 프로그래밍 방식으로

[11:52] MCP 서버에서 사용 가능한 도구들을 발견할 수 있다는 것입니다.

[11:55] 이것은 정말 멋지다고 생각합니다.

[11:59] 사용자로서만 사용할 수 있는 게 아니라

[12:00] 이제 우리 애플리케이션, 우리 에이전트가

[12:02] 그 도구들에 접근할 수 있습니다.

[12:04] 이제 실제로 매우 강력하게 만들 수 있습니다.

[12:05] 이제 사용자가 할 수 있도록 하고 싶은 것은

[12:07] 그들이 LLM과 채팅할 수 있어야 한다는 것입니다.

[12:09] 그래서 이전에 했던 것처럼

[12:12] 어떤 스토어에서 가장 저렴한 아이템이 무엇인지 같은 쿼리를 할 때

[12:14] 이제 우리는 그 도구들을 사용할 수 있습니다.

[12:16] 그래서 LLM과 도구가 필요합니다.

[12:18] 여기서 Anthropic을 LLM으로 사용하겠습니다.

[12:21] Claude 3.7을 사용하지만

[12:23] 다른 모델들과도 작동합니다.

[12:26] 이것이 LLM입니다.

[12:28] LLM은 어떤 도구를 호출할지 결정해야 합니다.

[12:31] 여기서 Langchain의 에이전트를 사용하겠습니다.

[12:33] 기본적으로 이것은 우리가

[12:35] 이런 유형의 에이전트 애플리케이션을 조율하는 데 도움이 됩니다.

[12:37] 기본적으로 에이전트는 LLM으로 만들 수 있습니다.

[12:40] 이게 바로 그것입니다.

[12:42] 그리고 어떤 도구를 호출할지 알아야 합니다.

[12:44] 이것들이 여기서 Bright Data에서 추가하는 도구들입니다.

[12:47] UI를 만들 수도 있지만

[12:49] 실제로 터미널에서 하겠습니다.

[12:51] 더 보기 좋게 만들기 위해

[12:54] 여기서 다른 도구를 사용하겠습니다.

[12:56] 그리고 MCP 에이전트가 준비되었다고 로그를 남기겠습니다.

[12:58] 그리고 또한 MCP 에이전트가 준비되었다고 로그를 남기겠습니다.

[13:00] 여기서 다른 도구를 사용하겠습니다.

[13:03] 그리고 또한 로그를 남기겠습니다.

[13:04] MCP 에이전트가 준비되었다고 말이죠.

[13:06] 터미널에서 대화를 하고 싶습니다.

[13:08] 그리고 이것은 종종 일부 도구로 수행됩니다.

[13:10] MCP 에이전트가 준비되었습니다. 이제 터미널에서

[13:13] 대화를 하고 싶습니다.

[13:15] 이것은 보통 어떤 종류의 루프로 수행됩니다.

[13:16] 여기 처음에 마커가 있을 것입니다. 그리고

[13:19] 사용자로부터 지속적으로 입력을 받을 것입니다.

[13:21] 종료할 수도 있습니다. 하지만 사용자가

[13:23] 메시지를 보내면 agent.invoke를 사용할 것입니다.

[13:25] 사용자가 작성한 내용을 여기에 전달할 것입니다.

[13:27] 그리고 이것을 예쁘게 출력할 것입니다.

[13:29] 형식을 좀 더 보기 좋게 만들기 위해

[13:31] 다른 함수를 만들었습니다.

[13:33] 그리고 이것을 반복할 것입니다.

[13:35] 실제로 이것을 시도해보겠습니다.

[13:37] node AI agent.js라고 입력하겠습니다.

[13:40] 실제로 node AI agent.js라고 말하겠습니다.

[13:43] 좋습니다. 여기서 서버가 시작되고

[13:46] 이제 Bright Data MCP 에이전트도

[13:47] 준비되었습니다. 이제 여기서 LLM과

[13:50] 채팅할 수 있고 도구를 호출할 수 있어야 합니다.

[13:52] 어떤 전자상거래 웹사이트에서

[13:55] 가장 비싼 베개는 무엇인가요?

[13:58] 실제로 이것을 시도해보겠습니다.

[14:01] 여기서 엔터를 눌러보겠습니다.

[14:03] 무슨 일이 일어나는지 보죠.

[14:05] 좋습니다. 실제로 결과를 볼 수 있습니다.

[14:08] 로그를 남기고 있기 때문입니다.

[14:10] 여기서 이미 하나의 도구를 호출하기로

[14:12] 결정했음을 볼 수 있습니다.

[14:14] 스크래핑을 마크다운 도구로 하고

[14:16] 이것을 입력으로 전달했습니다.

[14:19] 좋습니다. 완료되었고 이제

[14:22] Bright Data의 추출 도구를 사용하고 있습니다.

[14:23] 이것은 실제로 조금 더 정교합니다.

[14:26] 왜냐하면 실제로 JSON 형식으로

[14:28] 데이터를 가져오려고 시도하기 때문입니다.

[14:29] 실제로 프롬프트와 함께 말입니다.

[14:32] 실제로 어떤 프롬프트를 사용할지도

[14:35] 결정해야 합니다. 이것이 실제로

[14:37] 우리가 원하는 것입니다. 좋습니다.

[14:38] 여기서 오류가 발생했지만

[14:40] 이것은 아무것도 영향을 주지 않는 것 같습니다.

[14:42] 실제로 여전히 이 도구를 완료했고

[14:43] 실제로 HTML로 스크래핑하는 도구도

[14:46] 사용하기로 결정했습니다.

[14:48] 한 번의 쿼리로 많은 요청을 할 수 있음을

[14:49] 볼 수 있습니다. 에이전트가 실제로

[14:52] 대부분의 데이터를 얻기 위해

[14:54] 몇 가지를 시도하고 싶어하기 때문입니다.

[14:56] 이것은 실제로 정말 흥미롭습니다.

[14:58] 이 경우 웹사이트는 실제로

[15:00] 자바스크립트로 렌더링됩니다.

[15:02] 일반적으로 데이터를 스크래핑하려고 할 때

[15:04] 또 다른 도전입니다. 제가 사용해본 결과

[15:06] Bright Data는 스크래핑하는 데

[15:07] 아무런 문제가 없습니다.

[15:09] 그것도 정말 좋습니다. 실제로

[15:11] 이 웹사이트가 API를 사용하고 있다는 것을

[15:12] 발견했음을 볼 수 있습니다.

[15:14] 실제로 이 웹사이트가 사용하고 있는

[15:16] API를 찾아냈고 실제로

[15:18] 그 API 엔드포인트를 직접 스크래핑하려고

[15:21] 시도하고 있습니다. 이것은 실제로

[15:23] 더 효율적인 스크래핑 방법입니다.

[15:26] 그것도 정말 좋습니다.

[15:28] 실제로 다른 페이지로도 가려고 시도할 것입니다.

[15:29] 꽤 정교한 스크래핑입니다.

[15:31] 올바른 답을 얻고 싶어합니다.

[15:33] 그래서 여러 가지를 시도할 것입니다.

[15:35] 만약 그것이 마음에 들지 않는다면

[15:37] 모든 토큰을 소모하고 싶지 않으니

[15:39] 여기서 중단하겠습니다.

[15:40] 몇 가지 제한사항을 추가하고 싶을 수도 있습니다.

[15:42] 사용자가 제출하는 프롬프트에

[15:43] 뭔가를 추가하고 싶을 수도 있습니다.

[15:45] 사용자가 제출하는 프롬프트에 추가할 수 있습니다.

[15:47] 예를 들어 '도구를 3번 이상 사용하지 마세요' 같은 제한을

[15:49] 추가하거나 다른 보안 조치들을

[15:52] 넣고 싶을 수도 있습니다.

[15:53] 안전장치를 추가하는 것이 좋겠죠.

[15:55] 일반적으로 저는 더 많은 보안 조치를

[15:57] 추가해서 모든 것을 조금 더 안전하게

[15:59] 만드는 편입니다.

[16:01] 좀 더 나은 프롬프트를 사용한다면

[16:04] 어떻게 보일지 보여드리겠습니다.

[16:05] '이 웹사이트의 첫 페이지에 있는

[16:08] 아이템들의 데이터를 주세요' 같은 식으로요.

[16:11] 이런 식으로 말입니다.

[16:13] 이렇게 하면 좀 더 정확하게

[16:16] 무엇을 찾고 있는지 알 수 있습니다.

[16:19] 또한 사용자가 프롬프트를 정확히

[16:20] 작성하도록 유도할 수도 있습니다.

[16:22] 바로 시작되는 것을 볼 수 있습니다.

[16:24] 정말 빠르네요.

[16:26] 다시 추출 도구를 사용하고 있습니다.

[16:28] 여기서 실제로 LLM으로부터

[16:30] 최종 답변을 받게 됩니다.

[16:32] 여기서 원시 출력을 로깅하고 있습니다.

[16:34] 다른 관심 있는 정보들도

[16:36] 볼 수 있습니다.

[16:37] LLM의 출력을 보실 수 있습니다.

[16:39] 처음에 도구를 사용하려고 시도했습니다.

[16:42] 여기서 도구 사용 유형을 볼 수 있고

[16:44] 도구 이름과 사용된 토큰을 포함한

[16:46] 도구 호출도 보여줍니다.

[16:48] 많은 정보를 볼 수 있습니다.

[16:50] 기본적으로 LLM이 도구를 호출할 때

[16:52] 여기서 로깅하고 있어서

[16:54] 관련 정보를 볼 수 있습니다.

[16:56] 결국 LLM이 최종 결과를 가져왔고

[16:57] '훌륭합니다! API에서 제품 데이터를

[16:59] 가져왔습니다. 정보는 다음과 같습니다'

[17:01] 라고 말하며

[17:02] 요청한 모든 정보를 제공합니다.

[17:05] 물론 여기서 채팅에

[17:06] 별도의 메시지로 보여줄 수도 있고

[17:08] UI를 구축하는 경우

[17:11] 최종적으로 UI에 렌더링할 내용입니다.

[17:13] 사용된 토큰 수 등을 볼 수 있습니다.

[17:15] 이제 몇 줄의 코드와

[17:16] Bright Data MCP 서버로

[17:19] 꽤 정교한 AI 에이전트를 구축하고 있습니다.

[17:21] Bright Data의 새로운 MCP 서버를

[17:23] 꼭 확인해보세요. 설명란에 링크가 있습니다.

[17:25] Bright Data 팀 정말 잘했습니다.

[17:27] 이는 AI 에이전트를 위한

[17:29] 훨씬 더 고급 기능들을 해제한다고 생각합니다.

[17:30] 영상 스폰서를 해준 Bright Data에게

[17:33] 감사드리고 시청해주셔서 감사합니다.

[17:35] AI 애플리케이션 구축에 도움이 되었기를

[17:37] 바랍니다. 좋은 하루 보내시고

[17:38] 다음 영상에서 뵙겠습니다.

[17:40] 좋은 하루 보내세요.

[17:42] 다음 영상에서 만나요.

[17:43]