Demos

Crea un asistente para tu catálogo industrial como nuestra demo

Toda la construcción de un vistazo

Un único dataset compartido alimenta una experiencia de búsqueda por especificaciones y un chat de ingeniero de aplicaciones. Las fichas técnicas respaldan las respuestas técnicas; los formularios y los servicios vinculados dan soporte a las acciones de comparación, stock y presupuesto.

La demo de catálogo industrial ayuda a los ingenieros a pasar de una pregunta sobre especificaciones a una decisión de compra. Pueden buscar por referencia, valor nominal o interfaz; comparar piezas; consultar stock y plazo de entrega; abrir una ficha técnica; y preparar un presupuesto en vivo sin salir del catálogo.

Esta guía sigue la construcción en el orden que importa: indexar las evidencias, convertir la búsqueda en el camino rápido, añadir herramientas para acciones reales y, por último, probar el resultado.

1. Indexa las páginas y los documentos

Crea un dataset de memoria y captura las páginas de producto, categoría, especificaciones y stock. Después incluye los documentos de producto que contienen los detalles que una ficha de producto no puede mostrar.

Incluir en el registro del productoPor qué importa
Fichas técnicas y mapas de registrosResponden a preguntas eléctricas y de interfaz.
Declaraciones de conformidadRespaldan las comprobaciones de certificación.
Notas CAD y PDF técnicosDan a los ingenieros el detalle necesario para elegir una pieza.

Coloca cada documento en la página de producto correspondiente para que el rastreador pueda indexarlo y devolverlo como fuente. Los ingenieros preguntan por valores máximos, consumo de corriente, perfiles de soldadura por refusión y direcciones I²C; esos datos suelen estar en el PDF, no en el texto de marketing.

La cobertura de documentos es la cobertura de producto

En un catálogo técnico, no basta con indexar todas las páginas. Comprueba que el dataset contiene los datos que hay dentro de los documentos, no solo los títulos y las URL de los productos.

Consulta Crear una base de conocimiento y Configurar trabajos de captura de datos.

“Un número correcto respaldado por la ficha técnica equivocada sigue siendo una respuesta equivocada.”


Un ingeniero que conoce la restricción debe poder escribirla y obtener una respuesta directa y con fuentes. Por eso la página de inicio arranca con un Centro de búsqueda inteligente, mientras que un chat de ingeniero de aplicaciones se ocupa de las preguntas más profundas que necesitan contexto o un ida y vuelta.

Necesidad del ingenieroMejor superficieQué aporta
Encontrar una pieza o especificación conocidaBúsqueda por especificacionesUna respuesta escrita con tarjetas de las piezas de origen.
Comparar opciones o interpretar un resultadoChat de ingeniero de aplicacionesUna conversación con contexto y herramientas técnicas.
Consultar un pedido o un presupuestoChat con contextoInformación vinculada al comprador que ha iniciado sesión.

Usa un texto de ejemplo que enseñe el estilo de consulta: “Busca por referencia, especificación, interfaz, encapsulado o categoría.” Cuando la búsqueda esté vacía, muestra piezas destacadas para que la página de inicio siga pareciendo un catálogo.

Usa una única base de conocimiento para ambas superficies

La experiencia de búsqueda y el chat son configuraciones separadas, pero usan un único dataset. Así cada dato es coherente y puedes mantener una revisión de ficha técnica una sola vez.

  • Mantén las fuentes alineadas. La búsqueda y el chat recuperan la misma información de las piezas.
  • Mantén cada capacidad en su sitio. Los formularios y los servicios vinculados pertenecen al asistente; el dataset compartido mantiene sus respuestas basadas en el mismo catálogo.
  • Mantén las funciones diferenciadas. La búsqueda sirve para una respuesta rápida y con fuentes. El chat es para la siguiente pregunta: “¿Cuál sale más barato en volumen y hay stock?”

Consulta Crear un centro de búsqueda y Configurar la recuperación de un centro de búsqueda.

Dale al asistente un rol preciso

