Chat com IA

Uma tela de chat de agente de codificação completa, no estilo de Cursor ou Claude Code - uma barra lateral de agente com ações rápidas e uma árvore de repositórios de bate-papo recentes, um tópico de bate-papo com turnos de usuário/assistente e ações de feedback, um compositor de pílula com anexar, escolher modelo, microfone e enviar, uma barra de status com branch, projeto, modo e medidor de contexto, e um painel lateral de largura fixa alternando entre alterações não comprometidas com uma visualização de código ao vivo e uma visualização do navegador. A coluna de bate-papo flexiona para preencher pontos de interrupção mais amplos enquanto o painel de código mantém sua largura fixa.

Prévia interativa

Bate-papo de IA

Nova aba

boardui.com/templates/ai-chat

Código

12 Alterações não autorizadas+156-23

boardui/app/components/button.tsx +74

Novo

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Chat com agentes

atualizar nossos tokens de cor para o modo escuro e adicionar um tema reutilizável para o registro. execute o lint e uma compilação de produção quando terminar.

57%

12 Alterações não autorizadas+156-23

boardui/app/components/button.tsx +74

Novo

1import type { Metadata } from "next";2import Link from "next/link";3import { ComponentDetail } from "@/components/application/docs/component-detail";4import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";5
6export const metadata: Metadata = {7  title: "Home Dashboard Template — React + Tailwind (Pro)",8  description:9    "Full admin dashboard template for React + Tailwind CSS — sidebar navigation, KPI cards, bar chart, and a customers data table. A BoardUI Pro template.",10};11
12const PREVIEW_CODE = `import { DashboardShell } from "@/components/application/dashboard/dashboard-shell";13
14export default function DashboardPage() {15  // Full screen: floating sidebar, header, KPI cards,16  // earnings bar chart, and the customers data table.17  return <DashboardShell />;18}`;19
20export default function HomeDashboardDetail() {21  return (22    <ComponentDetail23      wide24      breadcrumb={[25        { label: "Board UI", href: "/" },26        { label: "Components", href: "/components" },27        { label: "Home Dashboard" },28      ]}29      title="Home Dashboard"30      description="A complete admin dashboard screen — floating sidebar navigation, header with search and notifications, KPI stat cards, an earnings bar chart, and a customers data table."31      preview={32        <div className="h-[760px] w-full overflow-hidden rounded-2xl border border-border-button-default">33          <div className="origin-top-left scale-[0.8] [width:125%]">34            <DashboardShell />35          </div>36        </div>37      }38      previewClassName="p-3 sm:p-4"39      previewCode={PREVIEW_CODE}40      sections={[41        {42          id: "full-template",43          title: "Live template",44          body: (

Instalação

O AI Chat é um modelo BoardUI Pro, vendido separadamente.

Modo escuro pronto - este modelo segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

Acesso pro pro

Chat com IA é um Pró modelo.

Sua licença BoardUI Pro desbloqueia isso modelo e todos os seus arquivos fonte. Ative sua licença uma vez, em seguida, instalá-lo diretamente em seu projeto com o CLI.

Ativar a sua licença

Use a chave do seu email de compra Lemon Squeezy. Você só precisa fazer isso uma vez por máquina.

npx boardui@latest login YOUR_LICENSE_KEY

Instalar o modelo

O CLI copia a fonte e resolve todas as dependências do BoardUI e do npm para você.

npx boardui@latest add template-ai-chat

Isto modelo está incluído no BoardUI Pro

Obter BoardUI Pro agora e instalá-lo termina fora.

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

O que está incluído

O modelo ships como um pacote de código-fonte completo: a barra lateral do agente (pesquisa rápida, Novo agente / Automação / Personalizar ações, a árvore de repositórios com linhas de bate-papo recentes, chips de tempo e o conector curvo de árvore, e a placa de plano com o botão Upgrade), o recipiente de bate-papo (cabeçalho breadcrumb, thread de mensagem com ações de feedback e chips de link inline, o compositor com seletor modelo, microfone e enviar, e a barra de status com o anel de contexto), as alterações / painel lateral de código, e todos os componentes de base de que dependem.