Use Liniqo in your AI tools

Claude · Cursor · Lovable · v0 · Windsurf · VS Code · shadcn

Connect Liniqo once, then ask in plain words: “add an empty-state illustration to the inbox page” or “put a payment illustration in the pricing hero, in our brand orange”. Your AI searches 2,049 illustrations, picks one and adds the SVG or React component to your project.

Also listed on Smithery ↗

1. Your connection URL

This is the Liniqo MCP server. Paste your license key to unlock everything in your plan. Without a key, the 300+ free illustrations work and the rest show as locked.

https://liniqo.com/mcp

Your key never leaves this page unless you copy it. The URL with a key works like a password: don’t share it or commit it to a public repository. Find your key in your Polar customer portal.

2. Add it to your tool

Claude (web and desktop)

1. Open Settings → Connectors and choose Add custom connector.
2. Name it Liniqo and use the URL https://liniqo.com/mcp (no key needed in the URL).
3. Under Authentication, choose Sign in now, then click Add and Connect. A Liniqo page opens: paste your license key, or continue with the free illustrations.
4. In a chat, turn the Liniqo connector on from the tools menu and ask for an illustration.

Your key stays out of the URL this way. Prefer an API key? Choose No sign-in and add a request header named Authorization with the value Bearer YOUR_LICENSE_KEY.

Claude Code

claude mcp add --transport http liniqo "https://liniqo.com/mcp"

Cursor

Add this to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (one project):

{
  "mcpServers": {
    "liniqo": { "url": "https://liniqo.com/mcp" }
  }
}

Windsurf

Add this to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "liniqo": { "serverUrl": "https://liniqo.com/mcp" }
  }
}

VS Code (Copilot agent mode)

Add this to .vscode/mcp.json:

{
  "servers": {
    "liniqo": { "type": "http", "url": "https://liniqo.com/mcp" }
  }
}

Lovable, v0, Bolt, Replit and other builders

If your builder lets you add a custom MCP server, add the connection URL above. If it doesn’t, use the copy-paste hand-off:

1. In the library, open an illustration and click Use with AI. For several at once, add them to a collection and click Copy for AI.
2. Paste the prompt into your builder’s chat. It downloads the SVGs into your project and places them.

The prompt uses your current colours and theme from the library, so set your brand colour there first.

shadcn CLI (React and Next.js)

Add Liniqo as a registry in components.json:

{
  "registries": {
    "@liniqo": {
      "url": "https://liniqo.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${LINIQO_LICENSE_KEY}" }
    }
  }
}

Put your key in .env.local as LINIQO_LICENSE_KEY=…, then add any illustration by its id (shown in the library link, for example /app#car-hero-price):

npx shadcn@latest add @liniqo/car-hero-price

Free illustrations work without a key. More on the components: React docs.

Interactive figures (Liniqo Live)

The same connection also serves the 500+ interactive figures that react to the pointer. Ask for something interactive and your AI tool will use these tools:

23 figures are free. The other 477 need a Pro or Lifetime key on the connection. For those, the code contains a sealed embed token instead of your license key, so it is safe to commit and ship.

Direct URLs

Every illustration is also available as a ready-made file, which is handy in scripts or for AI tools that can download files:

https://liniqo.com/api/svg?id=car-hero-price&theme=light&accent=%23ff5a3c

Save the file into your project rather than hot-linking it, especially when the URL contains your key.

Prompts that work well

• “Find a Liniqo illustration for an empty inbox and add it to the empty state in Inbox.tsx.”
• “Use Liniqo to add three feature illustrations to the landing page: analytics, team collaboration and security. Dark theme, accent #7c3aed.”
• “Replace the placeholder image on the 404 page with a fitting Liniqo illustration.”
• “Add an interactive Liniqo figure of a server rack to the hero, accent #14b8a6, as a React component.”

Good to know

• Each illustration comes as clean SVG with CSS variables, so colours follow your theme.
• Animated versions are pure CSS and respect reduced-motion settings.
• Using Liniqo through AI tools in your own projects is covered by your license. Sharing your key or the files is not.
• Fair use: illustrations fetched through AI tools, the shadcn CLI and direct URLs are counted on your key. Normal use never comes close to the limit, which grows every day you own the plan. If a key is used far beyond that, for example because it was shared, it pauses for AI tools until you contact us. The web library keeps working.

Something not working? Ask in the #support channel on Discord or contact support.