Akademia · Serwery MCP

Serwery MCP: rozszerz możliwości Claude Code.

Model Context Protocol to standardowy sposób łączenia narzędzi AI z zewnętrznymi systemami. Dzięki serwerom MCP Claude Code kontroluje przeglądarkę, sięga do baz danych i automatyzuje złożone zadania. Na warsztat bierzemy Chrome DevTools MCP: agent testuje i debuguje aplikacje webowe wprost w Chrome.

Ostatnia aktualizacja:

Monitor z grafem połączonych narzędzi i usług: sieć serwerów MCP
Rozszerzalnośćnowe możliwości dla agenta
Chrome DevTools MCPtesty, debug i wydajność w przeglądarce
Node LTSi zainstalowany Google Chrome

Jeden protokół zamiast dziesiątek integracji.

Model Context Protocol (MCP) to otwarty standard łączenia AI z zewnętrznymi systemami: bazami danych, API, przeglądarką, narzędziami zespołu. Opublikowany przez Anthropic pod koniec 2024 roku, dziś wspierany przez cały rynek: od Claude Code, przez narzędzia OpenAI i Google, po edytory kodu. Od grudnia 2025 protokół rozwija Agentic AI Foundation działająca przy Linux Foundation, więc nie jest już projektem jednej firmy. Najkrócej: MCP jest dla AI tym, czym USB-C dla sprzętu — jeden port, do którego pasuje wszystko.

Zanim powstał, każda para „agent × narzędzie" wymagała osobnej integracji: inna dla przeglądarki, inna dla bazy, inna dla Jiry, i tak dla każdego agenta od nowa. MCP odwraca ten układ: narzędzie wystawia jeden serwer MCP, a korzysta z niego każdy zgodny klient. Piszesz raz, podłączasz wszędzie.

Jak to działa

Serwer MCP
Program-pomost przed konkretnym systemem: wystawia agentowi narzędzia (akcje do wykonania), zasoby (dane do odczytu) i gotowe szablony promptów. Serwer bazy danych da narzędzia do zapytań, serwer przeglądarki do klikania i czytania stron.
Klient
Aplikacja, w której pracuje agent: Claude Code, aplikacja desktopowa Claude, IDE. Klient łączy się z serwerami i udostępnia ich narzędzia modelowi.
Transport
Lokalnie serwer działa jako zwykły proces (stdio), zdalnie po HTTP. Z perspektywy agenta nie ma różnicy: widzi po prostu listę narzędzi.

Co z tego masz w codziennej pracy:

  • Rozszerzalność. Dodajesz agentowi nowe możliwości bez czekania na aktualizację samego narzędzia.
  • Integracje. Łączysz go z systemami, na których naprawdę pracuje Twój zespół.
  • Automatyzacja. Złożone przepływy (od projektu graficznego po wdrożenie) zamykasz w jednym poleceniu.
  • Monitoring. Agent śledzi i debuguje aplikacje w czasie rzeczywistym, zamiast zgadywać z opisu.

Od bazy danych po przeglądarkę.

Serwerów MCP są dziś tysiące, oficjalnych i społecznościowych. W pracy z zespołami najczęściej sięgamy po kilka grup:

  • Bazy danych: agent czyta schemat i sam pisze zapytania. Supabase i MySQL omawiamy w osobnych szkoleniach Akademii.
  • Narzędzia zespołu: GitHub, Jira, Slack. Agent zakłada zadania, komentuje zmiany w kodzie, raportuje postęp.
  • Projektowanie: serwer Figmy daje agentowi dostęp do projektu graficznego, z którego pisze gotowy komponent.
  • Przeglądarka: Chrome DevTools MCP i Playwright MCP. Agent klika, testuje i mierzy jak człowiek, tylko szybciej.

Chrome DevTools MCP: bohater tego szkolenia

Serwer od zespołu Chrome daje Claude Code bezpośrednią kontrolę nad przeglądarką. Agent testuje, debuguje i optymalizuje kod w rzeczywistym środowisku: analizuje błędy, mierzy wydajność i symuluje interakcje użytkownika. Konkretnie:

  • Interakcja z elementami i wypełnianie formularzy.
  • Zarządzanie oknami i emulacja urządzeń.
  • Monitoring sieci i analiza wydajności.
  • Screenshoty i dostęp do konsoli JavaScript.
  • Audyty Lighthouse: dostępność, SEO i dobre praktyki.
  • Podpięcie pod Chrome, w którym już pracujesz (flaga --auto-connect, Chrome 144+), zamiast osobnej instancji przeglądarki.

