Skip to main content

Serwery MCP — integracja Claude Code z Figmą, Gmailem i bazami danych

TL;DR: Model Context Protocol (MCP) to sposób, w jaki LLM-y porozumiewają się z zewnętrznymi aplikacjami: od Figmy i Gmaila po bazy danych i przeglądarkę. W praktyce to kluczowy mechanizm integracji Claude Code z codziennymi narzędziami: Figma do designu, bazy danych do analiz, Chrome do scrapowania konkurencji. MCP zmienia Claude Code z chatbota w wielonarzędziowego agenta.

TL;DR

Model Context Protocol (MCP) to sposób, w jaki LLM-y porozumiewają się z zewnętrznymi aplikacjami -- od Figmy i Gmaila po bazy danych i przeglądarkę. W praktyce to kluczowy mechanizm integracji Claude Code z codziennymi narzędziami: Figma do designu, bazy danych do analiz, Chrome do scrapowania konkurencji. MCP zmienia Claude Code z chatbota w wielonarzędziowego agenta.

Kluczowe koncepcje

Czym jest MCP -- proste wyjaśnienie

"Jak macie takie dwa gołąbki, jednym jest Claude Code, drugim jest Figma i chcecie, żeby ze sobą były w stanie rozmawiać, no to wtedy właśnie za pomocą MCP łączycie te aplikacje."

MCP to otwarty protokół stworzony przez Anthropic, który definiuje jak LLM-y mogą korzystać z zewnętrznych narzędzi (tools), zasobów (resources) i promptów. W praktyce to "wtyczki" dla Claude Code.

MCP vs GitHub CLI -- alternatywne podejścia

W pokazał ciekawy przypadek -- zamiast instalować MCP do GitHuba, używa GitHub CLI bezpośrednio przez terminal Claude Code:

"Dzisiaj faktycznie MCP gdzieś tam jest challengeowane przez alternatywne podejścia. Między innymi dlatego, że jest pewien koszt korzystania z MCP. Jeżeli mamy obszerne interfejsy MCP z duża liczba narzędzi, to nam zjada pamięć podręczna."

"Wykorzystamy tak zwany GitHub CLI. To jest narzędzie konsolowe, które zupełnie bez związku ze sztuczną inteligencją pomaga nam wchodzić w interakcje z serwisem GitHub."

Wniosek: nie każda integracja wymaga MCP. Jeśli narzędzie ma dobre CLI, Claude Code może go użyć bezpośrednio przez terminal.

Konkretne serwery MCP wymienione w filmach

MCP Pencil (design)

Z -- użyty do tworzenia ekranu UI:

"Wykorzystuję serwer MCP Pencila, do którego się podpina. (...) Widzicie już tutaj zaczyna sobie gadać przez MCP z Pensilem. Zaglądał sobie do tego pliku i zaczął w nim tworzyć."

Workflow:

  • Pencil ma design system z komponentami
  • Claude Code łączy się z Pencil przez MCP
  • Prompt: "Zaprojektuj ekran strików" -> Claude analizuje istniejące komponenty -> generuje nowy ekran
  • Następnie ten sam design przenosi na kod aplikacji

"Na podstawie tego ekranu -- 'dodaj do mojej aplikacji design z Pencil Pulse Streak 2' -- i on w tym momencie połączy sobie, że po pierwsze działamy w kontekście kodu naszej aplikacji, po drugie za pomocą MCP Pencila on sobie zacznie działać z designem."

MCP Context7 (dokumentacja)

"Jest MCP Context7. To jest MCP do takiej bazy danych ze wszystkimi najświeższymi dokumentacjami dotyczącymi różnych języków programowania."

Przydatne gdy Claude Code halucynuje na temat nieaktualnego API.

MCP Figma

"Korzystam też z MCP Figmy na przykład do tego, żeby rozbić istniejąca stronę internetowa i skopiować ja do Figmy i rozbić ja na poszczególne komponenty."

MCP Gmail i Kalendarz

"Wyobraźcie sobie, że wy jezdzacie na tydzień na Kanary, wracacie i teraz chcecie zrozumieć na podstawie swoich maili, swoich spotkań jakie są najważniejsze wiadomości. Claude Code tutaj z podpiętymi narzędziami świetnie wam jest w stanie w tym pomoc."

MCP Chrome/Playwright (przeglądarkowy)

Z użyty do scrapowania ofert pracy:

"Chciałbym, żebyś wszedł w rolę eksperta SEO i przygotował raport dotyczący analizy keywordów mojej strony, porównując to również z konkurencją."

"Znajdź mi pięć ofert pracy na frontend inżyniera w Warszawie, wyciągnij wymagania, salary ranges do spreadsheetu. Skup się na Just Join."

Workflow: Claude Code uruchamia Chrome przez MCP, robi screenshoty, klika elementy, wyciąga dane do Excel.

MCP do własnych produktów

"Ja już mowie do większości swoich produktów -- tych zbudowanych z AI -- dobudowuje własne serwery MCP. Od tego momentu użytkownikami moich produktów są już nie tylko pracownicy, tylko pracownicy razem z agentem, a być może sami agenci."

Przykład: Igor zbudował MCP do swojej platformy kursowej i mógł z poziomu czata Claude zmieniać treść lekcji.

MCP Baymard (UX audit)

Z stworzył agenta RAG w N8N:

