{"slug": "show-hn-chai-ui-a-design-system-to-generative-ai-apps", "title": "Show HN: Chai-UI – A design system to generative AI apps", "summary": "Chai-UI version 0.10.0 has been released as an open-source design system for generative AI apps, shipping 4 components, 140 tokens and 4 packages, including React and Vue prompt-bar components such as Composer. The release positions the components for model routing, prompt optimization, media analysis and image editing, with the project stating that \"every AI model is controlled from one place, through one interface.", "body_md": "Version 0.10.0\n4 Components\n140 Tokens\n4 Packages\n\n``` js\n// A prompt bar for your AI app\nimport { useState } from \"react\";\nimport { Composer } from \"@chai-ui/react\";\nimport \"@chai-ui/tokens/css\";\nimport \"@chai-ui/react/style.css\";\n\nexport function PromptBar() {\n  const [prompt, setPrompt] = useState(\"\");\n  return <Composer value={prompt} onChange={setPrompt} onSubmit={console.log} />;\n}\nphp\n<!-- A prompt bar for your AI app -->\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { Composer } from \"@chai-ui/vue\";\nimport \"@chai-ui/tokens/css\";\nimport \"@chai-ui/vue/style.css\";\n\nconst prompt = ref(\"\");\n</script>\n\n<template>\n  <Composer v-model=\"prompt\" @submit=\"console.log\" />\n</template>\n```\n\n**Copy & Paste to get a feel for it!** A working prompt bar with\n\n`@chai-ui/react``@chai-ui/vue`.\n                `onSubmit``@submit` hands you everything it tracks.\n            The same UIs built into today's most powerful AI apps are now open source. With\n            Chai UI, every AI model is controlled from one place, through one interface.\n            Designers, developers and AI agents get components for **model routing**,\n            **prompt optimization**, **media analysis** and\n            **image editing**, plus new use cases like **world models**\n            as they arrive.", "url": "https://wpnews.pro/news/show-hn-chai-ui-a-design-system-to-generative-ai-apps", "canonical_source": "https://chai-ui.com/", "published_at": "2026-10-20 00:06:14+00:00", "updated_at": "2026-10-20 00:16:24.433007+00:00", "lang": "en", "topics": ["ai-products", "ai-tools", "generative-ai", "developer-tools"], "entities": ["Chai-UI", "@chai-ui/react", "@chai-ui/vue", "@chai-ui/tokens"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/show-hn-chai-ui-a-design-system-to-generative-ai-apps", "markdown": "https://wpnews.pro/news/show-hn-chai-ui-a-design-system-to-generative-ai-apps.md", "text": "https://wpnews.pro/news/show-hn-chai-ui-a-design-system-to-generative-ai-apps.txt", "jsonld": "https://wpnews.pro/news/show-hn-chai-ui-a-design-system-to-generative-ai-apps.jsonld"}}