llm-ui: Как быстро создать веб-интерфейс для языковых моделей на React

Введение: Превращаем необработанный вывод LLM в интерактивные UI

В современном мире искусственного интеллекта большие языковые модели (LLM) стали мощным инструментом для генерации текста, кода, ответов на вопросы и многого другого. Однако необработанный текстовый вывод, который они производят, часто неструктурирован и может быть сложным для прямого использования в пользовательских интерфейсах. Это создает значительную проблему: как трансформировать этот поток данных в чистые, структурированные и интерактивные интерфейсы, которые улучшат пользовательский опыт? Необходимость преобразования неформатированного текста в удобные для восприятия и взаимодействия элементы становится критически важной для создания эффективных и приятных в использовании приложений на основе искусственного интеллекта.

Для решения этой задачи была разработана библиотека llm-ui. Она представляет собой гибкое React-решение, предназначенное для создания богатых пользовательских интерфейсов вокруг потоковых выводов LLM.

llm-ui позволяет разработчикам превращать динамически генерируемый текст в структурированные компоненты, такие как блоки кода, таблицы или форматированный текст, делая взаимодействие с LLM более интуитивным и продуктивным. Ориентация llm-ui на потоковые выводы является ключевым аспектом, поскольку многие современные LLM-приложения предоставляют ответы в реальном времени, динамически обновляя контент. Такая архитектура позволяет библиотеке обрабатывать данные по мере их поступления, обеспечивая плавное и отзывчивое отображение, что значительно превосходит статическое представление полного ответа.

Данная статья представляет собой всеобъемлющее руководство по созданию интерактивных пользовательских интерфейсов для вывода LLM с использованием библиотеки llm-ui. В ней будет подробно рассмотрен процесс настройки проекта, установка библиотеки, объяснение ее основных концепций, а также практический пример создания приложения для просмотра кода. Завершит статью сравнительный анализ llm-ui с альтернативными инструментами, что поможет определить его место в экосистеме разработки ИИ-приложений.

Что такое `llm-ui` и почему его стоит использовать?

llm-ui — это специализированная библиотека React, разработанная для трансформации необработанного текстового вывода больших языковых моделей в структурированные, интерактивные и визуально привлекательные элементы пользовательского интерфейса. Ее основная цель заключается в преодолении разрыва между генерацией текста LLM и его представлением в удобной для пользователя форме.

Ключевые преимущества `llm-ui`

Библиотека предлагает несколько значительных преимуществ, которые делают ее ценным инструментом для разработчиков, создающих приложения на основе LLM:

Встроенная поддержка общих форматов: llm-ui изначально поддерживает и умеет обрабатывать наиболее распространенные форматы вывода LLM, такие как Markdown, JSON и CSV. Это значительно упрощает работу с типовыми ответами моделей, избавляя разработчиков от необходимости писать собственный код для парсинга и форматирования этих данных.
Расширяемость с помощью пользовательских компонентов: Одним из наиболее мощных аспектов llm-ui является его гибкость. Библиотека позволяет определять собственные, пользовательские блоки для обработки специфических или более сложных структурированных выводов. Эта возможность гарантирует, что разработчики могут адаптироватьllm-ui к уникальным потребностям своего приложения, создавая специализированные компоненты для любого типа данных, генерируемых LLM.
Совместимость с любыми LLM API: llm-ui не привязан к конкретному поставщику LLM, будь то OpenAI, Gemini или любая другая модель. Он работает на уровне потокового вывода, что означает, что библиотека обрабатывает данные по мере их поступления, независимо от их источника. Такая универсальность является стратегическим преимуществом в быстро развивающейся экосистеме LLM. Поскольку новые модели и поставщики появляются постоянно,llm-ui обеспечивает будущую устойчивость приложений, позволяя легко переключаться между различными LLM без необходимости переписывать логику пользовательского интерфейса. Эта независимость от поставщика и гибкость в определении пользовательских блоков делают llm-ui надежным выбором для разработчиков, стремящихся избежать привязки к конкретному вендору и обеспечить адаптивность своих приложений к будущим изменениям в ландшафте ИИ.

Предварительные требования для работы с `llm-ui`

Для эффективной работы с библиотекой llm-ui и понимания материала, представленного в этой статье, читателю необходимо обладать определенными базовыми знаниями и иметь настроенную среду разработки.

Необходимые знания

