Cara Scrape Laman Web dengan Ejen GitHub Copilot dalam VS Code

Mod ejen GitHub Copilot dalam VS Code boleh membaca repo anda, menjalankan arahan terminal, dan mengedit fail -- tetapi ia tidak boleh mengambil halaman web langsung dengan boleh dipercayai. Tambah CrawlForge MCP dan Copilot memperoleh 31 alat scraping, daripada fetch_url ke deep_research.

// .vscode/mcp.json
{
  "servers": {
    "crawlforge": {
      "type": "stdio",
      "command": "crawlforge-mcp-server",
      "env": { "CRAWLFORGE_API_KEY": "cf_live_your_key" }
    }
  }
}

Panduan ini membimbing anda mengaktifkan web scraping dalam ejen GitHub Copilot langkah demi langkah, dengan contoh TypeScript yang berfungsi dan penyelesaian masalah untuk masalah lazim.

Jadual Kandungan

• Masalahnya: Akses Web Terhad Copilot
• Prasyarat
• Langkah 1: Pasang CrawlForge MCP
• Langkah 2: Aktifkan Mod Ejen Copilot
• Langkah 3: Daftarkan MCP Server
• Langkah 4: Sahkan Alat Tersedia
• Langkah 5: Scrape Pertama Anda
• Contoh Penuh: Jana Klien REST daripada Dokumen Langsung
• Lanjutan: Aliran Kerja Berbilang Alat
• Penyelesaian Masalah
• FAQ

Masalahnya: Akses Web Terhad Copilot

Copilot Chat mempunyai peserta @web tetapi ia menulis semula pertanyaan anda menjadi carian Bing -- tiada akses halaman mentah, tiada pengekstrakan berstruktur, tiada pintasan anti-bot. Dalam mod ejen, Copilot boleh menjalankan arahan shell, jadi anda boleh menyalurkan curl | pandoc melalui panggilan alat, tetapi itu terlepas halaman yang dipaparkan dengan JavaScript dan mencetuskan sistem anti-bot dalam beberapa minit.

MCP menyelesaikan ini. Sejak VS Code 1.102 menghantar sokongan MCP ketersediaan umum pada pertengahan 2025, ejen Copilot boleh memanggil mana-mana MCP server yang anda daftarkan. CrawlForge mendedahkan 31 alat scraping sebagai MCP, jadi scraping menjadi tindakan ejen kelas pertama.

Prasyarat

• VS Code 1.102+ -- code --version
• Langganan GitHub Copilot (Individual, Business, atau Enterprise) dengan mod ejen diaktifkan
• Node.js 18+
• Akaun CrawlForge -- percuma di crawlforge.dev/signup

Langkah 1: Pasang CrawlForge MCP

npm install -g crawlforge-mcp-server
crawlforge-mcp-server --version
# crawlforge-mcp-server 4.8.1

Langkah 2: Aktifkan Mod Ejen Copilot

1. Buka tetapan VS Code (Cmd+, / Ctrl+,).
2. Cari chat.agent.enabled dan togolkannya.
3. Buka Copilot Chat (Ctrl+Alt+I / Cmd+Ctrl+I) dan tukar menu lungsur mod daripada "Ask" kepada "Agent."

Mod ejen ialah yang membolehkan panggilan alat MCP. Dalam mod "Ask" atau "Edit", Copilot mengabaikan MCP server yang didaftarkan.

Langkah 3: Daftarkan MCP Server

VS Code menyokong MCP pada dua skop:

• Ruang kerja -- .vscode/mcp.json di akar repo (dikongsi pasukan melalui git)
• Pengguna -- boleh diedit melalui arahan palet "MCP: Add Server" (peribadi)

Untuk scraping pasukan, gunakan konfigurasi ruang kerja:

// .vscode/mcp.json
{
  "servers": {
    "crawlforge": {
      "type": "stdio",
      "command": "crawlforge-mcp-server",
      "env": {
        "CRAWLFORGE_API_KEY": "${env:CRAWLFORGE_API_KEY}"
      }
    }
  }
}

Kemudian eksport kunci dalam shell anda (jangan komitkannya):

export CRAWLFORGE_API_KEY="cf_live_your_key_here"

Atau gunakan ${input:apiKey} dan VS Code akan menggesa sekali setiap ruang kerja.

Langkah 4: Sahkan Alat Tersedia

