The AI half of whatifmantinelookedbetter, living on its own.
That repo made an argument about component libraries: that Mantine does not have to look like Mantine, and the gap between functional and premium is mostly tokens. It also, quietly, accumulated a second argument about something else, which is what AI products look like. Those are different questions, and they were getting in each other's way, so they now have separate front doors.
This one is about the second question. Both repos wear the same theme, mantine-taste-theme, pulled in as a dependency rather than copied, so they cannot drift.
Every AI product converges on the same handful of moves. A composer you type into. Something that streams. A trace you can open when you do not trust the answer. Citations. A thumbs up you will never click. An agent doing several things at once while you wait.
Because everyone builds the same moves, everyone builds them badly in the same way. The streaming cursor that jitters. The reasoning panel that expands and shoves the page down. The thinking state that is a spinner, which tells you nothing. The gradient that is doing a lot of shouting about intelligence.
None of that is hard to fix. It is mostly a question of deciding that motion is part of the design rather than something you sprinkle on at the end. A reveal that staggers reads as considered. The same reveal, all at once, reads as a page load. Same information, different feeling, about four lines of CSS between them.
The other decision worth making early: colour is not how you signal AI. Almost everything here is monochrome. The only real colour is the gradient mark, and the agent avatars, because identity is the one place a hue is genuinely carrying meaning. Sparkles were retired. They were never earning their place.
Three views, switched from the floating control at the bottom of the page.
Patterns is ten interface patterns, grouped by where they sit in the loop.
Input: an AI composer with slash commands and an animated send, an omni bar that cycles prompts and streams its answer, inline ghost completion with Tab to accept, and a breathing gradient orb that listens.
Output: a reply streaming in token by token, a collapsible reasoning trace that reveals as it thinks, citations that stagger in and preview on hover, and response actions with tactile micro-feedback.
Agents: a live multi-step run completing in real time, and an agent picker where each agent is a grainy gradient identity.
Agent is a clean chat studio, the layout every LLM product converges on, done with restraint.
Multi-agent is an orchestration view: mesh gradient avatars, a delegation timeline, and real charts rendered inline with @mantine/charts.
Every one of them is a real component, animated, in both schemes. Nothing here is a screenshot.
pnpm install
pnpm dev # http://localhost:5181
pnpm build
pnpm previewVite, React 19, Mantine 9, @mantine/charts, lucide-react, Geist, TypeScript. pnpm, Node 20 or newer.
The theme comes from GitHub, not npm:
"mantine-taste-theme": "github:joaoviana/mantine-taste-theme"Its dist is committed, so a git install is just a checkout and a link, with no build step and no extra dependencies. When the theme changes, pnpm update mantine-taste-theme brings it over.
A static single page app, so any static host will serve it. Netlify config is in netlify.toml: build with pnpm build, publish dist. public/_redirects gives the SPA fallback the three routes need. No server, no env, no database.
src/
brand.ts the product name, in one place
patterns/ the ten patterns + their registry and shell
templates/ AgentStudio (chat) and agentchat/ (multi-agent)
components/ AppHeader, GradientMark, AiComposer
AiComposer is shared between the composer pattern and the Agent view on purpose. If a pattern is worth showing, it should be the same code that ships.
MIT.