Pierwszy działający efekt pokazuję zwykle w 2-4 tygodnie. Zamiast slajdów i obietnic dostajesz rozwiązanie, które od razu możesz przetestować u siebie w firmie.

Ile kosztuje współpraca?

Szybki start produktu to od 15 000 PLN jednorazowo. Później dostępna jest opieka na abonament (od 5 000 PLN/mies) na rozwój i utrzymanie, oraz pakiet automatyzacji (od 3 000 PLN/mies) na kolejne usprawnienia. Dokładną wycenę podaję po 30-minutowej rozmowie.

Nie znam się na technologii, dam radę?

Tak. Rozmawiamy po ludzku, bez żargonu. Ty mówisz, co Cię uwiera w firmie, a ja zajmuję się całą techniczną stroną i dostarczam gotowe do użycia narzędzie.

Dla kogo jest ta oferta?

Dla firm, które tracą godziny na powtarzalną, ręczną pracę (wyceny, raporty, odpowiedzi, obsługa zamówień) i chcą to usprawnić bez budowania własnego zespołu programistów.

Jak zacząć współpracę?

Umów bezpłatną rozmowę na https://bartoszgaca.pl/rozmowa/. Opowiadasz, co chcesz usprawnić, a Ty dostajesz konkretny plan: co da się zrobić, ile to zajmie i ile kosztuje.

MCP Servers: Integrating Claude Code with Figma, Gmail and Databases

TL;DR: The Model Context Protocol (MCP) is how LLMs talk to external applications — from Figma and Gmail to databases and browsers. Instead of copy-pasting data into prompts, the model itself calls the API. The official Claude Code registry ships dozens of servers, and writing your own takes a single afternoon. MCP is what turns a chat model into an operational agent.

TL;DR

The Model Context Protocol (MCP) is how LLMs talk to external applications, from Figma and Gmail to databases and the browser. In practice it is the key mechanism for integrating Claude Code with everyday tools: Figma for design, databases for analysis, Chrome for scraping competitors. MCP turns Claude Code from a chatbot into a multi-tool agent.

Key concepts

What MCP is, in simple terms

"If you have two lovebirds, one is Claude Code and the other is Figma, and you want them to be able to talk to each other, then MCP is how you connect those applications."

MCP is an open protocol created by Anthropic. It defines how LLMs can use external tools, resources and prompts. In practice these are "plugins" for Claude Code.

MCP versus GitHub CLI: alternative approaches

One of the videos showed an interesting case. Instead of installing an MCP server for GitHub, the host used the GitHub CLI directly through the Claude Code terminal:

"Today MCP is being challenged by alternative approaches. Among other things because there is a cost of using MCP. If we have extensive MCP interfaces with a large number of tools, it eats our context."

"We will use the so-called GitHub CLI. It is a console tool that, completely unrelated to artificial intelligence, helps us interact with GitHub."

Conclusion: not every integration needs MCP. If a tool has a good CLI, Claude Code can use it directly through the terminal.

Specific MCP servers mentioned in the videos

Pencil MCP (design)

Used to create a UI screen:

"I am using the Pencil MCP server it connects to. You can see it already starting to talk to Pencil over MCP. It looked into that file and started creating inside it."

Workflow:

Pencil holds a design system with components
Claude Code connects to Pencil over MCP
Prompt: "Design a streaks screen". Claude analyzes the existing components and generates a new screen
Then the same design is carried over into the application code

"Based on that screen: 'add the Pulse Streak 2 design from Pencil to my app'. At that point it connects the dots: first, we are working in the context of our app's code, second, through the Pencil MCP it starts working with the design."

Context7 MCP (documentation)

"There is the Context7 MCP. It is an MCP for a database with all the latest documentation for various programming languages."

Useful when Claude Code hallucinates about an outdated API.

Figma MCP

"I also use the Figma MCP, for example to take an existing website, copy it into Figma and break it down into individual components."

Gmail and Calendar MCP

"Imagine you go to the Canary Islands for a week, you come back and now you want to understand, based on your emails and meetings, what the most important messages are. Claude Code with those tools connected can help you with that really well."

Chrome or Playwright MCP (browser)

Used to scrape job offers:

"I would like you to take the role of an SEO expert and prepare a report analyzing the keywords of my site, also comparing it with the competition."

"Find me five job offers for a frontend engineer in Warsaw, extract the requirements and salary ranges into a spreadsheet. Focus on Just Join."