Базовое понимание React: Читатель должен быть знаком с основными концепциями React, включая функциональные компоненты, хуки (такие как useState, useEffect, useRef), пропсы и управление состоянием. Понимание жизненного цикла компонентов и принципов реактивного программирования в React также будет полезным.
Знакомство с API LLM: Желательно иметь общее представление о том, как работают API больших языковых моделей, таких как OpenAI, Gemini или другие аналогичные сервисы. Это включает понимание концепций запросов, ответов, потоковой передачи данных и аутентификации.

Требования к среде разработки

Node.js и npm или Yarn: На вашей машине должны быть установлены Node.js (рекомендуется стабильная LTS-версия) и один из пакетных менеджеров — npm (Node Package Manager) или Yarn. Эти инструменты необходимы для инициализации проекта, установки зависимостей и запуска приложения.

Эти предварительные условия позволяют сосредоточиться непосредственно на функциональности llm-ui и его интеграции, не отвлекаясь на базовые концепции React или LLM API.

Начало работы: Настройка проекта React

Для начала работы с llm-ui необходимо настроить базовое React-приложение. В данном руководстве используется Vite — современный и быстрый инструмент для сборки фронтенд-проектов, а также Tailwind CSS для стилизации.

Инициализация React-приложения с Vite

Создание нового проекта React с Vite — это быстрый и эффективный процесс. Откройте терминал и выполните следующую команду:

npm create vite@latest llm-ui-example -- --template react

1	npm create vite@latest llm-ui-example -- --template react

Эта команда создаст новую директорию llm-ui-example и инициализирует в ней базовый проект React с использованием Vite. После завершения перейдите в созданную директорию:

cd llm-ui-example

				1
2

						cd llm-ui-example

Настройка Tailwind CSS для стилизации

Tailwind CSS — это утилитарный CSS-фреймворк, который позволяет быстро создавать стили, не покидая HTML-разметки. Его интеграция в проект Vite также довольно проста:

Установите Tailwind CSS и его зависимости:

npm install -D tailwindcss postcss autoprefixer

				1
2

						npm install -D tailwindcss postcss autoprefixer

Инициализируйте tailwind.config.js и postcss.config.js:

npx tailwindcss init -p

				1

						npx tailwindcss init -p

Настройте пути для Tailwind CSS в файле tailwind.config.js, чтобы он сканировал ваши компоненты на наличие классов Tailwind:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins:,
}

// tailwind.config.js

/** @type {import('tailwindcss').Config} */

