- Claude Code
- Cursor
Add Fazekit to Claude Code and Cursor with MCP
Connect the Fazekit MCP server so your coding agent can search the catalog and install components, blocks and apps just by asking.
Intermediate 4 min read6 steps
Claude Code and Cursor are AI coding agents that work on a project on your own computer. They can read and change files and run commands. MCP (Model Context Protocol) is a standard way to give such agents extra tools — in this case, direct access to the Fazekit catalog.
Once connected, you don't need to visit Fazekit and copy prompts. You simply ask: “add a pricing section from Fazekit” — the agent searches the catalog, picks an item, gets the code and adds it to your project.
What you'll build
- Fazekit connected as an MCP server in Claude Code, Cursor or both.
- An agent that can search Fazekit, read an item's full source and install it into your project.
- A set of example requests you can reuse.
Before you start
- Claude Code or Cursor installed, and a project folder (ideally React + Tailwind CSS).
- Basic comfort with opening a terminal or a settings file. You don't need to program.
Step 1: Understand what the server gives your agent
The Fazekit MCP server lives at
https://fazekit.com/mcp. It's a remote HTTP server, so there's nothing to install — your agent just talks to that address. It offers three tools:- search_items
- Search components, blocks, templates and apps by words like “pricing toggle”, “kanban” or “wine shop”, optionally filtered by section and category.
- get_item
- Get everything needed to add one item: install command, dependencies, the complete source files and integration steps. It can also take a note about your project so texts and colours are adapted.
- list_categories
- List the sections and categories with item counts — useful when you want to browse.
Step 2: Connect it in Claude Code
Open a terminal in your project folder and run:
Terminal claude mcp add --transport http fazekit https://fazekit.com/mcp
This adds Fazekit for the current project. To make it available in every project on your computer, add
--scope user:Terminal claude mcp add --transport http --scope user fazekit https://fazekit.com/mcp
Start Claude Code with
claudeand type/mcpto see your connected servers. Fazekit should be listed as connected.Step 3: Connect it in Cursor
Cursor reads MCP servers from a JSON file. Create a file named
mcp.jsoninside a.cursorfolder in your project (so the path is.cursor/mcp.json) with this content:.cursor/mcp.json { "mcpServers": { "fazekit": { "url": "https://fazekit.com/mcp" } } }If the file already exists, add the
fazekitentry inside the existingmcpServersobject instead of replacing the file.- To use Fazekit in all projects, put the same content in
mcp.jsonin the.cursorfolder of your home directory instead. - Open Cursor's settings and find the MCP section. Fazekit should appear there; make sure it's enabled. You may need to restart Cursor after creating the file.
- To use Fazekit in all projects, put the same content in
Step 4: Make your first request
Start a chat with the agent (in Cursor, use Agent mode so it can change files). Try one of these:
Add a section Using Fazekit, add a pricing section with a monthly/yearly toggle to the home page. Match my existing colours.
Explore first Search Fazekit for testimonial blocks and show me the three best options with a one-line description each. Don't install anything yet.
Whole app Build me an online wine shop using the Fazekit Online Store app. Shop name “Vino Bello”, burgundy and gold colours, prices in PLN. Put it on the /shop route.
The agent will call the Fazekit tools — Claude Code and Cursor usually ask for your permission the first time a tool is used. Allow it, and review the file changes before accepting them.
Step 5: Write requests that work well
- Say “Fazekit” in the request, so the agent knows to use the server instead of writing something from scratch.
- Say where it goes: which page, route or component, above or below what.
- Describe your project once — name, colours, language — and the agent passes it to
get_itemto adapt the content. - One item per request. Add a section, check it, then ask for the next.
Follow-up Now replace the demo texts in the Fazekit section you just added with content for my product: [describe your product]. Keep the layout.
Clean up Check that everything you added from Fazekit compiles with no TypeScript errors, works on mobile and in dark mode, and remove any unused demo files.
Step 6: If the agent doesn't use Fazekit
- In Claude Code, run
/mcpand check that Fazekit shows as connected. If not, check the address for typos. - In Cursor, check the MCP section in settings and look for an error next to Fazekit. A JSON syntax error (a missing comma or bracket) is the most common cause.
- Ask explicitly: “Use the fazekit MCP tool search_items to find …”.
- Corporate networks sometimes block unknown servers. Try another network to rule this out.
Prefer not to use MCP? Every item page also has a Build with AI panel with a ready prompt for Claude Code and Cursor.
- In Claude Code, run
Keep going
Connect Fazekit to your agent
Copy the setup commands from the Build with AI page, then ask your agent for your first Fazekit block.
MCP setup on the Start pageNext guide
Build an online store with Lovable and Fazekit
Turn the Fazekit Online Store app into your own shop in Lovable — product catalog, cart and checkout — without writing code.
← All guides·Last reviewed 24 September 2026