Aktualizacja: Google rozwija ten projekt pod nazwą Chrome DevTools for agents. Pakiet npm, plugin i komendy nadal używają nazwy chrome-devtools-mcp, a obok serwera MCP jest też CLI do pracy bez MCP.

Różnicę czuć od pierwszego dnia: zamiast opisywać agentowi błąd z przeglądarki, każesz mu samemu go obejrzeć. Dalej instalacja krok po kroku i zadania, od których warto zacząć.

Chrome DevTools MCP krok po kroku.

Wymagania

  • Node.js w aktualnej wersji LTS.
  • Zainstalowany Google Chrome (wersja stable lub nowsza).
  • Claude Code.
# weryfikacja wersji Node.js
node --version

Instalacja jako plugin (rekomendowana)

Główna ścieżka to plugin z marketplace. W pakiecie z serwerem MCP dostajesz Skills (umiejętności), których sama instalacja przez CLI nie dokłada. W Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Uwaga: po instalacji pluginu zrestartuj Claude Code i sprawdź dołączone Skills komendą /skills.

Alternatywa: instalacja przez CLI

Sam serwer, bez Skills, dodasz też z terminala. Zamknij Claude Code i uruchom:

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Aby wyłączyć telemetrię, dołącz flagę serwera:

claude mcp add chrome-devtools --scope user -- npx chrome-devtools-mcp@latest --no-usage-statistics

Uwaga: serwer widzi całą zawartość przeglądarki i może ją zmieniać. Przy --auto-connect agent działa na Twoim profilu Chrome, więc nie trzymaj w nim sesji ani danych, których nie chcesz mu pokazywać.

Składnia: kanoniczny zapis stdio ma separator: claude mcp add [options] <name> -- <command> [args...]. Separator -- jest opcjonalny przy prostym npx bez flag, ale wymagany, gdy przekazujesz serwerowi flagi z myślnikiem. Inaczej trafią one do claude mcp add, a nie do serwera.

Po instalacji uruchom Claude Code ponownie, aby serwer został wczytany. A jeśli później przejdziesz na plugin, najpierw usuń wpis z CLI, żeby konfiguracje się nie dublowały:

claude mcp remove chrome-devtools

Pierwsze zadania dla agenta

Serwer działa. Sprawdź go na własnym projekcie. Dobre polecenia na start:

  • „Przeanalizuj wydajność strony https://example.com".
  • „Sprawdź błędy JavaScript i wygeneruj poprawki".
  • „Przetestuj formularz kontaktowy".
  • „Zrób screenshot responsywności na różnych urządzeniach".

Łańcuch serwerów: przykład z naszych wdrożeń

Prawdziwa siła MCP zaczyna się, gdy agent łączy kilka serwerów w jeden przepływ. Scenariusz, który pokazujemy zespołom przy augmentacji: agent czyta projekt graficzny z Figmy, pisze na jego podstawie komponent React, testuje go w przeglądarce przez Playwright, a wynik zapisuje w bazie danych. Programista tylko nadzoruje. Formułuje cel i odbiera efekt. To ten sam mechanizm, który właśnie uruchomiłeś: jedna umowa między agentem a narzędziami, dowolnie składana w łańcuchy.

Powiązane szkolenia.

Claude Code

Instalacja, poziomy myślenia i workflow agentowy od podstaw.

MCP Supabase

Połączenie agenta z bazą Supabase — tryb read-only i bezpieczeństwo.

MySQL MCP Server

Agent na bazie MySQL: konfiguracja, operacje zapisu, pułapki wersji.

Chcecie, żeby tak pracował cały Wasz zespół?

Akademia to materiały. Wdrożenie to dwa kwartały na Waszym kodzie, z pomiarem efektu w DEVLens. Audyt 90 minut wystarczy, żeby sprawdzić, czy ma to u Was sens.

Umów rozmowę +48 505 091 200