Fazekit
  • 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.
  1. 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.
  2. 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 claude and type /mcp to see your connected servers. Fazekit should be listed as connected.

  3. Step 3: Connect it in Cursor

    Cursor reads MCP servers from a JSON file. Create a file named mcp.json inside a .cursor folder 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 fazekit entry inside the existing mcpServers object instead of replacing the file.

    • To use Fazekit in all projects, put the same content in mcp.json in the .cursor folder 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.
  4. 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.

  5. 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_item to 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.
  6. Step 6: If the agent doesn't use Fazekit

    • In Claude Code, run /mcp and 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.

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 page

Next 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