UI बनाने के लिए कम टोकन

Lyra UI के साथ AI 26% कम टोकन लिखता है।

हमने Claude Sonnet से वही चैट, डैशबोर्ड और सेटिंग्स इंटरफ़ेस तीन तरीकों से बनवाए: Lyra UI के साथ, React, Tailwind और shadcn/ui के साथ, और सादे HTML, CSS और JavaScript के साथ (18 रन)। Lyra UI के साथ उसने shadcn/ui की तुलना में 26% कम आउटपुट टोकन और 46% कम पंक्तियाँ लिखीं, और सादे HTML की तुलना में 33% कम टोकन, क्योंकि एक टैग मार्कअप, स्टाइलिंग और स्टेट तीनों की जगह ले लेता है। Lyra के रन में llms-full.txt संदर्भ भी पढ़ा गया, जिसे एजेंट कैश करके दोबारा इस्तेमाल करते हैं।

उदाहरण

कुछ ही टैग में एक चैट इंटरफ़ेस।

<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>

घटक ब्राउज़ करें · गाइड पढ़ें (अंग्रेज़ी में)