Show HN: Chai-UI – A design system to generative AI apps

Version 0.10.0 4 Components 140 Tokens 4 Packages

// A prompt bar for your AI app
import { useState } from "react";
import { Composer } from "@chai-ui/react";
import "@chai-ui/tokens/css";
import "@chai-ui/react/style.css";

export function PromptBar() {
  const [prompt, setPrompt] = useState("");
  return <Composer value={prompt} onChange={setPrompt} onSubmit={console.log} />;
}
php
<!-- A prompt bar for your AI app -->
<script setup lang="ts">
import { ref } from "vue";
import { Composer } from "@chai-ui/vue";
import "@chai-ui/tokens/css";
import "@chai-ui/vue/style.css";

const prompt = ref("");
</script>

<template>
  <Composer v-model="prompt" @submit="console.log" />
</template>

Copy & Paste to get a feel for it! A working prompt bar with

@chai-ui/react``@chai-ui/vue. onSubmit``@submit hands you everything it tracks. The same UIs built into today's most powerful AI apps are now open source. With Chai UI, every AI model is controlled from one place, through one interface. Designers, developers and AI agents get components for model routing, prompt optimization, media analysis and image editing, plus new use cases like world models as they arrive.