Motif
TR
Tools

Use Motif with AI

Motif's MCP server gives an AI app such as Claude Code, Claude Desktop or Codex the Motif tools. You write what you want; the AI draws it and hands you a Motif link.

What it does

Reads a link
The tool, the changed settings, the seed, the canvas size and the catalogue code.
Changes settings
One field, a preset, Randomise, a variation or a palette.
Draws files
PNG, SVG, CSS and code, all written to one folder.
Gives a new link
The link opens the same artwork in the editor with the same catalogue code (GR‑3488).

It never changes an open editor: everything it makes is a link and files.

Setup

  1. Build the server

    It needs Node 22 (22.12 or later). In the root of the Motif repository:

    Terminal
    npm install
npm run build:mcp

  2. Add it to your app

    Claude Code

    The repository's .mcp.json already declares the server; open a session in the repository. On the first one, approve the motif server waiting in the /mcp list.

    .mcp.json
    {
  "mcpServers": {
    "motif": {
      "type": "stdio",
      "command": "node",
      "args": ["mcp/dist/server.mjs"],
      "env": { "MOTIF_LINK_ROOT": "http://localhost:4310" }
    }
  }
}

    Claude Desktop

    Add this to ~/Library/Application Support/Claude/claude_desktop_config.json. Desktop does not see your shell's path: replace both paths with your own (which node finds Node's). Then restart Desktop.

    claude_desktop_config.json
    {
  "mcpServers": {
    "motif": {
      "command": "/Users/<you>/.nvm/versions/node/v22.14.0/bin/node",
      "args": ["/Users/<you>/prs/motif/mcp/dist/server.mjs"],
      "env": { "MOTIF_LINK_ROOT": "http://localhost:4310" }
    }
  }
}

    Codex

    Add this to your own .codex/config.toml: in the root of the repository or at ~/.codex/config.toml. In the second, write the server's full path (/Users/<you>/prs/motif/mcp/dist/server.mjs). This setup has not been tried in Codex yet.

    .codex/config.toml
    [mcp_servers.motif]
command = "node"
args = ["mcp/dist/server.mjs"]

[mcp_servers.motif.env]
MOTIF_LINK_ROOT = "http://localhost:4310"

  3. Start the preview for links

    For now the server's links point to the local preview (localhost:4310):

    Terminal
    npm run build
npm run preview

    To point links somewhere else, change the MOTIF_LINK_ROOT variable.

Eight tools

The AI picks these itself; you do not need their names. Each example is the input the tool takes.

list_tools
Lists the Motif tools, their catalogue prefixes and outputs.{ "locale": "en" }
get_schema
Gives a tool's settings, their value formats and its presets.{ "tool": "dither" }
read_link
Opens a link the way the editor does and sums it up.{ "link": "/tr/gradient?type=radial&angle=40" }
render
Opens a link or a tool's blank state, applies a preset and settings, draws the files.{ "tool": "mesh-gradient", "width": 1920, "height": 1080, "formats": ["png", "css"] }
randomize
The editor's Randomise button; the same seed gives the same result.{ "tool": "confetti", "seed": "v1" }
vary
The dice on the canvas: resamples a few shape fields, the colours stay.{ "tool": "blob", "seed": "a1" }
apply_palette
Writes a palette to the artwork by the tool's own rule; locked colours stay.{ "tool": "css-pattern", "palette": "cini-atolyesi" }
search_palettes
Searches the Motif palette library by name, tag or hex.{ "query": "çini", "limit": 3 }

Example prompts

Paste them as they are. The links open in the editor with the same catalogue code.

  • Make a mesh gradient and give me a PNG.
  • Set the grain amount in this link to 20%: http://localhost:4310/en/gradient?type=radial&angle=40&seed=k2m9xp
  • Apply the Çini palette to CSS Pattern and give me the CSS.
  • Draw three Confetti variations.
  • Turn this Dither link into the GameBoy effect: http://localhost:4310/en/dither?effect=halftone
  • Mesh gradient with the Ege preset, 1920 × 1080, PNG and SVG.

Limits

  • Video links do not open: turn video off in the editor and give the image's link.
  • Images you upload from your computer never reach the server; only Motif's sample images work.
  • The Converter is not drawn; only its link is read.
  • Canvas 16–8000 px, PNG scale 1–4, PNG at most 64 megapixels.
  • Large files take seconds: a 3840 × 2160 @2x Mesh takes about 7 seconds.

If it does not connect

motif is waiting for approval in /mcp
Approve the server in the /mcp list.
Cannot find module …/mcp/dist/server.mjs
The server is not built: npm run build:mcp.
A new tool or field is missing
npm run build:mcp, then reconnect the server: /mcp in Claude Code, reopen Desktop.
A link does not open
The preview is off: npm run build and npm run preview.
The server starts with another Node
Motif needs Node 22; check with node -v. In Desktop, command must be that Node's full path.

Details, how it draws and the developer notes are in the repository's mcp/README.md.