AI Chat

ai v0.2.0 react, svelte, vue, angular, vanilla, blade

Núcleo headless de chat con IA (streaming compatible con OpenAI, fallback entre modelos, estimación de tokens, function calling con confirmación humana, historial local/backend) con adaptadores para React, Svelte, Vue, Angular y sin framework, más snippets de Blade. BYOK — la clave de API siempre viene de la configuración server-side de tu app, nunca va hardcodeada.

Abrir playground · AI Chat en vivo

Variables de entorno

Clave	Requerida	Descripción
`OPENROUTER_API_KEY`	No	Clave de API de OpenRouter, el proveedor compatible con OpenAI por defecto (baseURL https://openrouter.ai/api/v1). BYOK — se pasa desde tu app a ChatConfig.apiKey, nunca va hardcodeada en este componente.
`OPENAI_API_KEY`	No	Clave de API usada solo si defines LLM_BASE_URL para apuntar directamente a OpenAI en lugar de a OpenRouter.
`LLM_BASE_URL`	No	Override opcional de ChatConfig.baseURL. Por defecto usa OpenRouter; puedes apuntarlo a cualquier endpoint /chat/completions compatible con OpenAI (OpenAI, LiteLLM, gateway propio).

Instalación manual

Descarga el tarball y copia a tu proyecto los archivos de tu framework:

curl -L -o ai-chat.tar.gz https://modularcorehub.com/registry/ai-chat.tar.gz
tar -xzf ai-chat.tar.gz

Origen	Destino en tu proyecto
`core/client.ts`	`src/modularcore/ai-chat/core/client.ts`
`core/stream.ts`	`src/modularcore/ai-chat/core/stream.ts`
`core/chat.ts`	`src/modularcore/ai-chat/core/chat.ts`
`core/fallback.ts`	`src/modularcore/ai-chat/core/fallback.ts`
`core/tokens.ts`	`src/modularcore/ai-chat/core/tokens.ts`
`core/tools.ts`	`src/modularcore/ai-chat/core/tools.ts`
`core/history/types.ts`	`src/modularcore/ai-chat/core/history/types.ts`
`core/history/local.ts`	`src/modularcore/ai-chat/core/history/local.ts`
`core/history/backend.ts`	`src/modularcore/ai-chat/core/history/backend.ts`
`ui/markdown.ts`	`src/modularcore/ai-chat/ui/markdown.ts`
`adapters/react/use-chat.ts`	`src/modularcore/ai-chat/adapters/react/use-chat.ts`

Instalación con CLI

modularcore add ai-chat

Documentación

@modularcore/ai-chat es el core headless de chat con IA: streaming compatible con OpenAI, fallback entre modelos, seguimiento de uso de tokens, function calling con confirmación human-in-the-loop, e historial local o contra tu propio backend — con adaptadores finos para React, Svelte, Vue 3, Angular y Web Components sin framework.

BYOK (Bring Your Own Key)

El core nunca lee ni hardcodea una API key desde el entorno. Tu aplicación pasa apiKey (y opcionalmente baseURL) en ChatConfig. Esto permite apuntar a OpenRouter (el proveedor por defecto), a OpenAI directamente, o a cualquier otro endpoint /chat/completions compatible con OpenAI — incluido tu propio proxy en servidor, de modo que la clave nunca llega al navegador.

Qué incluye el paquete

core/client.ts — cliente ligero basado en fetch, compatible con OpenAI (requestChatCompletionStream).
core/stream.ts — parser real de SSE sobre el ReadableStream<Uint8Array> que devuelve fetch.
core/chat.ts — Chat, el orquestador headless (streaming, bucle de tool-calls, historial).
core/fallback.ts — prueba una lista ordenada de modelos, haciendo fallback si uno falla.
core/tokens.ts — parsea los payloads usage de cada proveedor.
core/tools.ts — registro de function calling + despacho human-in-the-loop.
core/history/* — historial de conversación conectable (almacenamiento local o tu propio backend).
ui/markdown.ts — renderizador Markdown → HTML sin dependencias que escapa todo el texto no confiable antes de añadir cualquier marcado, por lo que su salida es segura para asignar a innerHTML/{@html}.
adapters/react, adapters/svelte, adapters/vanilla — bindings finos sobre Chat para cada framework (el adaptador de Svelte usa runas de Svelte 5). adapters/vanilla es el binding sin framework, expuesto como @modularcore/ai-chat/vanilla.
adapters/vue, adapters/angular — bindings por componente (Composition API / signals) con limpieza de ciclo de vida; no comparten estado de conversación de forma global.

Laravel / Blade

snippets/laravel/ incluye un punto de montaje Blade y una referencia de proxy OpenAI-compatible en servidor. Mantén la clave del proveedor en la configuración de Laravel, autentica y limita la ruta, y conserva el allowlist de modelos; nunca inyectes una clave de proveedor en una plantilla Blade.

Uso básico (Svelte 5)

import { createChat } from '@modularcore/ai-chat/svelte';

const chat = createChat({
  apiKey: import.meta.env.VITE_OPENROUTER_API_KEY, // o proxy a través de tu propio backend
  models: ['openai/gpt-4o-mini'],
});

await chat.send('Hola!');

Para una demo pública, nunca envíes una clave real al cliente: haz proxy de las peticiones a través de un endpoint en servidor que inyecte la clave (el propio Playground de AI Chat de este sitio hace exactamente esto).

Más documentación

docs/backend-history-contract.md (dentro de packages/ai-chat/) — el contrato que debe implementar tu backend si usas core/history/backend.ts en lugar del almacenamiento local.