"Stworzyłem RAGa -- baza danych wektorowa, w której zwektoryzowałem sobie 300 MB guidelinów instytutu Baymarda."

Workflow N8N:

  • Nowy plik designu pojawia się w folderze
  • Agent analizuje obrazek
  • Zadaje pytania do wektorowej bazy guidelinów Baymarda
  • Generuje raport UX z priorytetami

Koszt MCP -- zjadanie kontekstu

Każdy podpięty MCP server "zjada" część okna kontekstowego opisy narzędzi, schematy parametrów:

"Jest pewien koszt korzystania z MCP. Jeżeli mamy obszerne interfejsy MCP z duża liczba narzędzi, również bardzo intensywnie opisujący dany serwis taki jak GitHub, po prostu to nam zjada pamięć podręczna."

Praktyczna rada: podłączaj tylko te MCP, które aktualnie potrzebujesz.

MCP w Replit

Z Igor potwierdził że Replit również obsługuje MCP i skille:

"Tak samo łączysz sobie MCP, tak samo masz skille też w replicie. Replit po jakimś czasie wprowadził skille."

Alternatywy dla MCP

Cytowane podejścia z filmów:

  • GitHub CLI -- bezpośrednie użycie narzędzi CLI zamiast dedykowanego MCP
  • WebFetch -- Claude Code sam wchodzi na stronę i pobiera dane
  • Pliki -- wrzucanie danych (CSV, JSON) bezpośrednio do folderu projektu

Jak to wdrożyć

  • Zainstalować i skonfigurować MCP Figma -- bezpośrednie przenoszenie designów do kodu
  • Stworzyć własne MCP dla produktów zespole -- zarządzanie CMS, bazy klientów
  • Skonfigurować MCP Context7 dla wszystkich developerów -- aktualna dokumentacja frameworków
  • Przetestować MCP Chrome/Playwright do automatycznego audytu UX stron klientów
  • Zbudować RAG z guidelinesami Baymarda (jak w ) do audytów e-commerce
  • Nie podłączać wszystkich MCP naraz -- tylko te potrzebne do bieżącego zadania (oszczędzanie kontekstu)
  • Rozważyć budowanie własnych MCP dla powtarzalnych integracji (Slack, Jira, klienckie API)

Narzędzia i komendy

Konfiguracja MCP w Claude Code


// .claude/settings.json
{
 "mcpServers": {
 "figma": {
 "command": "npx",
 "args": ["-y", "@anthropic-ai/mcp-figma"],
 "env": {
 "FIGMA_ACCESS_TOKEN": "your-token"
 }
 },
 "context7": {
 "command": "npx",
 "args": ["-y", "@anthropic-ai/mcp-context7"]
 },
 "pencil": {
 "command": "npx",
 "args": ["-y", "mcp-pencil"]
 }
 }
}

Użycie GitHub CLI zamiast MCP


# Instalacja GitHub CLI
brew install gh

# Logowanie
gh auth login

# Claude Code automatycznie użyje gh z terminala
# Prompt: "Użyj GitHub CLI. Wyszukaj template repositories na koncie [org]."

Przykład prompta z MCP Pencil


Na podstawie design systemu w Pencil "Zen Brutalist",
zaprojektuj nowy ekran [nazwa ekranu].
Użyj istniejących komponentów.
Następnie dodaj ten design do mojej aplikacji w src/pages/.

Przykład prompta z MCP Chrome


Wejdź na stronę justjoin.it.
Znajdź 5 ofert pracy na [stanowisko] w [miasto].
Wyciągnij: nazwa firmy, stanowisko, widelki płac, wymagania.
Zapisz wyniki w pliku Excel w folderze output/.

Budowanie własnego MCP (koncept z )


# Prosty MCP server w Python (FastMCP)
from fastmcp import FastMCP

mcp = FastMCP("bee-crm")

@mcp.tool
def get_client(client_id: str) -> dict:
 """Pobierz dane klienta z CRM zespół"""
 # integracja z bazą
 return {"id": client_id, "name": "..."}

@mcp.tool
def update_status(client_id: str, status: str) -> str:
 """Zmień status klienta"""
 # logika aktualizacji
 return f"Status zmieniony na {status}"

RAG z Baymardem w N8N (workflow z )


Trigger: Nowy plik w folderze -> 
 Extract image ->
 AI Agent (Claude/GPT) ->
 Tool: Baymard Guidelines (wektorowa baza danych) ->
 Output: Raport Markdown/Google Doc

Ograniczenia MCP

  • Zjadanie kontekstu -- każdy MCP zajmuje miejsce w oknie kontekstowym
  • Wolne działanie -- szczególnie MCP Chrome/Playwright (screenshoty, klikanie)
  • Niestabilność -- serwery MCP mogą nie odpowiadać (demo z -- MCP nie zadziałał na żywo)
  • Bezpieczeństwo -- nie podłączaj MCP do produkcyjnych baz danych bez zabezpieczeń

"Dzisiaj na Twitterze poszła informacja, że MCP już są martwe -- więc to był jakiś duży news." -- ale MCP nadal jest używany i rozwijany.

Powiązane tematy

  • 01-podstawy -- Podstawy Claude Code i jak zacząć
  • 02-context-engineering -- Zarządzanie kontekstem w tym kontekst z MCP
  • 04-spec-driven-development -- Jak MCP wspiera workflow produkcyjny