Configura el asistente flotante como ingeniero de aplicaciones de este catálogo. Su comportamiento debe ser inequívoco:

  • Responder a partir de las especificaciones y fichas técnicas indexadas.
  • Citar la pieza o el documento que respalda la respuesta.
  • Identificar las piezas por su identificador de catálogo.
  • Usar una acción en vivo para un presupuesto, una consulta de stock o un selector en lugar de describir cómo hacerlo.
  • Indicar cuándo las fuentes no respaldan una respuesta.

Esto va más allá del tono. Un valor de tensión o de par equivocado no es simplemente una recomendación floja: puede acabar en un pedido erróneo. Consulta Crear un asistente y Lanzar un asistente.


3. Usa sugerencias que demuestren que el catálogo puede responder

Las sugerencias técnicas deben nombrar piezas y decisiones reales. Cada una es una pequeña promesa que el asistente tiene que cumplir.

  • Sensor I²C de 3,3 V para el CX-40
  • ¿Qué módulos tienen certificación CE y FCC?
  • Ficha técnica, stock y plazo de entrega del CX-40
  • Compara el CX-40 y el CX-08

Estos ejemplos cubren una búsqueda por especificaciones, normativa, consulta de documentos y de disponibilidad, y comparación. Consulta Escribir sugerencias útiles para un centro de búsqueda.

4. Convierte una pregunta en un flujo de trabajo técnico

Las respuestas de texto resuelven “¿Cuál es el valor nominal?” Una selección de piezas o una decisión de compra necesita algunos datos estructurados. La demo los recoge con widgets breves dentro de la conversación.

WidgetRecoge o muestraResultado
Buscador de piezasCategoría, especificación, certificación y caso de usoCoincidencias ordenadas y el motivo por el que encaja cada una.
CompararDe dos a cuatro referenciasUna vista lado a lado de las diferencias.
Presupuesto / RFQPieza y cantidadTramos de precio, total y plazo de entrega.
Consulta de stockPieza y ubicaciónDisponibilidad actual.

Cada widget es un formulario del asistente con un disparador, campos y una acción de envío. Los widgets enriquecidos usan un campo WIDGET: la plantilla contiene el marcado, las funciones auxiliares gestionan los eventos y un servicio vinculado aporta los datos.

Declara las funciones auxiliares en el nivel superior

Declara cada función auxiliar de un widget como función de nivel superior. Si no, el paquete de funciones auxiliares puede no registrarse sin mostrar ningún error evidente.

// A helper wired from the widget markup (oninput="skdwn.instance.helpers.ikcCompareSearch(event)").
function ikcCompareSearch(event) {
  skdwn.instance.executeProxyRequest('part-search', {}, (res) => {
    const matches = JSON.parse(res.payload.reply).matches;
    renderCompareRows(matches);
  }, { query: event.target.value });
}

Consulta Captar leads y usar formularios.


5. Conecta acciones del catálogo en vivo

Usa servicios vinculados para los datos que cambian: resultados del selector, tramos de precio, stock y plazo de entrega. El asistente llama a cada servicio por su ID, mientras que el endpoint real y las credenciales se quedan en el servidor.

ServicioResponsabilidad
SelectorPuntúa el catálogo y devuelve coincidencias con sus motivos.
PresupuestoAplica los tramos por cantidad y devuelve un total y un plazo de entrega.
StockDevuelve la disponibilidad por ubicación.

Registra cada servicio con un ID, un método y una URL. Pon los valores de cada llamada en marcadores {{params.x}}:

part-quote  GET  https://your-site/api/quote?sku={{params.sku}}&quantity={{params.quantity}}

Devuelve una respuesta pequeña que la conversación pueda mostrar directamente:

{
  "reply": "**Quote VC-Q-560146** — 20 × CX-40 — **Total EUR 699** — lead time 4 days",
  "references": [
    { "title": "CX-40 Cortex-M4 Dev Board", "url": "/demos/industrial-catalog/product/cx40-dev-board" }
  ]
}

Devuelve la respuesta, no el registro en bruto

Devuelve markdown listo para mostrar junto con las referencias a las fuentes. Pasar el JSON de dominio en bruto obliga al asistente a formatear un resultado que el servicio ya sabe expresar.

