How to add illustrations with Claude, Cursor and Lovable

If you build with Claude, Cursor, Lovable or v0, you have seen it: a polished page with a grey box that says "illustration here". The AI can write the component but cannot draw a consistent illustration set, and image generators produce a different style every time. The fix is to give the AI a library it can search.

What MCP is, in one paragraph

The Model Context Protocol (MCP) is an open standard that lets AI tools call outside services in a structured way. An illustration library that runs an MCP server exposes a few tools, such as "search illustrations" and "get illustration", and your AI tool can call them while it works, the same way it reads your files. You connect once; after that you ask in plain words.

What it looks like in practice

You type: "Add an empty-state illustration to the inbox page, in our brand orange." The AI searches the library for inbox illustrations, picks one, fetches the SVG with your accent colour, saves it into your project and adds it to the component. Everything stays in one style because it all comes from one library.

Connecting a library

Each tool has its own settings, but they all need the same thing: the server URL. Using Liniqo's server (https://liniqo.com/mcp) as the example:

Claude Code

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

Cursor

Add to ~/.cursor/mcp.json for all projects, or .cursor/mcp.json for one:

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

VS Code (Copilot agent mode)

Add to .vscode/mcp.json:

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

Claude on the web or desktop

Go to Settings, then Connectors, and add a custom connector with the same URL. Turn it on from the tools menu in a chat.

Lovable, v0, Bolt and other builders

If the builder supports custom MCP servers, add the URL. If not, a copy-paste hand-off works: copy a prompt from the library that includes the illustration's download link and your colours, and paste it into the builder's chat.

Full, current instructions for every tool are on the AI tools page.

Prompts that work

• "Find an illustration for an empty inbox and add it to the empty state in Inbox.tsx."
• "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 illustration."
• "Give every empty state in the app an illustration from the same library, sized 160px."

Be specific about the file, the topic and the colours. The AI does the searching.

Why not just generate images?

Security and licence notes

• If the connection URL contains a licence key, treat it like a password. Do not commit it to a public repository.
• Ask the AI to save SVGs into your project rather than hot-linking them.
• Check that the library's licence covers use through AI tools. Liniqo's does, for your own and (on Pro and Lifetime) client projects; see the licence.

Liniqo's free illustrations work over MCP without a key, so you can try the whole flow in a few minutes. The library is also indexed for AI assistants in llms.txt.

Questions

What is an MCP server?

A service that exposes tools to AI assistants using the Model Context Protocol, so tools like Claude, Cursor and VS Code can call it while they work.

Which AI tools support MCP?

Claude (web, desktop and Claude Code), Cursor, Windsurf and VS Code in Copilot agent mode support custom MCP servers. Some web builders do too; others need a copy-paste hand-off.

Do I need a licence key to use Liniqo with AI tools?

No for the free illustrations. A licence key unlocks the full library for your plan.

Is it allowed to use illustrations through AI tools?

It depends on the library. Liniqo's licence covers using the illustrations through AI coding tools to build your own projects, and client projects on Pro and Lifetime.