# Kite

Kite is a design tool. An agent draws the visual assets for a piece of work — banners, social
posts, ads, logos, icons, landing pages — into a design file: a board of frames the user's team
edits and comments on live, shared like a Figma file.

## For agents

MCP server (Streamable HTTP): https://cf.kite.new/api/mcp
In Claude: one click from the connector directory, https://claude.ai/directory/connectors/kite
Auth: OAuth 2.1 with PKCE and dynamic client registration (metadata at https://cf.kite.new/.well-known/oauth-authorization-server), or Authorization: Bearer <api key> for headless use. Keys are created by the user at https://cf.kite.new/settings.
On a computer with the Kite desktop app: the stdio command `~/.kite/bin/kite mcp` (the app adds it to Claude Code, Codex, Cursor and Claude). It needs no sign-in, sees which files the user has open (editor_focus with no file is their front tab; tab_list, tab_open), and reaches https://cf.kite.new directly when the app is closed.
Tools: file_new, file_outline, editor_focus, layer_render, layer_source, layer_search, layer_draw, layer_edit, layer_nest, layer_copy, layer_remove, finish_working, picture_add, font_lookup, component_make, component_place, component_combine, component_properties, instance_set, component_detach, library_list, library_publish, library_update, system_list, system_read, system_new, system_apply, variable_edit, style_edit, file_list, file_info, file_search, file_share, comment_list, comment_reply, file_archive.
Skill: https://cf.kite.new/skill.md
Docs: https://cf.kite.new/docs

## Design files
A file is a tree of nodes — frames, text, images, SVGs — with CSS on each, on pages.
1. file_new { title } -> { url }. Find an existing one with file_list or file_search.
   A file is shared like a Figma file, not published: anyone with the link can view it, and
   only view, or file_share { page, audience: "restricted", emails } makes it only the people
   invited. No code and no email gate; nobody is shown who opened it. A frame has no link of its own.
2. file_outline { file } reads the outline: ids, sizes, board positions, and the file's design
   system. system_read { file } has its variables, styles and guide: write var(--name), never raw values.
   layer_source { file, node } reads any node as HTML, every style inline, each node id in data-id.
3. layer_draw { file, html } draws: each top-level element becomes a frame on the board, or pass
   parent to draw inside a node, or replace to swap one. Small pieces, inline styles, flexbox,
   px sizes, images by https URL, or picture_add for a picture file. layer_edit, layer_nest and layer_remove change what is there. When you are done in a file, finish_working says so.
4. comment_list says where each pin is (pin: the frame, the layer clicked and the spot on it, or
   the page and the spot on the empty board, where layer_draw { page, x, y } draws). Apply a comment
   by changing that frame in place — people edit the same file, so never redraw it as a copy.

## Vocabulary for users
Say "file", "frame", "layer" and "link". Never say MCP, node id, slug, token or manifest.