AI

v0.0.10

Mishka Chelekom is AI-native. It ships a built-in MCP server that exposes every component, its documentation, and the mix tasks directly to AI agents, plus comprehensive LLM usage rules for every component and JavaScript hook. This page shows how to wire both into the assistant you already code with.

Usage Rules for LLM Agents

Mishka Chelekom ships verified usage rules for every component and every JavaScript hook - the exact attributes, slots, allowed values, and gotchas an agent needs. The library supports the usage_rules package, which copies rules from your dependencies into your agent file (CLAUDE.md, AGENTS.md, and friends). The rules it copies depend on the entries you list, as shown below.

Setup

Add the package to your dependencies:

elixir
# mix.exs
def deps do
  [
    {:usage_rules, "~> 1.2", only: [:dev]}
  ]
end

Then tell usage_rules which agent file to write and to include the Mishka Chelekom package. The settings live under the :usage_rules key of the project config in mix.exs:

elixir
# mix.exs
def project do
  [
    # ...
    usage_rules: [
      file: "CLAUDE.md",
      usage_rules: [:mishka_chelekom]
    ]
  ]
end

Finally, sync Mishka Chelekom's rules into your agent file:

elixir
mix usage_rules.sync

What the sync writes

The entry :mishka_chelekom writes two sections into your agent file: the main rules (usage-rules.md) and the mix task guide (mix-tasks), about 46 KB together. The main rules list all 71 components and 8 JavaScript hooks, and tell the agent to read the live docs when a detail is missing.

The rules for each component and hook are not part of that default. Chelekom keeps them in folders inside usage-rules/, such as components/ (71 files), headless/ (37), js/ (8), and docs/ (7). usage_rules only finds files directly inside usage-rules/, so neither :mishka_chelekom nor "mishka_chelekom:all" adds them. The files are still in your project at deps/mishka_chelekom/usage-rules/, where an agent can read them.

Add the rules you need

List each extra file in the sub_rules option of one entry. A name is the path inside usage-rules/ without .md, for example components/button, headless/dialog, or js/collapsible. The main rules stay included:

elixir
# mix.exs
usage_rules: [
  file: "CLAUDE.md",
  usage_rules: [
    {:mishka_chelekom,
     sub_rules: ["mix-tasks", "components/button", "components/text_field", "js/collapsible"]}
  ]
]

All the component files together are about 350 KB, so list only the ones your project uses. To keep the agent file small, add link: :at to the entry. The file then holds references such as @deps/mishka_chelekom/usage-rules/components/button.md instead of the rule text. Use link: :markdown for plain markdown links.

Once synced, your agent reads the rules automatically. If it still needs something the rules don't cover, they instruct it to fetch the live docs from https://mishka.tools/chelekom/docs/{component-name} (use hyphens, and the /forms/ prefix for form components) instead of guessing.

The MCP Server

The MCP (Model Context Protocol) server exposes the whole library - every component, its documentation, and all the mix tasks - directly to AI tools like Claude Code, Cursor, and Claude Desktop. Instead of guessing an attribute or hallucinating an API, the agent asks Mishka and gets the real answer, through 11 tools and 10 resources.

Setup inside your Phoenix app

One command wires it up. The default HTTP transport patches your Phoenix router with a dev-only forward "/mcp" route, while --stdio writes a .mcp.json and changes nothing in Phoenix:

elixir
# HTTP transport (default) — patches your Phoenix router
mix mishka.mcp.setup

# Stdio transport — writes .mcp.json, no router changes
mix mishka.mcp.setup --stdio

With the default HTTP setup, the endpoint runs on your Phoenix port (default 4000) - not a separate one. Start mix phx.server and connect your tool:

elixir
# after `mix phx.server`, the endpoint runs on your Phoenix port
claude mcp add --transport http mishka-chelekom http://localhost:4000/mcp

For Cursor or VSCode, add a .mcp.json at your project root instead:

json
{
  "mcpServers": {
    "mishka-chelekom": {
      "type": "http",
      "url": "http://localhost:4000/mcp"
    }
  }
}

Running the server without Phoenix

You can also run the server on its own - a standalone HTTP listener on port 4003, or over stdio, which an MCP client spawns for you from a shared .mcp.json:

elixir
# standalone HTTP server on port 4003
mix mishka.mcp.server

# stdio (the MCP client spawns it; used in .mcp.json)
mix mishka.mcp.server --transport stdio