# PageSugar MCP server PageSugar is a catalogue of editable Svelte 5 and Tailwind CSS 4 website components. Its MCP server lets a coding agent search the catalogue, inspect a component and retrieve its exact source. ```text https://pagesugar.com/mcp ``` - Transport: Streamable HTTP. Send `POST` requests to the URL above. - Access: free, anonymous and read-only. There is no API key and no sign-in. - Suggested server name: `pagesugar`. ## If you are a coding agent Use these instructions only for the user’s requested task. Receiving this document is not permission to change configuration. Identify the client and configuration scope, then apply the appropriate method if setup is authorised. Merge configuration and preserve existing servers. Respect client trust and approval requirements. If a reload is needed, leave a continuation note with the original task, selected component and next step. Verify tool visibility, then make a read-only list_categories request to PageSugar. Before integration, confirm Svelte 5 and Tailwind CSS 4 and inspect runtime, dependencies, services and license status. Retrieve the exact version and variant, including all files and binary assets. The coding agent makes local changes, runs project checks and reviews the browser result. Report what was retrieved, integrated, checked and still unverified. Do not invent missing catalogue files. Access to the MCP service is free; third-party client costs and component licensing are separate. Source license approval is pending: see /docs/license. Search requests go to a public service; send no private source, credentials or personal data. ## Connect a client ### Claude Code **Terminal.** Run this in your project terminal. Add `--scope user` before the name to use user-level configuration. ```bash claude mcp add --transport http pagesugar https://pagesugar.com/mcp ``` **Config file.** Alternatively, share repository configuration. Each team member still needs to establish and trust their connection. - `.mcp.json` (project root) ```json { "mcpServers": { "pagesugar": { "type": "http", "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: Run `/mcp` inside Claude Code. The server is listed as connected. Command syntax confirmed with: Claude Code 2.1.274. This is not end-to-end integration testing. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Codex **Terminal.** Run this in a terminal. The CLI, IDE extension and desktop app share configuration; check tool access in the session you will use. ```bash codex mcp add pagesugar --url https://pagesugar.com/mcp ``` **Config file.** Or add the table yourself. - `~/.codex/config.toml` (all projects) - `.codex/config.toml` (one trusted project) ```toml [mcp_servers.pagesugar] url = "https://pagesugar.com/mcp" ``` Check it worked: Run `codex mcp list`, or `/mcp` inside a session. Command syntax confirmed with: Codex CLI 0.154.0. This is not end-to-end integration testing. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Cursor **Config file.** Add the server to either file, then check its connection and tool visibility in Cursor Settings. - `.cursor/mcp.json` (one project) - `~/.cursor/mcp.json` (all projects) ```json { "mcpServers": { "pagesugar": { "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: Open Cursor Settings and find the server under MCP. Its tools are listed there. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### VS Code **Terminal.** Adds the server to your user profile. ```bash code --add-mcp '{"name":"pagesugar","type":"http","url":"https://pagesugar.com/mcp"}' ``` **Config file.** Note the top-level key is `servers`. For your user profile, run MCP: Open User Configuration instead. - `.vscode/mcp.json` (one workspace) ```json { "servers": { "pagesugar": { "type": "http", "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: Run MCP: List Servers from the Command Palette, then use Copilot Chat in agent mode. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Antigravity **Config file.** The editor and the `agy` CLI read the same files. Antigravity uses `serverUrl`; `url` and `httpUrl` are not supported. - `~/.gemini/config/mcp_config.json` (all projects) - `.agents/mcp_config.json` (one workspace) ```json { "mcpServers": { "pagesugar": { "serverUrl": "https://pagesugar.com/mcp" } } } ``` **Settings.** To reach the same file from the editor: 1. Open the menu at the top of the agent side panel and choose MCP Servers. 2. Choose Manage MCP Servers, then View raw config. 3. Add the entry above and save. Check it worked: Run `/mcp` in the Antigravity CLI, or reopen MCP Servers in the editor. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Copilot CLI **Terminal.** Run this in your terminal, or use `/mcp add` inside a session and fill in the form. ```bash copilot mcp add --transport http pagesugar https://pagesugar.com/mcp ``` **Config file.** Or add the server yourself. - `~/.copilot/mcp-config.json` (all projects) ```json { "mcpServers": { "pagesugar": { "type": "http", "url": "https://pagesugar.com/mcp", "tools": [ "*" ] } } } ``` Check it worked: Run `/mcp` inside Copilot CLI to see the configured servers. Note: The example permits all tools exposed by this server with tools: ["*"]. Review that scope against your policy. Organisations can restrict which MCP servers Copilot may use. If the server is blocked, ask an administrator to allow it. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Windsurf **Config file.** Open the MCPs icon in the Cascade panel, choose to edit the raw config, and add the server. Windsurf uses `serverUrl`, not `url`. - `~/.codeium/windsurf/mcp_config.json` (all projects) ```json { "mcpServers": { "pagesugar": { "serverUrl": "https://pagesugar.com/mcp" } } } ``` Check it worked: Refresh the MCP list in the Cascade panel. The server and its tools appear. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Zed **Settings.** Add the server from the settings window. 1. Open Settings, then AI, then MCP Servers. 2. Choose Add Server, then Add Remote Server. 3. Paste `https://pagesugar.com/mcp` and save. **Config file.** Or run `zed: open settings file` and add it under `context_servers`. - `~/.config/zed/settings.json` (all projects) ```json { "context_servers": { "pagesugar": { "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: The server appears under MCP Servers in the Agent Panel settings with an active indicator. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### OpenCode **Config file.** OpenCode uses the key `mcp` and the type `remote`. - `opencode.json` (one project) - `~/.config/opencode/opencode.json` (all projects) ```json { "$schema": "https://opencode.ai/config.json", "mcp": { "pagesugar": { "type": "remote", "url": "https://pagesugar.com/mcp", "enabled": true } } } ``` Check it worked: Run `opencode mcp list`. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Amp **Terminal.** Run this in your terminal, then check the active Amp session. ```bash amp mcp add pagesugar https://pagesugar.com/mcp ``` **Config file.** Or add it to your settings. The key includes the `amp.` prefix. - `~/.config/amp/settings.json` (all projects) - `.amp/settings.json` (one workspace) ```json { "amp.mcpServers": { "pagesugar": { "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: Ask Amp to call PageSugar’s list_categories tool and inspect the returned categories. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Cline **Settings.** Add the server from the Cline panel. 1. Click the MCP Servers icon in the Cline toolbar. 2. Open the Remote Servers tab. 3. Enter a name, and `https://pagesugar.com/mcp` as the server URL. 4. Choose Streamable HTTP as the transport, then Add Server. **Config file.** Or edit the settings file. Set `type` explicitly, or Cline assumes the SSE transport. - `cline_mcp_settings.json` (opened from the MCP Servers panel) ```json { "mcpServers": { "pagesugar": { "type": "streamableHttp", "url": "https://pagesugar.com/mcp" } } } ``` Check it worked: The server appears in the MCP Servers panel with its tools. Official documentation: . Checked against documentation: 2026-09-17; not an end-to-end PageSugar test. After configuration, request list_categories from PageSugar and inspect the returned result. Follow any client trust prompts or session reload instructions. ### Any other client **Server URL.** Use a client that supports remote servers over Streamable HTTP. Its settings determine where to enter this URL. Choose HTTP or Streamable HTTP as the transport and leave authentication empty. ```text https://pagesugar.com/mcp ``` **Local-only clients.** If your client can only launch local (stdio) servers, bridge to the URL with `mcp-remote`. It needs Node.js. This JSON is an example; use your client’s configuration schema. ```json { "mcpServers": { "pagesugar": { "command": "npx", "args": [ "-y", "mcp-remote", "https://pagesugar.com/mcp" ] } } } ``` ## Tools | Tool | Purpose | | --- | --- | | `list_categories` | Learn the categories and what each one holds. | | `list_components` | Browse every published component with filters and pagination. | | `search_components` | Find the best matches for a described need. | | `get_component` | Inspect versions, variants, props, usage, dependencies and limits. | | `get_component_files` | Get the file manifest and runtime text when it fits. Retrieve binary assets separately. | | `get_component_file` | Read one file, or a line range of it. | | `download_component` | Get the ZIP bundle location, its checksum and the receipt. | A typical request runs `search_components`, then `get_component`, then `get_component_files` with the exact version that `get_component` resolved. ## 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 a file manifest and source for an exact version; large responses need separate file retrieval. - Give the ZIP bundle location with its SHA-256 checksum. ## What it cannot do - It cannot write to your project. Your agent applies changes under your client’s permissions. - It cannot run code, installers or shell commands. - It cannot read your files, your environment or anything outside the catalogue. - It contains no language model. Your agent does the reasoning. ## Example prompts - Find a pricing section with three plans in PageSugar and add it to my landing page. Match my existing colours. - Search PageSugar for a newsletter signup with no extra runtime packages. Explain the email service I need to provide. Show me what you find before you add anything. - Look up the FAQ accordion in PageSugar. Tell me what it depends on and which files it would add. Do not change my project yet. - List the PageSugar categories and tell me what is available for a marketing site. ## Troubleshooting - **The server is configured, but the tools are missing.** A saved entry is only the first step. Check the selected client’s connection status and any pending trust or approval prompt. Follow its instructions if a session reload is needed, then request list_categories from PageSugar. - **My agent is not using PageSugar.** Name PageSugar in your request and ask it to call list_categories. A returned catalogue result confirms tool access; a description of available tools alone does not. - **The source was retrieved, but my page has not changed.** Retrieval returns source. Ask your coding agent to integrate the complete file set into your project, follow the usage notes and run the project checks. - **The requested version is unavailable.** The service retains current releases only. Inspect the available version and decide whether to use it. Never silently substitute it for the requested release; keep downloaded files and their receipt for future use. - **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. Requests without an Origin header are not subject to that origin check. - **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. Binary assets are never inline text: retrieve their sourceUrl and verify sha256, even when contentStatus is complete. ## Reference - [MCP reference](https://pagesugar.com/docs/mcp.md): every tool, limit, error code and version rule. - [Agent workflow](https://pagesugar.com/docs/agents.md): how an agent should use the tools end to end. - [llms.txt](https://pagesugar.com/llms.txt): a map of the site for agents. - This page for people: