Introducing Mishka Chelekom v0.0.9 - MCP & AI-Ready Phoenix Components, 35+ Headless Components, and the Kit

We're excited to announce Mishka Chelekom v0.0.9 - the release where our Phoenix and LiveView component library becomes AI-native. This version ships a built-in MCP server so AI agents can generate and use your components correctly, a brand-new headless component layer ported from Base UI with full accessibility, and the Kit - one DSL to reuse and restyle any component without ever touching its source.

In short: the last few versions made Mishka Chelekom powerful for humans. v0.0.9 makes it just as usable for the AI agents your team already codes with every day - while adding real components, real accessibility, and a cleaner CLI on top.

As you know, Mishka Chelekom brings 100+ styled components, 35+ headless components, and JsHooks for the Phoenix and Phoenix LiveView frameworks in Elixir, installed straight into your project via CLI - no runtime library, no hidden dependencies, just code you own. It remains completely free and open source, with the largest component set of any library in the ecosystem.

And it still runs almost entirely on community goodwill - and lately, that goodwill has thinned out. Monthly donations have slipped below $40 after several months of decline, which sadly doesn't cover the project's running costs - and every cent we do receive goes straight back into the project. Now that Mishka Chelekom has passed 55,000+ downloads, we're genuinely hoping more of the community will step in. Even the price of a coffee a month through GitHub Sponsors keeps the lights on and the releases coming, and if you work somewhere that could sponsor or invest in the project, the Mishka team would love to talk.

Getting Started with Mishka Chelekom v0.0.9

Adding Mishka Chelekom to a Phoenix or Phoenix LiveView project takes a single line. The quickest path is the Igniter-powered installer, mix mishka_chelekom.install - but you can just as easily add the dependency to your mix.exs by hand. It's a dev-only dependency with no runtime: every component is generated straight into your own app, so nothing from Mishka ships in production.

# Add it to your deps in mix.exs
{:mishka_chelekom, "~> 0.0.9", only: :dev, runtime: false}

Want the newest features before they're stable? The next release is published on the alpha channel - pin it explicitly in your mix.exs:

# Or pin the next alpha pre-release
{:mishka_chelekom, "~> 0.0.10-alpha.1", only: :dev, runtime: false}

Then run mix deps.get and start generating components. For the full installation guide, the complete component list, and every configuration option, read the Mishka Chelekom documentation.

What's New in Mishka Chelekom v0.0.9:

1. AI-Native: A Built-in MCP Server for Your Components, Docs, and CLIs

This is the headline of the release. Mishka Chelekom now ships an entry-level MCP (Model Context Protocol) server that exposes the whole library - every component, its documentation, and all the mix tasks - directly to AI agents and editors. Instead of an agent guessing attribute names or hallucinating an API, it can now ask Mishka and get the real answer.

Setting it up is a single command, and it supports both HTTP and a stdio transport for local editors and CLI-based agents:

mix mishka.mcp.setupmix mishka.mcp.setup --stdio

To make this bulletproof, we also wrote comprehensive usage rules for every single component and every JavaScript hook - the exact, verified contract an agent needs (attributes, slots, allowed values, gotchas). No more "the AI generated something that looks right but doesn't compile." These rules ship with the library and plug into the usage_rules workflow, so your agent reads them automatically.

-----Video coming soon!---

2. 35+ Headless Components - Unstyled, Accessible UI Ported from Base UI

Sometimes you don't want our styling at all - you want the behavior and accessibility, and your own design on top. So v0.0.9 introduces an entire headless component layer: 35+ headless components, every single one ported from Base UI into idiomatic Phoenix. They ship only semantic markup, complete WAI-ARIA wiring, named part slots, data-* state, and the JavaScript behavior hooks - and zero colors or spacing of our own.

Because they carry no styling at all, you can dress them in whatever design system you like - bring the Tailwind classes from Base UI, shadcn, Radix, or daisyUI, reuse your own design tokens, or hand-write the CSS yourself, and the accessibility, focus management, and keyboard behavior keep working underneath. You can browse, restyle, and test every headless component live in the development app inside the Mishka Chelekom repo.

Styled and headless components live side by side, so you can mix both in the same project. Generating them is exactly as easy as the styled ones:

mix mishka.ui.gen.headless dialogmix mishka.ui.gen.headless.components

Under the hood these components carry chelekom-* structural classes and paired-presence state (data-open / data-closed, data-highlighted, and friends), so you style them entirely from your own CSS - no fighting our opinions, and full keyboard and screen-reader support out of the box.

Here's the full headless set shipping in v0.0.9, grouped by what they do:

Forms and inputs

1. Phoenix headless Autocomplete component - a free-text input with inline suggestions.
2. Phoenix headless Checkbox component - a single checkable control.
3. Phoenix headless Checkbox Group component - a labelled group of checkboxes.
4. Phoenix headless Combobox component - a text input that filters and selects from a listbox.
5. Phoenix headless Field component - a form-field wrapper composing label, control, description, and error.
6. Phoenix headless Fieldset component - groups related controls under a shared legend.
7. Phoenix headless Number Field component - a number input with stepper buttons and drag-to-scrub.
8. Phoenix headless OTP Field component - a one-time-code input of single-character slots.
9. Phoenix headless Radio component - a single radio control.
10. Phoenix headless Radio Group component - a single-select group of radios with roving focus.
11. Phoenix headless Select component - a button that opens a single- or multi-select option list.
12. Phoenix headless Slider component - a single- or multi-thumb range input.
13. Phoenix headless Switch component - an on/off toggle rendered as a switch button.
14. Phoenix headless Toggle component - a two-state pressed button.
15. Phoenix headless Toggle Group component - a coordinated row of toggles, single- or multi-select.

Overlays

1. Phoenix headless Alert Dialog component - a confirmation dialog with focus management.
2. Phoenix headless Context Menu component - a menu that opens at the pointer on right-click or long-press.
3. Phoenix headless Dialog component - a modal or non-modal dialog with focus trapping.
4. Phoenix headless Drawer component - an edge panel that slides in, with swipe-to-dismiss and snap points.
5. Phoenix headless Menu component - a trigger button that opens a roving-focus menu.
6. Phoenix headless Popover component - a trigger that toggles an anchored, dismissable panel.
7. Phoenix headless Preview Card component - a hover card that reveals a floating preview on hover or focus.
8. Phoenix headless Tooltip component - a hover or focus popup that describes its trigger.

Navigation

1. Phoenix headless Menubar component - a desktop-style bar of menus.
2. Phoenix headless Navigation Menu component - a site nav whose dropdowns share one morphing popup.
3. Phoenix headless Tabs component - a value-driven tablist with an animated indicator.
4. Phoenix headless Toolbar component - a roving-focus bar of mixed controls.

Disclosure

1. Phoenix headless Accordion component - stacked disclosure items following the WAI-ARIA APG pattern.
2. Phoenix headless Collapsible component - a trigger that shows or hides a single region.

Feedback

1. Phoenix headless Meter component - a scalar gauge for a value within a known range.
2. Phoenix headless Progress component - a progress bar for task completion.
3. Phoenix headless Separator component - a thematic divider between groups of content.
4. Phoenix headless Toast component - a stacking notification region.

Media

1. Phoenix headless Avatar component - an image with a text fallback.
2. Phoenix headless Scroll Area component - a scrollable viewport with a custom scrollbar.

-----Video coming soon!---

3. The Kit - One DSL to Reuse and Restyle Any Component

The Kit (MishkaChelekom.Kit) is a new, opt-in Spark DSL that lets you reuse and restyle the components you already generated - without editing their files. You declare a customize block, add a color, a variant, or restyle a headless part, and the Kit generates a thin wrapper that delegates to the real component. Your design system in one readable module.

Because every class you write lives right there in your own module, Tailwind picks them up automatically - no safelist, no extra configuration. And when you're ready to ship, a single command vendors the Kit engine into your app so it works in production with zero runtime dependency on Mishka Chelekom:

mix mishka.ui.gen.kit

