Connect your coding agent once. Then describe what you need, like a carousel, a scroll animation or a shader background. Your agent finds the right HorizonX component, customizes it and adds the real code to your project as HTML, Svelte or React.
The HorizonX MCP server connects your coding agent to our catalog. Your agent can search every component, read its settings and export working code straight into your project. Add the server, sign in to HorizonX when your agent asks, and you are done. It works with Claude Code, Codex CLI, Cursor, VS Code with Copilot, Windsurf and Gemini CLI, and with any other client that supports remote MCP.
You need
An active HorizonX membership. See plans and pricing.
We will show you the exact setup for it.
No key to copy. Claude Code opens HorizonX in your browser; sign in with your HorizonX account and approve access.
Run this in your terminal
claude mcp add --transport http horizonx https://horizonx.so/api/mcp
claude mcp login horizonxThe second command opens HorizonX in your browser. Sign in and approve, and the tools are ready. You can also sign in later from /mcp inside Claude Code. Claude Code MCP docs
Ask in your own words. The more you say about what you need and where it goes, the better the result.
Try this in Claude Code
Find a before-and-after image comparison slider on HorizonX and add it to the case study page as a Svelte component.
Add HorizonX as a connector and sign in. Whether you can add connectors depends on your Claude or ChatGPT plan.
Claude app
claude.ai and Claude Desktop
Select Add, then sign in to HorizonX and approve access.
ChatGPT
chatgpt.com and the ChatGPT app
Select +, then Add custom MCP server. Paste the address below, choose OAuth, then sign in to HorizonX and approve access.
https://horizonx.so/api/mcp
Ask in plain English, in the chat you already use. Here is what your agent does with each request.
Say what you need and where it goes. Your agent finds the closest match and writes the file into your project.
> Find an image comparison slider on HorizonX and add it to the case study page in React.
horizonx · search_components
query: "image comparison slider"
horizonx · get_component
settings · html, svelte, react
horizonx · export_component
framework: "react"
Added src/components/ComparisonSlider.jsx
One request: search, inspect, export. Done.
Ask for options first. Searching and browsing never use up your daily allowance.
> What hero backgrounds does HorizonX have? Show me three before you pick one.
horizonx · search_components
query: "hero background"
Here are three options and what each one does. Which one do you want?
Nothing is exported until you choose.
Tell it which settings to change. Your agent checks what can be adjusted and exports the component already configured.
> Export the skewed carousel as Svelte, with rounder corners and autoplay off.
horizonx · get_component
reads every setting and its range
horizonx · export_component
framework: "svelte", with your settings
Added src/lib/SkewedCarousel.svelte
Your settings, already applied.
Point it at a section you already have. It swaps in components where there is a good match and leaves the rest of your code alone.
> Rebuild this landing section with HorizonX components wherever one fits.
horizonx · search_components
one search for each part of the section
horizonx · export_component
only the parts with a good match
Swapped in two components. Your pricing table is unchanged.
Your code stays. Components go where they fit.
Your agent gets six tools: three for components, textures and shaders, and three for the Library, each set listed in the order it uses them. It decides when to call each one. You just describe what you want on the page.
search_componentsDescribe what you need in plain words, like "cards that tilt on hover" or "ASCII effect on a photo", and your agent gets the components, textures and shaders that match. With no description, it lists everything available.
get_componentAll the details for one component: what it does, which formats it exports to, and every setting with its current value and allowed range.
export_componentThe same code the Export button gives you on the site: standalone HTML, a Svelte component or a React component, with the settings your agent chose already applied.
search_librarySearches the Library the same way: landing pages and site templates, UI kits, design systems, and image and video assets.
get_library_itemWhat a Library product includes, its format (code, Figma or media) and the files it ships, so your agent knows what it is getting before it downloads. It does not count toward your limits.
download_library_itemShort-lived links to the product files, which your agent fetches straight into your project. Uses one download from your plan, the same as downloading on the site.
Yes. Any active HorizonX membership works. We check your membership on every request, so your agent stops getting results if your membership ends and works again as soon as you renew. There is nothing to set up again.
It grows with your plan. Starter: up to 30 different components a day and 100 in any 30 days. Pro: up to 60 different components a day and 200 in any 30 days. Max: up to 150 different components a day and 600 in any 30 days. The day resets at midnight UTC. A component you already exported does not count again, neither that day nor within the 30 days, and searching or reading details never counts. You can see how many you have used in Settings → Developer.
Yes. When your agent downloads a Library product, such as a UI kit or a template, it uses your plan’s download limits, the same ones as downloading on the website. It is not part of the component allowance above. Downloading the same product again on the same day does not count again, and searching the Library or checking a product’s files never counts.
Any client that supports remote MCP over Streamable HTTP. This page has step-by-step setup for Claude Code, Codex, Cursor, VS Code with Copilot, Windsurf and Gemini CLI, plus the values any other client needs. Most of them connect by signing in to HorizonX in your browser, with no key to copy; Windsurf, and any client that cannot sign in, uses an API key instead.
Usually not. Claude Code, Codex, Cursor, VS Code and Gemini CLI can sign in to HorizonX directly: the first time they connect, they open HorizonX in your browser and you approve access. Use a key for clients that cannot sign in, or for scripts and servers with no browser. You can create one in Settings → Developer.
Yes. Add HorizonX as a custom connector with the address https://horizonx.so/api/mcp, then sign in to HorizonX and approve access when it asks. There is no key to copy. Whether you can add custom connectors depends on your plan with claude.ai or ChatGPT.
Every interactive component on the Components page, every texture look and every shader, which your agent can customize and export as code. A texture comes with its look running on an image: your agent can pass one of yours by its web address, or it uses the sample image. Your agent can also search the Library, which holds UI kits, templates, design systems and assets, and download products from it for you.
Yes. We show each key only once and store only a scrambled (hashed) version, so no one at HorizonX can see it. You can have up to five keys and revoke any of them in Settings → Developer. A revoked key stops working immediately.
Included in every plan
Skip building it from scratch. Ask for a carousel, and your agent adds one that already works.