Un solo envío.
JSON validado, listo para integrar.
OneShotAiPanel ejecuta una tarea en una sola pasada: se conecta al LLM que configures (opencode, shadcn, fallback o tu propio adaptador), transmite y valida el JSON contra esquemas, y luego plug los contenidos en tu stack.
Presentación
Cómo funciona
Un componente React que se conecta al LLM de tu elección y convierte una petición en entregables validados, sin copiar y pegar manualmente.
1. Describe la tarea
Un prompt de usuario, un prompt de sistema y los archivos de contexto. El componente ensambla el prompt final.
2. Configura la conexión al modelo
El componente se conecta al provider que configures mediante el adapter (opencode, shadcn, fallback) o tu propio onSend. Sin esta conexión, nada funciona.
3. Un solo envío
El modelo responde con streaming de JSON. Cada ticket espera una estructura precisa, controlada por esquema.
4. Validación automática
La respuesta se valida contra los esquemas. En caso de desviación, se devuelve un feedback específico para una segunda pasada.
5. Diff y revisión
Si ya existe contenido, un diff línea a línea te muestra qué cambia antes de integrar.
6. Plug
Recupera los contenidos seleccionados mediante onPlug y conéctalos a tu código, adaptador o SDK.
Wireframe
Explora el componente
El componente real, en solo lectura. Pasa el cursor y haz clic en los puntos numerados para entender cada zona.
Cada archivo debe apuntar a una ruta absoluta o URL (archivo local, CDN, servidor, drive...) que el agente pueda leer.
Los tickets describen las tareas concretas que debe completar el agente. Cada ticket puede tener una descripción, una explicación y un esquema de respuesta esperado. Un ticket marcado como «hecho» se excluye del prompt.
Email + contraseña, gestión de errores.
Creación de cuenta con validación.
Middleware para rutas privadas.
Haz clic en un punto numerado para explorar cada zona. Pasa el cursor para una vista previa.
Encabezado
La barra de encabezado lleva el título de la tarea, un botón de ayuda (puntos de integración y créditos) y el botón de configuración. Todo es configurable mediante props (title, showInfoButton, showSettingsButton…).
Configuración
Todas las opciones, por props
La configuración se hace en la capa de integración. Estas son las opciones principales.
Contenido
titlestringTítulo mostrado en el encabezado del componente.
systemPromptstringEl rol y las reglas dadas al modelo.
initialUserPromptstringLa petición inicial pre-rellenada en el campo de usuario.
Contexto
filesAiPanelContextFile[]Archivos del proyecto proporcionados como contexto al modelo.
ticketsAiPanelTicket[]División de la tarea, cada ticket con su esquema JSON.
Contrato
parserAiPanelResponseParserPersonaliza el parseo y la validación de la respuesta.
invalidMode'warn' | 'block'Avisar o bloquear cuando la respuesta no valida los esquemas.
Adapter
adapterAiAdapterConfigProvider (opencode, shadcn, fallback), modelo y clave de API.
onSendAiPanelSendHandlerReemplaza el envío con tu propia lógica (SDK, proxy…).
Eventos
onPlugfn(response, keys)Se llama cuando el usuario integra los contenidos seleccionados.
i18n
language'fr' | 'en'Idioma de la interfaz.
labelsPartial<AiPanelLabels>Sobrescritura fina de cualquier etiqueta.
UI
actionLabelstringEtiqueta del botón principal de ejecución.
showInfoButtonbooleanMuestra el botón de ayuda / integración / créditos.
showSettingsButtonbooleanMuestra el botón de configuración.
showInfoIntegrationbooleanMuestra el punto de integración en el panel de ayuda.
showInfoCreditsbooleanMuestra los créditos en el panel de ayuda.
Diff
Ver antes de integrar
Cuando un ticket ya tiene contenido, el componente compara y deja elegir.
¿Un ticket con contenido existente?
El componente calcula un diff línea a línea entre el contenido existente y la propuesta del modelo. Conservas, reemplazas o mezclas antes de integrar.
Playground
Pruébalo aquí
El componente se ejecuta de verdad en esta página. Ajusta las props, elige la vista y lanza.
Tipos JSON permitidos en el formato de respuesta de los tickets:
El formato de respuesta describe el valor esperado para cada ticket. Ejemplo:{ "type": "object", "properties": { "email": { "type": "string" } }, "required": ["email"] }
Listo para jugar
La generación está simulada de principio a fin (streaming + validación), sin servidor.
Contadores
El sitio en cifras
Contadores públicos, alimentados en tiempo real. Un clic, una cifra.
Recuento best-effort · 1 visita por sesión.