That keeps the whole philosophy of Mishka intact - the code is yours, it lives in your repo, and there's nothing hidden at runtime. The Kit simply gives you a clean, declarative place to keep every customization instead of scattering overrides across your components.

-----Video coming soon!---

4. New Components: Dock, Shape, and Stat

Three new Phoenix components join the library in this release:

1. Dock Phoenix component - a bottom-navigation bar for app-style layouts, requested by the community.
2. Shape Phoenix component - a flexible primitive for decorative and structural shapes.
3. Stat Phoenix component - a clean building block for dashboards, KPIs, and metric tiles.

Each one follows the same conventions as the rest of the library, so they drop straight into your project with the colors, sizes, and variants you already use.

-----Video coming soon!---

5. Smarter, More Interactive Components

We spent a large part of this cycle making existing components do more. Highlights:

1. Combobox now supports a creatable option (let users add new entries on the fly) and server push events, so LiveView can react to selection changes.
2. Tabs gained a scrollable trigger list for vertical orientation, so long tab sets stay usable.
3. Rating added a disabled state, half-star precision, and proper form integration.
4. Accordion now auto-generates item IDs and reacts correctly to server-side state changes on static mount.
5. Dropdown and other floating elements got fixes to positioning and the update lifecycle.

-----Video coming soon!---

6. A More Powerful CLI: Uninstall, Prefixes, and Cleaner Output

Generating components has always been the easy part - this version makes managing them just as easy. The big addition is a proper uninstall task, so you can cleanly remove what you no longer need:

mix mishka.ui.uninstall

It understands both layers via a --headless flag, and --all removes styled and headless components together. On top of that, you can now set component and module name prefixes right from the CLI (or your config.exs), with a --no-save flag when you want a one-off prefix that isn't persisted - handy for teams that namespace their UI. Every mix task also got its own titled banner and a live progress spinner, so long runs finally tell you what's happening.

This release also lets you ship your whole component library as data. The mix mishka.ui.export task walks a component directory and serializes every component - its markup, attributes, variants, JavaScript hooks, and theme CSS - into one portable JSON file, and the new --cms flag turns that into a complete CMS-ready UI-kit bundle you can drop straight into a runtime like MishkaCMS:

# Export the whole styled set as a CMS-ready bundle
mix mishka.ui.export priv/components --cms --name chelekom --bundle-name chelekom --bundle-version 0.0.9

# And the headless set, exactly the same way
mix mishka.ui.export priv/headless --cms --name chelekom_headless --bundle-name chelekom_headless --bundle-version 0.0.9

One command exports the entire styled set, another the entire headless set. On the receiving end every component in that bundle is compiled and loaded dynamically at runtime straight from the JSON - no Mishka Chelekom source in the consumer, no recompile step - so a CMS can render your whole Phoenix and LiveView UI kit from a single file. The exporter even harvests real, ready-to-render examples from each component's own demo pages and stores them right inside the bundle.

For quick reference, here's the full CLI surface in v0.0.9, grouped by what you reach for:

Install and AI setup

1. mix mishka_chelekom.install - add Mishka Chelekom to your project in one step via Igniter.
2. mix mishka.mcp.setup - wire the MCP server into your Phoenix router (add --stdio for local editors and CLI agents).
3. mix mishka.mcp.server - run the MCP server that exposes every component, its docs, and the mix tasks to AI agents.

Generate

1. mix mishka.ui.gen.component - generate and configure a single styled Phoenix component.
2. mix mishka.ui.gen.components - generate multiple (or all) styled components at once.
3. mix mishka.ui.gen.headless - generate a single unstyled headless component - ARIA, slots, and its behavior hook included.
4. mix mishka.ui.gen.headless.components - generate multiple (or all) headless components at once.
5. mix mishka.ui.gen.kit - vendor the Kit engine into your app so your customizations ship with zero runtime dependency.

Manage and share

