▚skeehn
DocsComponentsGitHub

For AI agents

Build with skeehn from an AI agent

skeehn is built to be driven by coding agents — Claude Code, Cursor, v0. An agent can discover the catalog, install components, compose whole interfaces from blocks, theme them to a brand, and extend the foundation — producing bespoke UI, not generic output.

Recommended

MCP server

The @skeehn/mcp-server exposes the catalog and tools over the Model Context Protocol. Add it to Claude Code or Cursor:

json8 lines
{
  "mcpServers": {
    "skeehn": {
      "command": "npx",
      "args": ["-y", "@skeehn/mcp-server"]
    }
  }
}
bash4 lines
# Claude Code — add the skeehn MCP server
claude mcp add skeehn -- npx -y @skeehn/mcp-server

# …or drop the JSON above into .mcp.json (project) / ~/.claude.json (global)

It serves resources (component schema, theme registry, prop contracts, agent docs, examples, patterns) and tools: list_components, install_component, generate_ui_code, validate_props, swap_theme, add_to_project — so an agent can go from “build a voice-agent console with skeehn” to installed, composed, and themed code.

Distribution

Install from the registry

Every component is a shadcn-compatible registry item with inline file content, so it installs into any project — the user owns the code:

bash5 lines
# Any component, copied into the user's project (they own the code):
npx shadcn@latest add https://ui.skeehn.com/r/chat-bubble.json
npx shadcn@latest add https://ui.skeehn.com/r/button.json
# the engine + tokens + default theme:
npx shadcn@latest add https://ui.skeehn.com/r/skeehn-engine.json

Context

llms.txt

A machine-readable index of the whole library — install paths, the token contract, components, themes, the AI SDK layer, and blocks — lives at ui.skeehn.com/llms.txt. Point an agent at it for grounding.

Compose

AI SDK v5 + blocks

skeehn is a drop-in for the Vercel AI SDK. Render useChat messages directly, or drop in a whole console from @skeehn/react/blocks:

tsx11 lines
import { useChat } from '@ai-sdk/react';
import { Conversation } from '@skeehn/react/ai';
import { ChatConsole } from '@skeehn/react/blocks';
import '@skeehn/core/styles.css';

export function Chat() {
  const { messages, sendMessage, status } = useChat();
  // drop-in: render AI SDK messages, or a whole console
  return <ChatConsole messages={messages} busy={status === 'streaming'}
    onSend={(text) => sendMessage({ text })} />;
}

See AI SDK, Blocks, and the brand theme generator (derive a full theme from one color — perfect for “make it match our brand”).