export default {

content: [

"./index.html",

"./src/**/*.{js,ts,jsx,tsx}",

theme: {

extend: {},

plugins:,

}

Добавьте директивы Tailwind в ваш основной файл CSS (./src/index.css):

/*./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/*./src/index.css */

@tailwind base;

@tailwind components;

@tailwind utilities;

Установка библиотеки `llm-ui` и ее зависимостей

Теперь, когда базовый проект настроен, можно установить llm-ui и все необходимые для примера зависимости. Это включает основные пакеты llm-ui, а также библиотеки для работы с Markdown, подсветки синтаксиса и парсинга HTML:

npm install @llm-ui/react @llm-ui/markdown react-markdown remark-gfm @llm-ui/code shiki html-react-parser

				1
2

						npm install @llm-ui/react @llm-ui/markdown react-markdown remark-gfm @llm-ui/code shiki html-react-parser

Важное примечание о совместимости React: В процессе установки или при запуске приложения может возникнуть конфликт совместимости с React 19, если он установлен по умолчанию или через другие зависимости. Чтобы избежать потенциальных проблем, рекомендуется явно понизить версию React до 18.0.0, если вы столкнетесь с ошибками, связанными с версиями. Это можно сделать, добавив следующие записи в файл

package.json в разделе resolutions (для Yarn) или overrides (для npm) и переустановив зависимости:

// package.json
{
  //...
  "overrides": {
    "react": "18.0.0",
    "react-dom": "18.0.0"
  },
  //...
}

// package.json

{

//...

"overrides": {

"react": "18.0.0",

"react-dom": "18.0.0"

//...

}

После внесения изменений в package.json выполните npm install или yarn install снова, чтобы применить изменения версий. Это важный практический шаг, который может сэкономить значительное время на отладку, так как проблемы с версиями зависимостей являются распространенным источником ошибок в разработке.

Основные концепции `llm-ui`: Понимание архитектуры

Для эффективного использования llm-ui необходимо глубоко понимать его основные архитектурные компоненты и принципы работы. Библиотека построена на идее сопоставления шаблонов и реактивного рендеринга потоковых данных, что позволяет создавать динамичные и интерактивные интерфейсы.

Подробное объяснение ключевых компонентов `llm-ui`

Block: Этот концепт определяет, как llm-ui распознает и рендерит определенные типы вывода LLM.Block представляет собой конфигурационный объект, который содержит логику для обнаружения структурированных фрагментов в потоке LLM (например, блоки кода, JSON-объекты, CSV-данные или просто Markdown-текст). Каждый Block включает в себя функции для определения полных и частичных совпадений, а также компонент React, который будет использоваться для отображения найденного содержимого.
LLMOutputComponent: Это обычный React-компонент, который отвечает за визуализацию вывода сопоставленного блока. Он получает данныеblockMatch в качестве пропсов, что позволяет ему отображать разобранное и структурированное содержимое. Примерами таких компонентов могут быть CodeBlock для отображения кода с подсветкой синтаксиса или Markdown для рендеринга форматированного текста.
useLLMOutput hook: Ядро llm-ui для управления потоком данных. Этот хук прослушивает потоковый вывод LLM, постоянно анализируя его на предмет соответствия определенным Block‘ам. По мере обнаружения совпаденийuseLLMOutput возвращает структурированные данные, готовые для рендеринга соответствующими LLMOutputComponent‘ами.
blockMatch: Объект blockMatch является результатом работы useLLMOutput. Он содержит разобранный и структурированный вывод из потока LLM, а также метаданные о найденном блоке (например, тип блока, язык для кода). Этот объект затем передается вLLMOutputComponent для отображения.
fallbackBlock: Это стратегия для рендеринга любого содержимого из потока LLM, которое не было сопоставлено ни с одним из явно определенных Block‘ов. ОбычноfallbackBlock настраивается на отображение оставшегося текста как обычного Markdown, обеспечивая, что весь вывод LLM будет представлен пользователю в читаемом формате.
lookBack function: Эта функция является критически важной для обработки потоковых данных, особенно когда структурированные блоки (например, многострочные блоки кода) поступают фрагментами.lookBack обрабатывает ранее полученный потоковый контент, позволяя llm-ui определить, что и сколько должно быть отображено во время потока. Это позволяет библиотеке интеллектуально идентифицировать и рендерить неполные блоки по мере их поступления, а затем бесшовно завершать их, когда приходит больше данных, обеспечивая плавное и точное отображение сложных структур.
throttle: Этот параметр контролирует темп анимации потока.throttle позволяет имитировать более естественный, посимвольный или пословный вывод LLM, предотвращая мгновенное появление всего сгенерированного текста. Это улучшает пользовательский опыт, делая взаимодействие с ИИ более динамичным и менее резким.

Совокупность этих концепций — Block для определения шаблонов, useLLMOutput для реактивной обработки потока, blockMatch для структурированных данных, lookBack для интеллектуального парсинга фрагментированных данных и throttle для плавного отображения — формирует мощную архитектуру llm-ui. Она позволяет не просто отображать текст, а создавать сложные, адаптивные и интерактивные пользовательские интерфейсы, способные эффективно работать с непредсказуемым и потоковым характером вывода LLM. Такой подход обеспечивает высокоотзывчивый и точный пользовательский опыт даже при работе с частично сгенерированным контентом.

Практическое применение: Создание приложения для просмотра кода

Чтобы продемонстрировать возможности llm-ui, будет создано простое приложение для просмотра кода, которое принимает текстовый ввод от LLM и отображает его, автоматически выделяя блоки кода с подсветкой синтаксиса.

Организация проекта

Для поддержания чистоты и масштабируемости кода рекомендуется разделить логику приложения на несколько логических папок :

blocks: Здесь будут храниться определения Block‘ов для различных типов вывода LLM.
ui: Содержит компоненты пользовательского интерфейса, которые рендерят сопоставленные блоки.
utils: Включает вспомогательные функции и конфигурации, такие как настройки Shiki или API-интеграции.

Настройка пользовательского интерфейса

Начнем с базовой структуры компонента App.jsx, который будет служить основной точкой входа для нашего приложения. Он будет использовать макет с разделенным экраном: одна сторона для ввода запроса и отображения индикатора загрузки, другая — для вывода LLM.

// src/App.jsx
import { useState } from 'react';
import { GeminiApi } from './utils/geminiApi';
import { BlockToShow } from './ui/BlockToShow';

function App() {
  const = useState('');
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col">
      <header className="bg-gray-800 p-4 text-center text-2xl font-bold">
        LLM-UI Code Viewer
      </header>
      <main className="flex flex-1 p-4 gap-4">
        <div className="flex-1 flex flex-col bg-gray-800 rounded-lg p-4">
          <h2 className="text-xl font-semibold mb-4">Input & Controls</h2>
          <GeminiApi setResponseText={setResponseText} setIsLoading={setIsLoading} />
          {isLoading && (
            <div className="mt-4 text-center text-gray-400">
              Генерация ответа...
            </div>
          )}
        </div>
        <div className="flex-1 flex flex-col bg-gray-800 rounded-lg p-4 overflow-auto">
          <h2 className="text-xl font-semibold mb-4">LLM Output</h2>
          <div className="flex-1 bg-gray-900 p-4 rounded-md overflow-auto">
            <BlockToShow stream={responseText} isStreamFinished={!isLoading} />
          </div>
        </div>
      </main>
    </div>
  );
}

export default App;

// src/App.jsx

import { useState } from 'react';

import { GeminiApi } from './utils/geminiApi';

import { BlockToShow } from './ui/BlockToShow';

function App() {

const = useState('');

const [isLoading, setIsLoading] = useState(false);

return (

LLM-UI Code Viewer

</header>

<h2 className="text-xl font-semibold mb-4">Input & Controls</h2>

{isLoading && (

Генерация ответа...

</div>

)}

</div>

<h2 className="text-xl font-semibold mb-4">LLM Output</h2>

</div>

</main>

</div>

);

}

export default App;

Определение блоков

llm-ui работает, сопоставляя части потока LLM с предопределенными «блоками». Для нашего приложения для просмотра кода нам понадобится блок для кода и резервный блок для всего остального (например, обычного текста, который будет отображаться как Markdown).

Блок кода

Создайте файл src/blocks/codeBlockBlock.jsx. Этот файл будет определять, как llm-ui должен распознавать и обрабатывать блоки кода. llm-ui предоставляет вспомогательные функции для обнаружения блоков кода.

// src/blocks/codeBlockBlock.jsx
import { findCompleteCodeBlock, findPartialCodeBlock, codeBlockLookBack } from '@llm-ui/code';
import { CodeBlock } from '../ui/codeBlockUi';

export const codeBlockBlock = {
  findCompleteMatch: findCompleteCodeBlock,
  findPartialMatch: findPartialCodeBlock,
  lookBack: codeBlockLookBack,
  component: CodeBlock,
};

// src/blocks/codeBlockBlock.jsx

import { findCompleteCodeBlock, findPartialCodeBlock, codeBlockLookBack } from '@llm-ui/code';

import { CodeBlock } from '../ui/codeBlockUi';

export const codeBlockBlock = {

findCompleteMatch: findCompleteCodeBlock,

findPartialMatch: findPartialCodeBlock,

lookBack: codeBlockLookBack,

component: CodeBlock,

};

Здесь findCompleteCodeBlock и findPartialCodeBlock используются для определения, является ли текущий фрагмент потока полным или частичным блоком кода. Различие между полными и частичными совпадениями, а также использование функции lookBack, демонстрирует сложный механизм парсинга llm-ui. Поскольку вывод LLM, особенно при потоковой передаче, может быть фрагментированным (например, начало блока кода может прийти раньше, чем его завершение), llm-ui с помощью этих функций может интеллектуально идентифицировать и рендерить неполные блоки во время потока, а затем бесшовно завершать их, когда поступает больше данных. Это обеспечивает плавное и точное отображение сложных структур, даже если они приходят по частям.

Резервный блок (Markdown)

Создайте файл src/blocks/markdownBlock.jsx. Этот блок будет использоваться для рендеринга любого текста, который не был распознан как блок кода.

// src/blocks/markdownBlock.jsx
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import htmlParser from 'html-react-parser'; // Для обработки HTML, если он есть в Markdown

export const MarkdownComponent = ({ blockMatch }) => {
  const content = blockMatch.output;
  
  // Если вам нужно обрабатывать HTML внутри Markdown (например, для Shiki),
  // используйте html-react-parser.
  // В данном случае, Shiki генерирует HTML, который мы хотим встроить.
  const components = {
    // Пользовательский рендеринг для тегов <pre>
    pre: ({ node,...props }) => {
      // Если контент внутри <pre> уже является HTML (например, от Shiki),
      // парсим его, иначе рендерим как обычный текст.
      const htmlContent = props.children?.props.value;
      if (htmlContent && htmlContent.startsWith('<pre class="shiki')) {
        return htmlParser(htmlContent);
      }
      return <pre {...props} />;
    },
    // Добавьте другие пользовательские компоненты, если необходимо
  };

  return (
    <div className="prose prose-invert max-w-none"> {/* Tailwind prose для стилизации Markdown */}
      <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
        {content}
      </ReactMarkdown>
    </div>
  );
};

export const markdownBlock = {
  findCompleteMatch: (stream, lookBack) => ({
    match: stream.length > 0, // Всегда совпадает, если есть текст
    output: stream,
  }),
  findPartialMatch: (stream, lookBack) => ({
    match: stream.length > 0,
    output: stream,
  }),
  lookBack: (stream) => stream, // Возвращаем весь поток как Markdown
  component: MarkdownComponent,
};

// src/blocks/markdownBlock.jsx

import ReactMarkdown from 'react-markdown';

import remarkGfm from 'remark-gfm';

import htmlParser from 'html-react-parser'; // Для обработки HTML, если он есть в Markdown

export const MarkdownComponent = ({ blockMatch }) => {

const content = blockMatch.output;

// Если вам нужно обрабатывать HTML внутри Markdown (например, для Shiki),

// используйте html-react-parser.

// В данном случае, Shiki генерирует HTML, который мы хотим встроить.

const components = {

// Пользовательский рендеринг для тегов <pre>

pre: ({ node,...props }) => {

// Если контент внутри <pre> уже является HTML (например, от Shiki),

// парсим его, иначе рендерим как обычный текст.

const htmlContent = props.children?.props.value;

if (htmlContent && htmlContent.startsWith('<pre class="shiki')) {

return htmlParser(htmlContent);

}

return <pre {...props} />;

// Добавьте другие пользовательские компоненты, если необходимо

};

return (

<div className="prose prose-invert max-w-none"> {/* Tailwind prose для стилизации Markdown */}

{content}

</ReactMarkdown>

</div>

);

};

export const markdownBlock = {

findCompleteMatch: (stream, lookBack) => ({

match: stream.length > 0, // Всегда совпадает, если есть текст

output: stream,

}),

findPartialMatch: (stream, lookBack) => ({

match: stream.length > 0,

output: stream,

}),

lookBack: (stream) => stream, // Возвращаем весь поток как Markdown

component: MarkdownComponent,

};

Интеграция Shiki для подсветки синтаксиса

Shiki — это мощный и красивый инструмент для подсветки синтаксиса. llm-ui предоставляет удобные утилиты для его интеграции.

Настройка `shikiConfig.js`

Создайте файл src/utils/shikiConfig.js. Здесь мы настроим Shiki, загрузив необходимые языки и темы.

// src/utils/shikiConfig.js
import { getHighlighterCore } from 'shiki/core';
import { loadWasm } from 'shiki/wasm';

// Импортируйте нужные языки
import js from 'shiki/langs/javascript.mjs';
import ts from 'shiki/langs/typescript.mjs';
import html from 'shiki/langs/html.mjs';
import css from 'shiki/langs/css.mjs';
import json from 'shiki/langs/json.mjs';
import bash from 'shiki/langs/bash.mjs';

// Импортируйте нужные темы
import githubDark from 'shiki/themes/github-dark.mjs';
import githubLight from 'shiki/themes/github-light.mjs';

export const shikiConfig = {
  highlighter: getHighlighterCore({
    themes:,
    langs: [js, ts, html, css, json, bash],
    loadWasm: loadWasm,
  }),
};

// src/utils/shikiConfig.js

import { getHighlighterCore } from 'shiki/core';

import { loadWasm } from 'shiki/wasm';

// Импортируйте нужные языки

import js from 'shiki/langs/javascript.mjs';

import ts from 'shiki/langs/typescript.mjs';

import html from 'shiki/langs/html.mjs';

import css from 'shiki/langs/css.mjs';

import json from 'shiki/langs/json.mjs';

import bash from 'shiki/langs/bash.mjs';

// Импортируйте нужные темы

import githubDark from 'shiki/themes/github-dark.mjs';

import githubLight from 'shiki/themes/github-light.mjs';

export const shikiConfig = {

highlighter: getHighlighterCore({

themes:,

langs: [js, ts, html, css, json, bash],

loadWasm: loadWasm,

}),

};

Компонент `ShikiBlockComponent`

Хотя shikiConfig.js настраивает подсветку, нам нужен компонент React, который будет использовать эту конфигурацию для рендеринга кода.

// src/ui/codeBlockUi.jsx
import { useCodeBlockToHtml } from '@llm-ui/code';
import { shikiConfig } from '../utils/shikiConfig';
import { useEffect, useState } from 'react';

export const CodeBlock = ({ blockMatch }) => {
  const { output, language } = blockMatch.output;
  const { html, isLoading, error } = useCodeBlockToHtml({
    code: output,
    language: language,
    highlighter: shikiConfig.highlighter,
    theme: 'github-dark', // Можно сделать динамическим
  });

  if (isLoading) {
    return <pre className="bg-gray-700 p-4 rounded-md text-gray-300">Загрузка кода...</pre>;
  }

  if (error) {
    console.error("Ошибка подсветки синтаксиса:", error);
    return (
      <pre className="bg-red-900 p-4 rounded-md text-red-200">
        Не удалось подсветить код: {output}
      </pre>
    );
  }

  // Использование dangerouslySetInnerHTML для вставки HTML, сгенерированного Shiki
  return (
    <div className="overflow-x-auto rounded-md">
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
};

// src/ui/codeBlockUi.jsx

import { useCodeBlockToHtml } from '@llm-ui/code';

import { shikiConfig } from '../utils/shikiConfig';

import { useEffect, useState } from 'react';

export const CodeBlock = ({ blockMatch }) => {

const { output, language } = blockMatch.output;

const { html, isLoading, error } = useCodeBlockToHtml({

code: output,

language: language,

highlighter: shikiConfig.highlighter,

theme: 'github-dark', // Можно сделать динамическим

});

if (isLoading) {

return <pre className="bg-gray-700 p-4 rounded-md text-gray-300">Загрузка кода...</pre>;

}

if (error) {

console.error("Ошибка подсветки синтаксиса:", error);

return (

Не удалось подсветить код: {output}

</pre>

);

}

// Использование dangerouslySetInnerHTML для вставки HTML, сгенерированного Shiki

return (

</div>

);

};

Интеграция Shiki не только структурирует вывод кода, но и значительно улучшает его читаемость и профессионализм. Сырой код в пользовательском интерфейсе может быть труден для восприятия, но подсветка синтаксиса делает его понятным и приятным для глаз, что является критически важным для приложений, генерирующих код или технический контент.

Компонент отображения блоков (`BlockToShow.jsx`)

Этот компонент будет использовать хук useLLMOutput для прослушивания потока LLM, сопоставления его с определенными блоками и рендеринга соответствующих компонентов.

// src/ui/BlockToShow.jsx
import { useLLMOutput, throttleBasic } from '@llm-ui/react';
import { codeBlockBlock } from '../blocks/codeBlockBlock';
import { markdownBlock } from '../blocks/markdownBlock';

export const BlockToShow = ({ stream, isStreamFinished }) => {
  const { blockMatches } = useLLMOutput({
    llmOutput: stream,
    blocks:, // Сначала ищем блоки кода
    fallbackBlock: markdownBlock, // Все остальное рендерим как Markdown
    isStreamFinished,
    throttle: throttleBasic(100), // Задержка в 100 мс для плавного потока
  });

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

// src/ui/BlockToShow.jsx

import { useLLMOutput, throttleBasic } from '@llm-ui/react';

import { codeBlockBlock } from '../blocks/codeBlockBlock';

import { markdownBlock } from '../blocks/markdownBlock';

export const BlockToShow = ({ stream, isStreamFinished }) => {

const { blockMatches } = useLLMOutput({

llmOutput: stream,

blocks:, // Сначала ищем блоки кода

fallbackBlock: markdownBlock, // Все остальное рендерим как Markdown

isStreamFinished,

throttle: throttleBasic(100), // Задержка в 100 мс для плавного потока

});

return (

{blockMatches.map((blockMatch, index) => {

const Component = blockMatch.block.component;

return <Component key={index} blockMatch={blockMatch} />;

})}

</>

);

};

Здесь useLLMOutput принимает stream (потоковый текст от LLM), массив blocks для сопоставления (codeBlockBlock в нашем случае), fallbackBlock для обработки несопоставленного контента и isStreamFinished для сигнализации об окончании потока. Параметр throttle управляет темпом отображения, имитируя естественный, посимвольный вывод, что делает пользовательский опыт более приятным.

Получение потока LLM: Интеграция с Gemini API

Для получения потокового вывода от LLM мы будем использовать Gemini API от Google.

Установка Gemini SDK

npm i @google/generative-ai

				1
2

						npm i @google/generative-ai

Настройка переменной окружения

Для безопасного хранения ключа API Gemini создайте файл .env в корне вашего проекта и добавьте в него свой ключ:

VITE_GOOGLE_API_KEY=YOUR_GEMINI_API_KEY

				1
2

						VITE_GOOGLE_API_KEY=YOUR_GEMINI_API_KEY

Важное замечание по безопасности: Использование файла .env для ключей API является критически важной практикой безопасности. Это предотвращает случайное включение конфиденциальных данных в систему контроля версий (например, Git) и их раскрытие. При развертывании приложения в продакшене, переменные окружения должны быть настроены на сервере, а не храниться в репозитории.

Компонент `geminiApi.jsx`

Создайте файл src/utils/geminiApi.jsx. Этот компонент будет обрабатывать ввод пользователя, отправлять запрос в Gemini API и управлять состоянием потокового ответа.

// src/utils/geminiApi.jsx
import { GoogleGenerativeAI } from '@google/generative-ai';
import { useState } from 'react';

// Получаем ключ API из переменных окружения Vite
const API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;

export const GeminiApi = ({ setResponseText, setIsLoading }) => {
  const [prompt, setPrompt] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setResponseText(''); // Очищаем предыдущий ответ
    setIsLoading(true); // Устанавливаем состояние загрузки

    if (!API_KEY) {
      console.error("API Key не найден. Убедитесь, что VITE_GOOGLE_API_KEY установлен в.env файле.");
      setResponseText("Ошибка: API Key не найден.");
      setIsLoading(false);
      return;
    }

    try {
      const genAI = new GoogleGenerativeAI(API_KEY);
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

      const result = await model.generateContentStream(prompt);
      let fullResponse = '';
      for await (const chunk of result.stream) {
        const chunkText = chunk.text();
        fullResponse += chunkText;
        setResponseText(fullResponse); // Обновляем состояние по мере поступления чанков
      }
    } catch (error) {
      console.error("Ошибка при получении ответа от Gemini API:", error);
      setResponseText(`Произошла ошибка: ${error.message}`);
    } finally {
      setIsLoading(false); // Снимаем состояние загрузки
    }
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
      <textarea
        className="w-full p-3 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
        rows="6"
        placeholder="Введите ваш запрос для LLM..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      ></textarea>
      <button
        type="submit"
        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out"
        disabled={!prompt}
      >
        Получить ответ
      </button>
    </form>
  );
};

// src/utils/geminiApi.jsx

import { GoogleGenerativeAI } from '@google/generative-ai';

import { useState } from 'react';

// Получаем ключ API из переменных окружения Vite

const API_KEY = import.meta.env.VITE_GOOGLE_API_KEY;

export const GeminiApi = ({ setResponseText, setIsLoading }) => {

const [prompt, setPrompt] = useState('');

const handleSubmit = async (e) => {

e.preventDefault();

setResponseText(''); // Очищаем предыдущий ответ

setIsLoading(true); // Устанавливаем состояние загрузки

if (!API_KEY) {

console.error("API Key не найден. Убедитесь, что VITE_GOOGLE_API_KEY установлен в.env файле.");

setResponseText("Ошибка: API Key не найден.");

setIsLoading(false);

return;

}

try {

const genAI = new GoogleGenerativeAI(API_KEY);

const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

const result = await model.generateContentStream(prompt);

let fullResponse = '';

for await (const chunk of result.stream) {

const chunkText = chunk.text();

fullResponse += chunkText;

setResponseText(fullResponse); // Обновляем состояние по мере поступления чанков

}

} catch (error) {

console.error("Ошибка при получении ответа от Gemini API:", error);

setResponseText(`Произошла ошибка: ${error.message}`);

} finally {

setIsLoading(false); // Снимаем состояние загрузки

}

};

return (

<textarea

className="w-full p-3 rounded-md bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"

rows="6"

placeholder="Введите ваш запрос для LLM..."

value={prompt}

onChange={(e) => setPrompt(e.target.value)}

></textarea>

<button

type="submit"

className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-300 ease-in-out"

disabled={!prompt}

Получить ответ

</button>

</form>

);

};

Эта интеграция с Gemini API, использующая возможности потоковой передачи (generateContentStream), демонстрирует практическую применимость llm-ui с крупными поставщиками LLM. Это не просто теоретический пример, а полностью функциональный цикл: пользовательский ввод -> потоковый вывод LLM -> парсинг и рендеринг

llm-ui. Такой подход обеспечивает целостное представление о создании полнофункционального приложения на основе генеративного ИИ.

Запуск приложения

После того как все компоненты настроены, вы можете запустить приложение:

npm run dev

				1
2

						npm run dev

Откройте браузер по адресу, указанному в консоли (обычно http://localhost:5173), и вы увидите работающее приложение для просмотра кода с интерактивным выводом LLM.

Заключение

Библиотека llm-ui значительно упрощает процесс преобразования необработанного, часто неструктурированного вывода больших языковых моделей в интуитивно понятные и удобные для пользователя интерфейсы. Как было показано в этой статье,

llm-ui предоставляет мощный набор инструментов для создания динамичных и отзывчивых приложений на основе ИИ.

В ходе данного руководства были рассмотрены ключевые аспекты работы с llm-ui: от начальной настройки проекта React и установки необходимых зависимостей до глубокого погружения в основные концепции библиотеки, такие как Block, useLLMOutput и lookBack. Практический пример создания приложения для просмотра кода продемонстрировал, как можно интегрировать

llm-ui с реальными LLM API, такими как Gemini, для обработки потоковых данных и их интерактивного отображения с подсветкой синтаксиса.

llm-ui позиционируется как мощный инструмент, который добавляет структуру, гибкость и отточенность в интерфейсы искусственного интеллекта. Его способность работать с любыми LLM API и поддерживать пользовательские компоненты делает его универсальным решением для различных сценариев использования. Для разработчиков, стремящихся создавать высококачественные, отзывчивые и визуально привлекательные пользовательские интерфейсы для своих LLM-приложений,

llm-ui предлагает надежную и эффективную основу.

Рекомендуется изучить возможности llm-ui для создания более сложных или специализированных приложений, таких как интерактивные редакторы кода, динамические отчеты или многоформатные панели управления, где требуется точный контроль над представлением и взаимодействием с генерируемым контентом.

llm-ui: Как быстро создать веб-интерфейс для языковых моделей на React

Введение: Превращаем необработанный вывод LLM в интерактивные UI

Что такое `llm-ui` и почему его стоит использовать?

Ключевые преимущества `llm-ui`

Предварительные требования для работы с `llm-ui`

Необходимые знания

Требования к среде разработки

Начало работы: Настройка проекта React

Инициализация React-приложения с Vite

Настройка Tailwind CSS для стилизации

Установка библиотеки `llm-ui` и ее зависимостей

Основные концепции `llm-ui`: Понимание архитектуры

Подробное объяснение ключевых компонентов `llm-ui`

Практическое применение: Создание приложения для просмотра кода

Организация проекта

Настройка пользовательского интерфейса

Определение блоков

Блок кода

Резервный блок (Markdown)

Интеграция Shiki для подсветки синтаксиса

Настройка `shikiConfig.js`

Компонент `ShikiBlockComponent`

Компонент отображения блоков (`BlockToShow.jsx`)

Получение потока LLM: Интеграция с Gemini API

Установка Gemini SDK

Настройка переменной окружения

Компонент `geminiApi.jsx`

Запуск приложения

Заключение

Цветовая схема приложения — 14 трендовых вариантов

NODE ENV в Node JS или что такое переменные окружения

Модальное окно на Vue js — пишем компонент

Webpack Vue js — простая сборка приложения

Теория цвета в веб дизайне

Что должен знать junior frontend разработчик?

Разбираем основные директивы Vue.js

Как улучшить дизайн сайта: 15 обязательных советов +20 крутых примеров современных дизайнов сайта

Фишки для сайта — 16 фич которые помогут привлечь пользователей

Оптимизация сайта Google PageSpeed Insights — 17 рекомендаций

llm-ui: Как быстро создать веб-интерфейс для языковых моделей на React

Введение: Превращаем необработанный вывод LLM в интерактивные UI

Что такое llm-ui и почему его стоит использовать?

Ключевые преимущества llm-ui

Предварительные требования для работы с llm-ui

Необходимые знания

Требования к среде разработки

Начало работы: Настройка проекта React

Инициализация React-приложения с Vite

Настройка Tailwind CSS для стилизации

Установка библиотеки llm-ui и ее зависимостей

Основные концепции llm-ui: Понимание архитектуры

Подробное объяснение ключевых компонентов llm-ui

Практическое применение: Создание приложения для просмотра кода

Организация проекта

Настройка пользовательского интерфейса

Определение блоков

Блок кода

Резервный блок (Markdown)

Интеграция Shiki для подсветки синтаксиса

Настройка shikiConfig.js

Компонент ShikiBlockComponent

Компонент отображения блоков (BlockToShow.jsx)

Получение потока LLM: Интеграция с Gemini API

Установка Gemini SDK

Настройка переменной окружения

Компонент geminiApi.jsx

Запуск приложения

Заключение

Свежие посты

Что такое `llm-ui` и почему его стоит использовать?

Ключевые преимущества `llm-ui`

Предварительные требования для работы с `llm-ui`

Установка библиотеки `llm-ui` и ее зависимостей

Основные концепции `llm-ui`: Понимание архитектуры

Подробное объяснение ключевых компонентов `llm-ui`

Настройка `shikiConfig.js`

Компонент `ShikiBlockComponent`

Компонент отображения блоков (`BlockToShow.jsx`)

Компонент `geminiApi.jsx`