Fewer tokens to generate UI
AI de write 26% fewer tokens with Lyra UI.
We ask Claude Sonnet to build di same chat, dashboard, and settings interfaces with Lyra UI, with React, Tailwind and shadcn/ui, and with plain HTML, CSS and JavaScript (18 runs). With Lyra UI e write 26% fewer output tokens and 46% fewer lines than with shadcn/ui, and 33% fewer tokens than with plain HTML, because one tag dey replace markup, styling, and state. Lyra runs also read di llms-full.txt reference, wey agents dey cache and reuse.
Example
Chat interface inside few tags.
<script type="module">
import '@aceshooting/lyra-ui/components/lr-chat-viewport.js';
import '@aceshooting/lyra-ui/components/lr-chat-message.js';
import '@aceshooting/lyra-ui/components/lr-chat-composer.js';
</script>
<lr-chat-viewport>
<lr-chat-message message-role="user">Summarize this report.</lr-chat-message>
<lr-chat-message message-role="assistant" status="streaming">Here are the key points…</lr-chat-message>
</lr-chat-viewport>
<lr-chat-composer placeholder="Ask anything"></lr-chat-composer>