1. Buka Copilot Chat.
2. Klik ikon alat dalam pengepala sembang.
3. Sahkan crawlforge disenaraikan dengan 31 alat. Nyahtanda mana-mana yang anda mahu sembunyikan.

Jika senarai kosong, lompat ke Penyelesaian Masalah.

Langkah 5: Scrape Pertama Anda

Dalam Copilot Chat (mod ejen), tampal:

Petunjuk #crawlforge menolak Copilot ke arah alat yang betul. Copilot memanggil fetch_url (1 credit), menerima HTML, menghuraikan tajuk, dan mengembalikannya sebaris.

Contoh Penuh: Jana Klien REST daripada Dokumen Langsung

Inilah aliran kerja konkrit: jana secara automatik klien Stripe bertaip daripada dokumentasi langsung.

Gesa ejen Copilot:

Copilot mengeluarkan panggilan MCP ini:

// What Copilot sends via MCP to CrawlForge
{
  "tool": "extract_content",
  "arguments": {
    "url": "https://docs.stripe.com/api/charges/create",
    "options": { "format": "markdown" }
  }
}
// Response: clean markdown of the endpoint docs

Copilot membaca markdown tersebut dan menulis:

// src/clients/stripe-charges.ts
import { z } from 'zod';

export const CreateChargeParams = z.object({
  amount: z.number().int().positive(),
  currency: z.string().length(3),
  source: z.string().optional(),
  customer: z.string().optional(),
  description: z.string().max(500).optional(),
  receipt_email: z.string().email().optional(),
  statement_descriptor: z.string().max(22).optional(),
});

export type CreateChargeParams = z.infer<typeof CreateChargeParams>;

export async function createCharge(params: CreateChargeParams) {
  const validated = CreateChargeParams.parse(params);
  const body = new URLSearchParams();
  for (const [key, value] of Object.entries(validated)) {
    if (value !== undefined) body.append(key, String(value));
  }

  const response = await fetch('https://api.stripe.com/v1/charges', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.STRIPE_SECRET_KEY}`,
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body,
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(`Stripe error: ${error.error?.message ?? response.statusText}`);
  }

  return response.json();
}

Kos: 2 credits (satu panggilan extract_content). Ulang untuk setiap titik akhir Stripe dan anda mempunyai klien bertaip penuh yang diterbitkan daripada dokumen langsung.

Lanjutan: Aliran Kerja Berbilang Alat

Ejen Copilot cemerlang dalam merangkai alat. Contoh gesaan:

Copilot menjalankan tiga panggilan MCP secara berurutan, menyalurkan hasil ke hadapan, dan menulis markdown. Jumlah kos: ~11 credits (5 + 2 + 2 + 2).

Rujukan Pantas Credit

Penyelesaian Masalah

Senarai alat kosong -- Mod ejen dimatikan. Aktifkan chat.agent.enabled dalam tetapan dan tukar mod sembang ke "Agent."

"Spawn ENOENT: crawlforge-mcp-server" -- VS Code tidak dapat mencari binari tersebut. Gunakan laluan mutlak dalam .vscode/mcp.json: "command": "/usr/local/bin/crawlforge-mcp-server".

Copilot mengabaikan MCP server -- Awali gesaan anda dengan #crawlforge atau namakan alat secara eksplisit: "Use fetch_url to...". Copilot kadangkala memilih alat terbina dalam secara lalai.

401 Unauthorized -- Pemboleh ubah env tidak sampai ke server. Semak echo $CRAWLFORGE_API_KEY dalam shell yang sama yang melancarkan VS Code. Pada macOS, VS Code yang dilancarkan secara GUI tidak mewarisi env shell -- lancarkan melalui code . daripada terminal.

Konfigurasi MCP ruang kerja tidak dimuatkan -- VS Code tidak mempercayai .vscode/mcp.json secara automatik. Buka fail tersebut, klik pemberitahuan "Trust", kemudian muat semula tetingkap.

Langkah Seterusnya

• Rujukan persediaan penuh: Penyepaduan VS Code dalam dokumentasi CrawlForge
• Baca gambaran keseluruhan 31 alat untuk melihat kit alat penuh
• Kaji penjelasan protokol MCP tentang cara VS Code bercakap dengan server
• Lihat dokumen permulaan untuk API REST
• Bandingkan dengan alternatif Firecrawl jika anda sedang menilai vendor scraping

Mula secara percuma dengan 1,000 credits di crawlforge.dev/signup.