Workflow: Claude Code launches Chrome through MCP, takes screenshots, clicks elements and extracts data into Excel.

MCP for your own products

"I already say this about most of my products, the ones built with AI: I add my own MCP servers to them. From that moment the users of my products are no longer just employees, but employees together with an agent, and maybe agents on their own."

Example: one host built an MCP server for his course platform and could change lesson content from the Claude chat.

Baymard MCP (UX audit)

One host built a RAG agent in n8n:

"I built a RAG, a vector database in which I vectorized 300 MB of Baymard Institute guidelines."

The n8n workflow:

A new design file appears in a folder
The agent analyzes the image
It queries the vector database of Baymard guidelines
It generates a UX report with priorities

The cost of MCP: eating context

Every connected MCP server "eats" part of the context window with tool descriptions and parameter schemas:

"There is a cost of using MCP. If we have extensive MCP interfaces with a large number of tools, describing a service like GitHub in great detail, it simply eats our context."

Practical advice: connect only the MCP servers you currently need.

MCP in Replit

One of the hosts confirmed that Replit also supports MCP and skills:

"You connect MCP the same way, and you also have skills in Replit. Replit introduced skills after a while."

Alternatives to MCP

Approaches quoted in the videos:

GitHub CLI: use CLI tools directly instead of a dedicated MCP server
WebFetch: Claude Code visits the page itself and pulls the data
Files: drop the data (CSV, JSON) straight into the project folder

How to implement it

Install and configure the Figma MCP: move designs straight into code
Build your own MCP servers for the team's products: CMS management, customer databases
Set up the Context7 MCP for all developers: current framework documentation
Test the Chrome or Playwright MCP for automated UX audits of client sites
Build a RAG with Baymard guidelines (as in the video) for e-commerce audits
Do not connect all MCP servers at once, only the ones needed for the current task (saves context)
Consider building your own MCP servers for repeatable integrations (Slack, Jira, client APIs)

Tools and commands

Configuring MCP in Claude Code

Per the Claude Code documentation, servers are added with claude mcp add and stored in .mcp.json (project scope, shared through version control) or ~/.claude.json (user scope).


# Local stdio server, shared with the team through .mcp.json
claude mcp add --scope project context7 -- npx -y @upstash/context7-mcp

# Remote HTTP server (the recommended transport for remote servers)
claude mcp add --transport http my-crm https://crm.example.com/mcp

# List configured servers
claude mcp list


// .mcp.json (project scope)
{
 "mcpServers": {
 "context7": {
 "command": "npx",
 "args": ["-y", "@upstash/context7-mcp"]
 }
 }
}

Figma ships its own official MCP server (Dev Mode). Pencil and other design tools document their own connection steps. Check the vendor's docs for the exact command, package names change.

Using the GitHub CLI instead of MCP


# Install the GitHub CLI
brew install gh

# Log in
gh auth login

# Claude Code will use gh from the terminal on its own
# Prompt: "Use the GitHub CLI. Search for template repositories in the [org] account."

Example prompt with the Pencil MCP


Based on the "Zen Brutalist" design system in Pencil,
design a new [screen name] screen.
Use the existing components.
Then add this design to my application in src/pages/.

Example prompt with the Chrome MCP


Go to justjoin.it.
Find 5 job offers for [position] in [city].
Extract: company name, position, salary range, requirements.
Save the results in an Excel file in the output/ folder.

Building your own MCP server (concept from the video)


# A simple MCP server in Python (FastMCP)
from fastmcp import FastMCP

mcp = FastMCP("bee-crm")

@mcp.tool
def get_client(client_id: str) -> dict:
 """Fetch client data from the team CRM"""
 # database integration
 return {"id": client_id, "name": "..."}

@mcp.tool
def update_status(client_id: str, status: str) -> str:
 """Change the client status"""
 # update logic
 return f"Status changed to {status}"

RAG with Baymard in n8n (workflow from the video)


Trigger: New file in folder ->
 Extract image ->
 AI Agent (Claude/GPT) ->
 Tool: Baymard Guidelines (vector database) ->
 Output: Markdown report / Google Doc

Limitations of MCP

Context consumption: every MCP server takes space in the context window
Slow operation: especially the Chrome or Playwright MCP (screenshots, clicking)
Instability: MCP servers may stop responding (in one demo the MCP did not work live)
Security: do not connect MCP to production databases without safeguards

"Today on Twitter there was news that MCP is already dead, so that was some big news." And yet MCP is still used and actively developed.