llm-ui: Visualizzare l'Output degli LLM in React con Stile

Quando si lavora con un Large Language Model (LLM) come ChatGPT, Claude o Ollama, la generazione del testo è solo una parte del processo: è altrettanto cruciale come rendere visibile e leggibile questo output all'interno di una UI moderna e scalabile.

Con questa guida tecnica, scoprirai come usare llm-ui per integrare elegantemente markdown, codice evidenziato e contenuti strutturati nelle tue applicazioni React.

🚀 Cos'è llm-ui?

llm-ui è una libreria React pensata per interpreti LLM-based: consente di renderizzare blocchi markdown, codice evidenziato (con shiki) e altri contenuti testuali strutturati in modo nativo e accessibile.

llm-ui supporta parsing dinamico, rendering reattivo di stream e componenti React completamente personalizzabili.

🛠️ Installazione con pnpm

pnpm add @llm-ui/react @llm-ui/markdown react-markdown remark-gfm @llm-ui/code shiki html-react-parser

In alternativa, puoi usare npm o yarn a seconda della tua toolchain.

🖋️ Creazione dei Componenti

Markdown Renderer

const MarkdownComponent = ({ blockMatch }) => (
  <ReactMarkdown remarkPlugins={[remarkGfm]}>
    {blockMatch.output}
  </ReactMarkdown>
);

Code Highlighter con Shiki

const CodeBlock = ({ blockMatch }) => {
  const { html, code } = useCodeBlockToHtml({
    markdownCodeBlock: blockMatch.output,
    highlighter,
    codeToHtmlOptions: { theme: "github-dark" },
  });

  return html ? <>{parseHtml(html)}</> : <pre><code>{code}</code></pre>;
};

🧵 Hook useLLMOutput: Parsing Avanzato

const { blockMatches } = useLLMOutput({
  llmOutput: output,
  fallbackBlock: {
    component: MarkdownComponent,
    lookBack: markdownLookBack(),
  },
  blocks: [
    {
      component: CodeBlock,
      findCompleteMatch: findCompleteCodeBlock(),
      findPartialMatch: findPartialCodeBlock(),
      lookBack: codeBlockLookBack(),
    },
  ],
  isStreamFinished,
});

Rendering dinamico:

{blockMatches.map((b, i) => {
  const Component = b.block.component;
  return <Component key={i} blockMatch={b} />;
})}

⚠️ Ottimizzazione con Next.js

Se usi Next.js, disabilita il Server Side Rendering per evitare errori con shiki:

const Example = dynamic(() => import("./example"), { ssr: false });

💡 Tirando le somme

llm-ui è la scelta perfetta per chi sviluppa UI dinamiche alimentate da LLM. Con pochi componenti e una buona architettura, puoi integrare markdown, codice e contenuti strutturati con facilità, mantenendo un'esperienza utente moderna.

Ideale per: chatbot avanzati, tool di documentazione automatica, strumenti di prompt engineering.

📬 Hai bisogno di integrare llm-ui nella tua app?

Se stai costruendo un'app AI-powered e vuoi un frontend React robusto e ben progettato, posso aiutarti.

👉 Contattami ora