Docs · MCP

The Vizyble MCP server

Vizyble's hosted MCP server lets AI coding agents add a live text effect to the website they're building: a short word becomes letters made of flowers that move with the visitor's pointer. Your agent gets paste-ready HTML. The server is read-only and needs no key or install.

At a glance

Endpoint: https://vizyble.dev/api/mcp
Transport: Streamable HTTP (JSON responses)
Authentication: None
Access: Read-only: no data is stored, no files read, no URLs fetched
Rate limit: 60 requests a minute per IP address
Server version: 1.1.0
Protocol versions: 2025-06-18, 2025-03-26, 2024-11-05

Connect your client

Claude Code

Run in your terminal

claude mcp add --transport http vizyble https://vizyble.dev/api/mcp

Cursor

Add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project)

{
  "mcpServers": {
    "vizyble": {
      "url": "https://vizyble.dev/api/mcp"
    }
  }
}

VS Code (GitHub Copilot)

Add to .vscode/mcp.json

{
  "servers": {
    "vizyble": {
      "type": "http",
      "url": "https://vizyble.dev/api/mcp"
    }
  }
}

Windsurf

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

{
  "mcpServers": {
    "vizyble": {
      "serverUrl": "https://vizyble.dev/api/mcp"
    }
  }
}

Gemini CLI

Add to ~/.gemini/settings.json

{
  "mcpServers": {
    "vizyble": {
      "httpUrl": "https://vizyble.dev/api/mcp"
    }
  }
}

Claude Desktop and claude.ai

Settings → Connectors → Add custom connector, then paste the URL

https://vizyble.dev/api/mcp

Any other client that supports remote MCP servers over HTTP works with the same URL. Then ask your agent: “Use Vizyble to add a live heading that says HELLO.”

Tools

create_text_effect

Turns a short word or name (1–24 characters, shown in UPPERCASE) into a live text effect for a web page: letters made of flowers that sway and react to the visitor's pointer. Returns HTML to paste where the heading should go, plus one script tag to include once per page. Use it for hero headlines, names, logos and footer wordmarks on websites. Don't use it for body text, buttons, sentences longer than the limit, or apps without HTML; for emails and READMEs use embed: "image". No side effects and nothing is stored. Works without an API key; keyless embeds show a small Vizyble badge.

Argument	Type	Description
word(required)	string	The word, name or short phrase to show, 1 to 24 characters. It is always shown in UPPERCASE.
style	flower-1 \| flower-2 \| flower-3 \| flower-4 \| flower-5 \| flower-6	Flower style (default flower-1): flower-1 = Violet Cosmos, flower-2 = Yellow Frangipani, flower-3 = Pink Daisy, flower-4 = Violet Bunch, flower-5 = Tropical Leaves, flower-6 = Blue Bouquet. Call list_styles for colours and best uses.
embed	live \| image	live (default): moves with the visitor's pointer, with a static image fallback built in. image: a single <img> for emails, READMEs and places where scripts can't run.
framework	html \| react	html (default): plain HTML for any site or builder. react: JSX for React or Next.js, with the script loaded once in the app's layout.
as_heading	boolean	Wrap it in an <h1> that keeps the real text for search engines and screen readers. Use it when the word is the page's main heading. Default false.
format	webp \| png	Image format for the static image (default webp). Use png for emails.
api_key	string	Optional Vizyble API key. Removes the badge from the static image. The key ends up in public page HTML, so only pass one the user chose to use here.

list_styles

Lists the flower styles create_text_effect accepts, with colours, mood, best uses and a preview image for each. Call it before choosing a style to match the site's colours.

Takes no arguments.

Example

create_text_effect with {"word":"Hello","style":"flower-3","as_heading":true} returns:

<h1>
  <span style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0">HELLO</span>
  <span data-vizyble-live="https://vizyble.dev/api/v1/live?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&object=flower-3" style="display:block;aspect-ratio:887/326">
    <img src="https://vizyble.dev/api/v1?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&object=flower-3&fallback=1" alt="" style="width:100%;height:100%;object-fit:contain;vertical-align:top" />
  </span>
</h1>

Once per page:
<script src="https://vizyble.dev/embed/vizyble-live.js" defer></script>

It also returns structured data (html, script, preview_url, image_url, notes) for clients that read tool output schemas, plus a notes block that isn't part of the snippet.

Things to ask your agent

“Add my name as a live heading at the top of my Next.js portfolio.”
“Put our names in pink flowers on the wedding site's home page.”
“Use our brand name as a footer wordmark, in a style that matches our green palette.”

Limits

Words are 1 to 24 characters and always shown in uppercase.
The script goes in once per page (or once in the root layout for React and Next.js), not next to every word.
Keyless embeds show a small Vizyble badge and get 200 fresh renders a day per site.
Colour comes from the flower style; size comes from the width of the element the word sits in.
Live words need the site to allow a script from vizyble.dev. Where it can't, use embed: "image".

Permissions, data and troubleshooting

Only the arguments your agent sends (the word, style and options). Nothing is stored, and the server never reads your files or fetches URLs. It returns HTML text, which your agent then pastes into your project.

The snippet loads a small script from vizyble.dev that draws the live word. It sets no cookies and doesn't identify your visitors. Vizyble sees which website the word is on, to count how many sites use it.

Only if you want the static image without a badge. The key ends up in your page's public HTML, so it works like a publishable key: anyone viewing the page can see it.

Restart or reload the client after adding the server, and check the URL is exactly the endpoint above. Some clients need you to approve the new server or turn it on in a tools menu.

The script was blocked or didn't load. If the site has a Content Security Policy, add vizyble.dev to script-src and connect-src. The static image is the built-in fallback, so the word still shows.

Yes. make_word_art is the tool's earlier name and still works with the same arguments; new agents see create_text_effect.

Connect your client

Claude Code

Run in your terminal

claude mcp add --transport http vizyble https://vizyble.dev/api/mcp

Cursor

Add to ~/.cursor/mcp.json (or .cursor/mcp.json in a project)

{
  "mcpServers": {
    "vizyble": {
      "url": "https://vizyble.dev/api/mcp"
    }
  }
}

VS Code (GitHub Copilot)

Add to .vscode/mcp.json

{
  "servers": {
    "vizyble": {
      "type": "http",
      "url": "https://vizyble.dev/api/mcp"
    }
  }
}

Windsurf

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

{
  "mcpServers": {
    "vizyble": {
      "serverUrl": "https://vizyble.dev/api/mcp"
    }
  }
}

Gemini CLI

Add to ~/.gemini/settings.json

{
  "mcpServers": {
    "vizyble": {
      "httpUrl": "https://vizyble.dev/api/mcp"
    }
  }
}

Claude Desktop and claude.ai

Settings → Connectors → Add custom connector, then paste the URL

https://vizyble.dev/api/mcp

Any other client that supports remote MCP servers over HTTP works with the same URL. Then ask your agent: “Use Vizyble to add a live heading that says HELLO.”

Tools

create_text_effect

Argument	Type	Description
word(required)	string	The word, name or short phrase to show, 1 to 24 characters. It is always shown in UPPERCASE.
style	flower-1 \| flower-2 \| flower-3 \| flower-4 \| flower-5 \| flower-6	Flower style (default flower-1): flower-1 = Violet Cosmos, flower-2 = Yellow Frangipani, flower-3 = Pink Daisy, flower-4 = Violet Bunch, flower-5 = Tropical Leaves, flower-6 = Blue Bouquet. Call list_styles for colours and best uses.
embed	live \| image	live (default): moves with the visitor's pointer, with a static image fallback built in. image: a single <img> for emails, READMEs and places where scripts can't run.
framework	html \| react	html (default): plain HTML for any site or builder. react: JSX for React or Next.js, with the script loaded once in the app's layout.
as_heading	boolean	Wrap it in an <h1> that keeps the real text for search engines and screen readers. Use it when the word is the page's main heading. Default false.
format	webp \| png	Image format for the static image (default webp). Use png for emails.
api_key	string	Optional Vizyble API key. Removes the badge from the static image. The key ends up in public page HTML, so only pass one the user chose to use here.

list_styles

Lists the flower styles create_text_effect accepts, with colours, mood, best uses and a preview image for each. Call it before choosing a style to match the site's colours.

Takes no arguments.

Example

create_text_effect with {"word":"Hello","style":"flower-3","as_heading":true} returns:

<h1>
  <span style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0">HELLO</span>
  <span data-vizyble-live="https://vizyble.dev/api/v1/live?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&object=flower-3" style="display:block;aspect-ratio:887/326">
    <img src="https://vizyble.dev/api/v1?word=HELLO&font=font-2&flowerSize=74&spacing=34&jitter=4&wordSize=46&verticalStretch=2&letterSpacingScale=4.55&lineSpacingScale=0.1&object=flower-3&fallback=1" alt="" style="width:100%;height:100%;object-fit:contain;vertical-align:top" />
  </span>
</h1>

Once per page:
<script src="https://vizyble.dev/embed/vizyble-live.js" defer></script>

It also returns structured data (html, script, preview_url, image_url, notes) for clients that read tool output schemas, plus a notes block that isn't part of the snippet.

Limits

Words are 1 to 24 characters and always shown in uppercase.

The script goes in once per page (or once in the root layout for React and Next.js), not next to every word.

Keyless embeds show a small Vizyble badge and get 200 fresh renders a day per site.

Colour comes from the flower style; size comes from the width of the element the word sits in.

Live words need the site to allow a script from vizyble.dev. Where it can't, use embed: "image".

Permissions, data and troubleshooting

Only if you want the static image without a badge. The key ends up in your page's public HTML, so it works like a publishable key: anyone viewing the page can see it.

Restart or reload the client after adding the server, and check the URL is exactly the endpoint above. Some clients need you to approve the new server or turn it on in a tools menu.

The script was blocked or didn't load. If the site has a Content Security Policy, add vizyble.dev to script-src and connect-src. The static image is the built-in fallback, so the word still shows.

Yes. make_word_art is the tool's earlier name and still works with the same arguments; new agents see create_text_effect.

At a glance

Connect your client

Claude Code

Cursor

VS Code (GitHub Copilot)

Windsurf

Gemini CLI

Claude Desktop and claude.ai

Tools

create_text_effect

list_styles

Example

Things to ask your agent

Limits

Permissions, data and troubleshooting

What data does the MCP server see or store?

What runs on my visitors' pages?

Should my agent pass an API key?

The tool doesn't show up in my client.

The page shows a still image instead of the live word.

Is make_word_art still supported?

At a glance

Connect your client

Claude Code

Cursor

VS Code (GitHub Copilot)

Windsurf

Gemini CLI

Claude Desktop and claude.ai

Tools

create_text_effect

list_styles

Example

Things to ask your agent

Limits

Permissions, data and troubleshooting

What data does the MCP server see or store?

What runs on my visitors' pages?

Should my agent pass an API key?

The tool doesn't show up in my client.

The page shows a still image instead of the live word.

Is make_word_art still supported?