1. mix mishka.ui.add - generate and configure components straight from a shared repo or JSON bundle.
2. mix mishka.ui.uninstall - cleanly remove styled or headless components (--headless and --all supported).
3. mix mishka.ui.css.config - manage the CSS configuration for your Mishka Chelekom components.
4. mix mishka.ui.export - export a directory of components to JSON, or a full CMS-ready bundle with --cms.
5. mix mishka.assets.deps - install and configure the JavaScript dependencies some components rely on.

-----Video coming soon!---

7. Under the Hood: Elixir 1.18, Refactors, and Bug Fixes

Beyond the features, v0.0.9 raised the minimum Elixir version to 1.18 (with a compile-time JSON/Jason fallback), refactored the generator and asset pipeline for the headless CLI with unified per-command banners and cleaner CSS imports, and fixed a batch of real, user-reported bugs - floating-element event bubbling, menu and sidebar edge-case crashes, native date-picker icons, dropdown positioning with min-width content, and several missing-label conditions in forms.

We also added a demo-driven test harness, and it leans on that same export. It takes the exported bundle, dynamically compiles every component from its JSON, and renders each one through the exact runtime dispatcher a consumer would use - driven by the real invocations pulled from our demo pages, not hand-written mocks. Because it renders the whole library end to end the way it actually ships, it catches genuine rendering bugs - broken slots, bad defaults, mis-wired hooks - before they reach a release, and it does all of that without a downstream app installed. In practice it already caught a number of issues before they ever shipped.

This post walks through the headline features, but plenty more landed in this cycle - smaller fixes, refinements, and internal changes. For the complete, itemised breakdown of everything in this release, read the full v0.0.9 changelog on GitHub.

Future Roadmap:

Our goal is unchanged: keep stabilizing toward v0.1.0. With the AI, headless, and Kit foundations now in place, the next steps are hardening these three pillars, expanding the headless set to match the styled one, and continuing to solve the problems you report on GitHub. The commitment to a rock-solid first 100 components is still firmly on track.

Custom Support and Services

Some companies have needs that fall outside our public roadmap or need to happen faster. For that, we offer a custom support and services option.

Through this service, you can:

1. Request exclusive components tailored to your requirements
2. Have your design systems and UI designs fully implemented using our component architecture
3. Receive CLI-ready solutions designed specifically for your projects

For more details, feel free to explore our custom services section.

Special Thanks - Built on Igniter

None of this CLI would exist without Zach Daniel and his brilliant Igniter library. Igniter is the core of the entire project - every generator and every safe patch it makes to your codebase, the whole mix mishka.ui.* experience, is written on top of it. It's the engine that lets Mishka Chelekom write real, formatted Elixir straight into your app instead of dumping copy-paste snippets on you.

And it keeps getting better. The latest versions of Igniter made component generation dramatically faster - the difference is genuinely amazing, and you feel it on every mix mishka.ui.gen run. Thank you, Zach, for building the foundation so much of the Elixir code-generation ecosystem now stands on.

It's also worth saying plainly: every Mishka library is built, optimized, and integrated specifically for the Ash ecosystem. That alignment is deliberate, not accidental - and we'll be publishing proper content about how it all fits together very soon.

Final Words

Thank you to everyone who tested, reported issues, contributed, and financially supported Mishka Chelekom over the past months. This is a young project with a very large surface area, and it moves forward because of the Elixir community, not despite it.

The best ways to help:

1. Talk about the project and create content for social media
2. Contribute fixes, tests, and new components on GitHub
3. Support us for the price of a coffee a month through GitHub Sponsors
4. Record videos and demos of the library in English on YouTube

And anything else you think would move the project forward.

Special thanks to our financial supporters in recent months ♥️

@SteffenDE | @zachdaniel | @alisinabh | @miguelcoba | @pcharbon70 | @srinivasganti | @drlogout | @douglasmanzelmann | @queencitytech | @WurmPeter | @maxmannen | @aldrin-ronco | @anibal | @dev-guy | @damir | @axelson | @lamaarmy84 | @snewcomer | @Dak425 | @bburgy | @minidfx | @RicoMoorman | @chaz_watkins | @codylandry | Russell Gunther | ghostwritermax | John Nyukuri | Aaron Stewart

Thank you, Mishka Team