Loading…
Loading…
Connect Claude Code, Cursor, Claude Desktop, VS Code or Codex to koboyo, and your coding assistant can draw diagrams, build slide decks and manage canvases for you. It all runs through one Model Context Protocol server.
What you get back is a real canvas, not a picture of one. All 20 of koboyo's diagram kinds work here: architecture, flowcharts, sequence, ERD, state machines, mind maps, gantt, sankey, git graphs, charts, wireframes, timelines, journeys, cycles, funnels, pyramids, venn, matrix, BPMN and org charts. Each one becomes a frame you can open and edit. Every result also gives your assistant a link to the canvas, embed URLs for light and dark mode you can drop into a README, and a picture of the diagram so you can see it right away in the chat.
First get your key. Go to koboyo.com, open MCP server in the sidebar, and
create one. You can also get it from the "Use with AI" button in the icon library.
You only see the key once, right after you create it, so copy it before you leave
the page.
Then add the server to whichever client you use. In each snippet below, replace
kbi_YOUR_KEY with the key you just copied.
Claude Code
claude mcp add --transport http koboyo https://api.koboyo.com/v1-mcp --header "Authorization: Bearer kbi_YOUR_KEY"
Cursor and Claude Desktop. Add this to the client's mcp.json:
{
"mcpServers": {
"koboyo": {
"type": "streamable-http",
"url": "https://api.koboyo.com/v1-mcp",
"headers": { "Authorization": "Bearer kbi_YOUR_KEY" }
}
}
}
VS Code
code --add-mcp '{"name":"koboyo","type":"http","url":"https://api.koboyo.com/v1-mcp","headers":{"Authorization":"Bearer kbi_YOUR_KEY"}}'
Codex. Codex cannot send custom headers, so it puts the key in the URL instead. URLs can end up in server logs, so use the header version above if your client supports it.
codex mcp add koboyo --url "https://api.koboyo.com/v1-mcp?key=kbi_YOUR_KEY"
Once it is connected, just ask. "Draw me an architecture diagram of this repo" or "turn these notes into a slide deck" is enough.
Slides can build themselves up while you present, too: ask for a deck "where the bullets appear one at a time" and each of those slides reveals its contents a click at a time. You can reorder the steps by hand afterwards in the app, under Animate on any slide.
| tool | what it does |
|---|---|
whoami | Your account and every workspace it can write to, with board names, ids and how many diagrams each board has room for |
get_syntax | The cheatsheet for one diagram kind, with examples that work. Worth reading before writing a kind for the first time |
create_diagram | Turns diagram code into a frame on a canvas. Returns the edit link, embed URLs and a picture of the diagram |
update_diagram | Redraws an existing frame from new code. It keeps the same id, so embeds you have already shared keep working |
get_diagram | Reads back a frame's code, and tells you whether someone has edited the drawing by hand since |
list_canvases | Every board in a workspace, with its diagrams and their ids |
create_canvas | Makes a new empty board |
delete_canvas | Moves a board and everything on it to the Trash |
create_slides | Starts a slide deck |
add_slide | Adds one more slide to a deck you already have |
The same server also carries koboyo's icon library as seven read-only tools. They
are useful on their own, and for finding icons to put in the nodes of an
architecture or flowchart diagram. See
attributes for how a node's icon: attribute is written.
| tool | what it does |
|---|---|
search_icons | Search by subject. If you use more than one word, every word has to match |
find_icons_for | Match many things at once, like a whole nav bar or every node in a diagram |
list_categories | Every category with its icon count |
list_icons | Browse a category, or the whole library |
get_icon | One icon's name, category, keywords, size and URLs |
get_icon_svg | The SVG markup for up to 20 icons at once |
get_library_info | Library size, URL shapes and licence terms |
Ask your assistant to call get_syntax before it writes a kind of diagram it has
not written before. The koboyo language is not Mermaid, and guessing at it wastes
a round trip that the cheatsheet would have saved.
On a free workspace, every diagram goes onto your one board as a new frame, up to 12 of them. Every result tells your assistant how much room is left, so it can see the limit coming instead of hitting it by surprise. On Pro, each diagram gets its own canvas instead of stacking up on one board.
Deleting a board does not wipe it. It goes to the workspace Trash, and you can get it back from the web app for 30 days.
The embed links work on both plans. On free they carry a small koboyo mark, and on Pro they do not.
If your assistant connects without a key, it still gets a working connection. Every tool answers with instructions for signing in, so your assistant can pass them on to you instead of just telling you the server is broken.
Already have diagrams written in Mermaid? Paste them straight into
create_diagram. koboyo redraws them in its own hand-drawn style, so you get a
much better looking diagram, and an editable canvas instead of a flat image.
A few Mermaid diagram types have no exact match in koboyo, so they come out as the closest thing. The result tells you when that has happened, and which koboyo kind to ask for instead if you want to keep working on the diagram.