Demo #06 · Quimera Design Research

UI Agente Chat IA

Interfaz de conversación del agente Alexandra — Quimera Group. Streaming simulado token-a-token · Markdown renderizado · Quick-replies. En producción: vercel/ai + assistant-ui

Tailwind CSS CDN — layout & estilos Marked.js 9 — markdown en burbujas Vanilla JS — streaming simulado & UX Proyecto: Agentes WhatsApp / Web · Quimera Group
AX

Alexandra

Agente IA · Quimera Group

⬡ Quimera AI

ALEXANDRA · QUIMERA GROUP · SANTA CRUZ, BOLIVIA

Cómo usarlo en producción vercel/ai · assistant-ui · marked
▼

Este demo usa JS puro. En producción, reemplazá la simulación con el SDK de Vercel AI y el componente de assistant-ui: 

# 1. Instalar dependencias
npm install ai @assistant-ui/react marked

# 2. Crear el backend (app/api/chat/route.ts — Next.js App Router)
import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = await streamText({
    model: anthropic('claude-sonnet-4-6'),
    system: 'Eres Alexandra, agente de ventas de Quimera Group Bolivia...',
    messages,
  });
  return result.toDataStreamResponse();
}

# 3. UI con assistant-ui (app/page.tsx)
import { AssistantRuntimeProvider, useEdgeRuntime } from '@assistant-ui/react';
import { Thread } from '@assistant-ui/react';

export default function Page() {
  const runtime = useEdgeRuntime({ api: '/api/chat' });
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

# 4. Markdown en mensajes (ya incluido en assistant-ui)
#    o con marked en respuestas custom:
import { marked } from 'marked';
const html = marked.parse(agentMessage);