VS Code + Wayfern

The chat in VS Code reads the live web.

MCP: Add Server
OAuth on the first connection
code --add-mcp from a shell

The agent in VS Code knows your workspace. A docs page, a search result or your production site is outside it, and pages that block bots return a challenge page to a plain fetch.

Add Wayfern as an MCP server, and the agent calls scrape_page, search_web and capture_screenshot from the chat. VS Code opens the Wayfern sign-in on the first connection.

acme-app

Chat

Ask in agent mode

List the TypeScript 6.0 changes that break this workspace.

Running scrape_page

Ran scrape_page

wayfern (MCP Server) · …/typescript-6-0

Three changes break this workspace:

1. types is [] by default. Add "node" in tsconfig.json.

2. baseUrl is deprecated. 14 imports in src use it.

3. strict is on by default. 6 new errors in src/db.

credits_charged: 1

Ask about your workspace

Agent Auto

>MCP: Add Server

MCP: Add Serverrecently used

MCP: List Servers

MCP: Browse MCP Servers

Choose the type of MCP server to add

Command (stdio)

HTTP (HTTP or Server-Sent Events)

https://api.wayfern.com/mcp

Enter the server URL. Press Enter to confirm.

wayfern

Enter the server ID. Press Enter to confirm.

wayfern.com/oauth/authorize

VS Code wants to use your Wayfern account

It can call the Wayfern tools and spend your credits.

Allow Cancel

Signed in. Back to VS Code.

main JSON

Setup

Add the server from the Command Palette.

These steps follow VS Code's guided flow. Turn on the AI features in VS Code first.

1
Run the command

Open the Command Palette and run MCP: Add Server. Choose HTTP (HTTP or Server-Sent Events).
2
Enter the server

Paste the server URL. Enter wayfern as the server ID.
URL

https://api.wayfern.com/mcp
3
Pick where it goes

For all your workspaces, select Global, then Copilot Global. VS Code writes the server to this file.
~/.copilot/mcp-config.json

{ "mcpServers": { "wayfern": { "type": "http", "url": "https://api.wayfern.com/mcp" } } }
4
Sign in

Review the trust prompt before you accept it. A browser window opens on wayfern.com on the first connection. Sign in and click Allow.

Ask in chat

prompt

Read the TypeScript 6.0 release notes and list the changes that break code in this workspace.

Other ways to connect

A workspace file

To share the server with a repo, use .vscode/mcp.json with the top key servers. VS Code keeps this file for compatibility, and the guided flow marks it as deprecated.
.vscode/mcp.json

{ "servers": { "wayfern": { "type": "http", "url": "https://api.wayfern.com/mcp" } } }
From a shell

code --add-mcp adds the server to your VS Code user profile configuration.
bash

code --add-mcp '{"name":"wayfern","type":"http","url":"https://api.wayfern.com/mcp"}'

With a token

For a machine where no one signs in. The Copilot Global file reads ${WAYFERN_API_TOKEN} from the environment in header values.

~/.copilot/mcp-config.json

{
  "mcpServers": {
    "wayfern": {
      "type": "http",
      "url": "https://api.wayfern.com/mcp",
      "headers": { "Authorization": "Bearer ${WAYFERN_API_TOKEN}" }
    }
  }
}

As an agent skill

VS Code loads skills from ~/.copilot/skills, ~/.agents/skills and ~/.claude/skills. The skill needs WAYFERN_API_TOKEN in the environment.
bash

mkdir -p ~/.copilot/skills/wayfern curl -fsSL https://wayfern.com/skills/wayfern/SKILL.md -o ~/.copilot/skills/wayfern/SKILL.md

Route

VS Code signs in to the remote server.

VS Code supports OAuth for remote MCP servers. It registers itself with Wayfern, so the sign-in needs no client ID and no token in a file.

Remote MCP OAuth sign-in: Best fit; MCP: Add Server, then a sign-in on wayfern.com.
MCP + token Authorization header: Works; headers with ${WAYFERN_API_TOKEN} in ~/.copilot/mcp-config.json.
Agent skill SKILL.md: Works; Put SKILL.md in ~/.copilot/skills/wayfern. The agent runs curl in the terminal.
REST API api.wayfern.com/api/v1: Works; The agent can write code that calls api.wayfern.com/api/v1 directly.
Browser API Playwright over CDP: Works; The agent can write Playwright code that connects to a Wayfern browser over CDP.

Example tasks

Work from the chat

01

Read release notes

“Read the TypeScript 6.0 release notes and list the changes that break code in this workspace.”

scrape_page returns markdown for 1 credit.
02

Copy an API reference

“Map the URLs under docs.example.com/api, then crawl the 25 reference pages into docs/vendor as markdown.”

map_site bills 2 credits for each 10 URLs. crawl_site bills 1 credit a page.
03

Compare two widths

“Capture our production home page at 1440 and 390 pixels wide and compare the hero section.”

capture_screenshot costs 5 credits a capture.
04

Match the fonts

“List the fonts that vercel.com serves, with weights and formats, and add matching @font-face rules to our CSS.”

site_fonts costs 5 credits for a site.

Tools

What VS Code can call

The same tools on every route, at the REST API rates. Every result reports credits_charged.

All tool inputs

scrape_page Fetch one page through an anti-detect browser and return clean markdown, HTML, links and metadata. The screenshot, pdf and json formats add +4 credits (once); summary adds +2. 1 credit / page
extract_data Extract structured data from one or more pages with a prompt and an optional JSON Schema. Re-running over pages already fetched is free. 1 credit / uncached source page
map_site List a site's URLs from its sitemaps and page links. 2 credits / 10 URLs
capture_screenshot Capture a clean image of a page: cookie banners and ads removed, lazy images loaded, tall pages captured end to end. Returns a short-lived download URL and an artifact key, not image bytes. Slices of a full page cost nothing extra; a fail_if_contains match is not charged. 5 credits / capture
brand_profile Identity, colours, logos, social links and company metadata for a domain. 10 credits / profile
site_styleguide Colours, typography, spacing, radii, shadows and the design tokens a site declares. 10 credits / site
site_fonts Font families, where each is served from, available weights, file formats and where they are used. 5 credits / site
crawl_site Start a bounded multi-page crawl. Returns a job id immediately and charges nothing up front; pages are billed as the crawl runs. 1 credit / successful page
crawl_status Poll a crawl started with crawl_site and read a page of its results. The pages were billed as they were crawled. Free
search_web Search Google, Bing, and DuckDuckGo. Returns ranked results, ads, provider failures, pagination, and related queries. 2 credits / provider page
list_search_engines List live provider ids and labels. Free

Good to know

Policies: Your organization can restrict which MCP servers you can add.
Tool calls: Review the tool approval requests as they appear. Expand a tool call in the chat to see which server it came from.
Sign in again: To remove the stored client registration, run Authentication: Remove Dynamic Authentication Providers.