Skip to content
PageSugar Copy Markdown

Public, read-only and free. No API key.

Give your agent the source.

Connect your coding agent to PageSugar. Let it find beautifully designed Svelte and Tailwind components, check what they need, and bring the source into your project.

Connect your agent Copy as Markdown
Setup guides for
The connection
  • Streamable HTTP
  • No sign-in
  • No API key

01 / Connect

Pick your agent. Paste one thing.

The server is a single URL with no sign-in, so setup is a command or a few lines of config.

Server URL https://pagesugar.com/mcp

This is also the address of this page. Paste it into your agent to connect.

Showing setup for Claude Code.

Claude Code

Anthropic

  1. Option A Terminal

    Run this once. Add --scope user before the name to make it available in every project.

    Terminal 
    claude mcp add --transport http pagesugar https://pagesugar.com/mcp

  2. Option B Config file

    Or commit it to the repository so the whole team gets it.

    .mcp.json 
    {
  "mcpServers": {
    "pagesugar": {
      "type": "http",
      "url": "https://pagesugar.com/mcp"
    }
  }
}

Check it worked. Run /mcp inside Claude Code. The server is listed as connected.

Follows the Claude Code documentation, checked 17 September 2026. The command was confirmed with Claude Code 2.1.274.

The server returns catalogue information and source. Your agent applies any change to your project, with your permission. What it can and cannot do

Or skip the setup

Let your agent connect itself.

Copy this page as Markdown and paste it into your agent. It carries the server URL and the steps for every client, so the agent can find its own and do the rest.

Copy as Markdown View the Markdown

02 / Ask

Then just ask for what you need.

Your agent decides when to use the catalogue. These are good first requests.

  • Add a section

    Find a pricing section with three plans in the component catalogue and add it to my landing page. Match my existing colours.

  • Choose with constraints

    Search the catalogue for a newsletter signup that needs no extra dependencies. Show me what you find before you add anything.

  • Check before you commit

    Look up the FAQ accordion in the catalogue. Tell me what it depends on and which files it would add. Do not change my project yet.

  • Browse

    List the catalogue categories and tell me what is available for a marketing site.

You

Add a pricing section with three plans.

Your agent
  1. search_components Finds the closest matches
  2. get_component Checks dependencies and limits
  3. get_component_files Returns the exact source

Pricing section added. Yours to edit.

03 / Boundaries

It answers questions. Your agent does the work.

The server returns catalogue information and source. Anything that touches your project is done by your agent, with your permission.

What it can do

  • Search the catalogue from a plain description of what you need.
  • List categories and browse every published component with filters.
  • Read a component's versions, variants, props, usage, dependencies and license.
  • Return the complete source for an exact version, or one file at a time.
  • Give the ZIP bundle location with its SHA-256 checksum.

What it cannot do

  • It cannot write to your project. Your agent applies changes, with your permission.
  • It cannot run code, installers or shell commands.
  • It cannot read your files, your environment or anything outside the catalogue.
  • It has no account, no API key and no write operations of any kind.
  • It contains no language model. Your agent does the reasoning.

Send only what the tools need: a description of the component and public constraints such as “Svelte 5, no extra dependencies”. Never your source code, credentials or personal data. Treat a search query as something sent to a public service.

04 / Tools

Seven tools. All of them read-only.

Nothing here can change the catalogue or your project. Each tool only answers a question.

01 /

Discover

Find what the catalogue has.

  • list_categoriesLearn the categories and what each one holds.
  • list_componentsBrowse every published component with filters and pagination.
  • search_componentsFind the best matches for a described need.
02 /

Inspect

Decide whether it fits.

  • get_componentInspect versions, variants, props, usage, dependencies and limits.
03 /

Retrieve

Bring the exact source home.

  • get_component_filesGet the full file manifest and, when it fits, every runtime file.
  • get_component_fileRead one file, or a line range of it.
  • download_componentGet the ZIP bundle location, its checksum and the receipt.

05 / Help

If something is not working.

The client cannot connect.

Check that your client supports remote servers over Streamable HTTP and that the URL is exact, including the /mcp path. Clients that only speak stdio or the older SSE transport cannot connect directly.

Opening the endpoint in a browser shows this page.

That is expected. Browsers get this page; MCP clients send POST requests to the same URL and get the protocol.

My client only supports local (stdio) servers.

Use the mcp-remote bridge. Set the command to npx and the arguments to -y, mcp-remote and the endpoint URL.

A browser-based client is rejected with 403.

Requests that carry an Origin header are only accepted from allowed origins. Desktop and command-line clients send none and are not affected.

Files are missing from a result.

Check contentStatus. "manifest-only" means the release is larger than one response, so your agent should fetch files with get_component_file or use the bundle.

One URL. The whole catalogue.

Connect once, then build with components that are yours from the first copy.

Connect your agent Browse the components