Usa GET para consultas exploratorias desde widgets, como el autocompletado, y POST para un envío deliberado de formulario, como mandar una solicitud de presupuesto. Envía desde el servicio un User-Agent de navegador normal para que un WAF no bloquee la petición sin avisar. Consulta Servicios vinculados.

6. Adapta el modo y la apariencia a cada página

El mismo asistente no debe presentarse igual en todas partes.

PáginaSuperficieModo
Inicio y búsquedaBúsqueda por especificacionesCentro de búsqueda
ProductoBúsqueda en la cabecera + panel integradoSuperpuesto, ampliado en contexto
CategoríaChat flotanteBotón “Pregunta a un ingeniero de aplicaciones”
CuentaChat con contextoChat flotante con el contexto del comprador

Usa metadatos por página para la descripción, las sugerencias y el contexto. En una página de producto, mantén la pregunta vinculada a esa pieza. En una página de cuenta, deja espacio para una conversación sobre pedidos y presupuestos.

Adapta al catálogo los colores de marca y de acento, las superficies, el texto, los botones y la cabecera de búsqueda. Da estilo a los campos de formulario con el mismo cuidado que al contenedor del widget para que las herramientas de comparación y presupuesto se perciban como parte de la experiencia de producto. Consulta la sección de apariencia de Lanzar un asistente.


7. Añade la integración y el contexto del comprador

Carga el runtime una sola vez y luego inicia la búsqueda y el asistente de ingeniero de aplicaciones en sus propios contenedores.

<div id="seekdown-assistant-root"></div>
<script src="https://saas.seekdown.ai/js/seekdown-assistant.js"></script>
<script>
  // Spec search center and floating application engineer on the same page.
  skdwn.startAssistant({ assistantId: 'catalog-search', container: '#catalog-search',
    config: { settings: { baseTemplate: 'overlay' } } });
  skdwn.startAssistant({ assistantId: 'application-engineer', container: '#app-engineer',
    config: { settings: { floatingActionButton: { useFloatingActionButton: true } } } });
</script>

Para la cuenta profesional, pasa userId y un additionalContext conciso cuando se cargue el asistente. Así cada respuesta que dependa de la cuenta puede usar ese contexto, mientras la consulta privada se queda detrás de un servicio vinculado.

Antes del lanzamiento, añade el sitio a los orígenes permitidos y genera una clave de API. Consulta Desplegar un asistente.

8. Prueba las evidencias y mantenlas al día

Prueba el catálogo como lo haría un ingeniero:

  • Referencias exactas y restricciones de especificación.
  • Preguntas de certificación y recuperación de documentos.
  • Un presupuesto para una cantidad real y una consulta de stock.
  • Solicitudes no soportadas.

En cada resultado, revisa la respuesta y su fuente. Un número correcto que apunta a la ficha técnica equivocada sigue siendo un defecto.

Después de cualquier revisión del catálogo o de los documentos, verifica el nuevo dato en la fuente, en el dataset y en la respuesta del asistente. Programa las capturas según el ritmo de cambios del catálogo y de las fichas técnicas.

Una regla de funcionamiento sencilla

El asistente es una capa de acceso sobre el catálogo. Su precisión no puede superar la precisión y la actualidad de las fuentes subyacentes.

Crea la integración con un cliente MCP

El código de conexión con los endpoints, las funciones auxiliares de los widgets, la integración y las instrucciones de comportamiento son trabajo adecuado para un cliente MCP como Claude Code, GitHub Copilot o Codex. Dale un encargo concreto y luego revisa los contratos de datos y los resultados: “Encuentra piezas por especificación, compáralas, presupuesta una cantidad y consulta el stock.” Consulta Conectar clientes MCP.


Relacionado: Crear una base de conocimiento · Crear un centro de búsqueda · Crear un asistente · Servicios vinculados · Desplegar un asistente · Conectar clientes MCP. Para la versión de tienda de consumo de esta configuración, consulta Cómo se creó la demo de tienda retail.