SONUB
EN English 한국어 日本語 中文 हिन्दी বাংলা اردو Español Português Français Deutsch Русский العربية Bahasa Indonesia Tiếng Việt ไทย Türkçe

How to enable notifications

Notifications are unavailable in this browser or on this address. Try a supported browser on the secure SONUB site.

If notifications are blocked, allow them in your browser settings.

  1. Open the site controls beside the address bar, or your browser’s site settings. Set Notifications for this site to Allow.
  2. In your device settings, allow notifications for your browser and check Do Not Disturb or Focus.
  3. Return to SONUB, reload the page, and use the bell to enable notifications.

On iPhone or iPad, add SONUB to your Home Screen, open it there, then allow notifications.

Log in Log out Display theme Default theme Dark theme Pink theme Chat 1:1 Chat Group Chat Forum Notices News Suggestions Main menu
The standard that connects to outside tools

MCP (Model Context Protocol)

Connect ready-made to your . See how three ways for an agent to work in a web — WebMCP, MCP and Playwright MCP — differ, and the safety rules.

Connecting an MCP server to your agent

An is only useful once it is connected to an . The connect commands ( · codex add), scopes and checks differ by , so each tool page has them once in its MCP section.

WebMCP vs Chrome DevTools MCP vs Playwright MCP

All three let an agent work in a web . What differs is who sets it up and how the agent works. WebMCP is a browser the website uses to declare "these features can be used on my site"; the other two are MCP servers you install on the agent side that drive the browser directly on any site.

Three ways to work in a browser, compared
Item WebMCP Chrome DevTools MCP Playwright MCP
What it is A browser API used by websites — a web standard still at the proposal stage (a Web Community Group draft) An MCP server installed on the agent side (Google team) An MCP server installed on the agent side (Microsoft)
Who sets it up The website developer — adds registerTool() to the site's to register tools The person using the agent — adds the to their agent The person using the agent — adds the server to their agent
How the agent works Calls the tools the site registered, by name. No need to read the screen and guess. Drives and inspects a real Chrome through the — clicks, typing, . Reads the page's accessibility tree (its structure) and clicks and types — it looks at structure, not .
Good at Uses that site's features accurately and fast, in my own signed-in — performance traces, requests, and — several browsers: , , WebKit
Limits Works only where the site has registered tools. As a new standard, few browsers and sites support it yet. Built for Chrome (and Chrome for Testing). When the screen changes, it has to find things again. When the page structure changes, it has to find things again. It works button by button, not by features the site defined.

Code to start with

WebMCP · shop.js
// WebMCP: the website registers its own feature as a tool
// (first explainer / Chrome preview: navigator.modelContext,
//  spec draft 2026-10-27: document.modelContext)
const modelContext = document.modelContext ?? navigator.modelContext;

modelContext.registerTool({
  name: "search-products",
  description: "Search this shop's products by keyword",
  inputSchema: {
    type: "object",
    properties: { query: { type: "string" } },
    required: ["query"],
  },
  async execute({ query }) {
    const response = await fetch("/api/products?q=" + encodeURIComponent(query));
    return await response.json();   // the agent gets this result
  },
});
Chrome DevTools MCP · Terminal
# Chrome DevTools MCP: add the server to your agent (Claude Code)
claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
Playwright MCP · Terminal
# Playwright MCP: add the server to your agent (Claude Code)
claude mcp add playwright -- npx @playwright/mcp@latest

WebMCP goes in the site's ; the other two go in your computer's . WebMCP's first explainer and the Chrome preview use navigator.modelContext; the 2026-10-27 draft uses document.modelContext — the spec is still changing.

As an analogy — a shop that hangs out a menu, and an errand robot

WebMCP = the order counter and menu a shop hangs out

  • The shop (the website) hangs a menu by the door that says "Please order at this counter".
  • The menu lists what you can order (tool names) and how to fill in the order form (the input ).
  • The robot (the agent) just reads the menu and hands an order form to the counter — it does not walk around the shop.
  • But it can order this way only at shops that have built a counter.

Chrome DevTools MCP · Playwright MCP = an errand robot sent by the customer

  • The customer (the person using the agent) sends an errand robot into the shop. The shop does not have to prepare anything.
  • The robot walks around the shop itself, reads the shelves, picks up items and presses the checkout buttons.
  • It can enter any shop, but when the shelves are rearranged it has to search again, so it can be slow and get lost.
  • The Chrome DevTools MCP robot is an who also checks the shop's wiring and meters (performance, network, console).
  • The Playwright MCP robot is a shopping robot that repeats a set shopping route exactly the same in several shops (browsers).

In short: at a shop with a counter, ordering at the counter is fast and accurate. At a shop without one, the robot has to look around itself. So the three do not replace each other — they are used together.

MCP safety rules

Safety: a tool is code that runs with your , and tool descriptions are untrusted unless the server is trusted. The specification asks hosts to get the user's consent before calling a tool. Install only servers you have read or trust, give a server the smallest access it needs, keep keys in environment variables rather than in code, and watch for — a web page or file that a tool reads may contain instructions aimed at the .

Sources

Learn it in the AI Course too

The AI Course MCP chapter — goal · tasks · progress

Guidelines

AI

Agent Tools

Vibe Coding

AI in Practice

Certificate

AI Class

IT Basics

Chat

Forum

Create

Community

More

Glossary

Pick a word you don't know. You'll see a simple explanation and related terms.

No matching term yet.

Pick a term to see its explanation.