Repolode
Enviar
lobehub

lobehub/lobe-ui

Biblioteca de componentes React para criar chats com IA e apps web de AIGC, com componentes de chat, Markdown, código e interfaces administrativas.

Ver no GitHubSite
Estrelas
2,239
Forks
280
Issues abertas
56
Último commit
há 8 horas

O que é?

Lobe UI é a biblioteca de componentes React usada pelo LobeHub, voltada a desenvolvedores que criam interfaces de chat com IA e aplicações web de AIGC. Ela inclui componentes para renderizar saídas de LLM, como Markdown, blocos de código, diagramas Mermaid, diffs e prévias de HTML, além de interfaces de chat e acesso em dispositivos móveis.

Além de chat, a biblioteca abrange interfaces gerais de apps: dashboards, tabelas de dados, formulários e landing pages seguem a mesma linguagem visual. A tematização oferece modos claro e escuro e permite alternar entre cores primárias e neutras usando um único atributo. Os textos estão disponíveis em inglês e chinês simplificado.

O projeto é exclusivamente ESM e requer React 19, além de dependências de peer, como motion, @lobehub/icons e @lobehub/fluent-emoji. A documentação também é publicada em formatos voltados a agentes de programação, incluindo uma referência skills.md e um índice de páginas llms.txt.

Recursos principais

  • 01Componentes para renderizar saídas de LLM, incluindo Markdown, código, diagramas Mermaid e diffs.
  • 02Interfaces de chat e para dispositivos móveis em experiências de conversa.
  • 03Componentes de dashboard, tabela de dados e formulário para consoles administrativos.
  • 04Temas claro e escuro com alternância entre cores primárias e neutras.
  • 05Pacotes de textos em inglês e chinês simplificado incluídos.
  • 06Documentação disponível em formatos legíveis por agentes, como skills.md e llms.txt.

Casos de uso

  • Criar uma página de chat com uma lista de mensagens e um campo de entrada para um assistente de IA.
  • Renderizar saídas de Markdown e código transmitidas em streaming por um LLM em um app web.
  • Criar consoles administrativos ou tabelas de dados junto com funcionalidades de IA.
  • Adicionar temas claro e escuro a um produto React existente.

Início rápido

  1. 1

    Instale o pacote e suas peer dependencies com pnpm

    pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion
  2. 2

    Importe o tema e o CSS de estilos, depois envolva seu app com ConfigProvider e use um componente como Button

Antes de usar

  • Requer React 19 e só pode ser consumido via ESM; além disso, é necessário instalar várias peer dependencies.
  • Ao atualizar da versão 5.x, será preciso deixar de usar Ant Design durante a migração para a v6.

Em coleções

Chatbots de IA e clientes de chatFrameworks frontend e componentes de interface

Tópicos

#react#ui-components#design-system#chatbot#llm#typescript#aigc#antd#dumi#lobehub

Perguntas frequentes

O que é lobe-ui?
Biblioteca de componentes React para criar chats com IA e apps web de AIGC, com componentes de chat, Markdown, código e interfaces administrativas. Lobe UI é a biblioteca de componentes React usada pelo LobeHub, voltada a desenvolvedores que criam interfaces de chat com IA e aplicações web de AIGC. Ela inclui componentes para renderizar saídas de LLM, como Markdown, blocos de código, diagramas Mermaid, diffs e prévias de HTML, além de interfaces de chat e acesso em dispositivos móveis.
lobe-ui é gratuito? Qual é a licença?
lobe-ui é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
lobe-ui ainda é mantido?
Manutenção ativa. O último commit de lobe-ui foi em 22 de out. de 2026.
Para que posso usar lobe-ui?
Criar uma página de chat com uma lista de mensagens e um campo de entrada para um assistente de IA. Renderizar saídas de Markdown e código transmitidas em streaming por um LLM em um app web. Criar consoles administrativos ou tabelas de dados junto com funcionalidades de IA. Adicionar temas claro e escuro a um produto React existente.
Como instalar lobe-ui?
Instale o pacote e suas peer dependencies com pnpm: pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion Importe o tema e o CSS de estilos, depois envolva seu app com ConfigProvider e use um componente como Button
Onde consigo lobe-ui?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/lobehub/lobe-ui

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados