Eggthropic es un proyecto experimental independiente, sin afiliación ni respaldo de Anthropic.

Experimentos/Playground de interfaces para IA
UX/UIEn cursoavanzado

Contenido verificado el 2026-05-07 · experimento de Eggthropic

Playground de interfaces para IA

Explorar patrones de interfaz nativos de IA: texto en streaming, indicadores de confianza, visualización de tool calls y trazas de razonamiento — en un playground React a medida.

Claude APIReactTypeScriptFramer MotionSSE

Objetivo

Identificar y prototipar los patrones de UI que hacen que una interfaz con IA se sienta rápida, transparente y fiable — más allá de la burbuja de chat de siempre.

Contexto

Casi todas las interfaces de IA caen en la metáfora del chat: el usuario escribe, el modelo responde en streaming. Este experimento pregunta: ¿qué otros patrones de interacción aparecen cuando expones más de lo que el modelo está haciendo? Inspirado en las trazas de extended thinking, la visibilidad de tool calls y los displays de probabilidad de tokens de las interfaces de investigación, el playground implementa cuatro patrones experimentales usando el streaming de la API de Anthropic.

Notas de implementación

Construido contra la Messages API con streaming. Cuatro patrones: (1) Máquina de escribir con velocidad ajustable — simula distintas tasas de tokens. (2) Mapa de calor de confianza — colorea tokens por certeza estimada (de momento simulada, no salen de logprobs reales). (3) Traza de tool calls — cada invocación es una tarjeta expandible con el JSON de entrada/salida. (4) Indicador de fases de pensamiento — muestra «leyendo», «razonando», «escribiendo» según el timing de eventos SSE. Todos los patrones se combinan desde un panel de configuración.

Resultado

La traza de tool calls resultó el patrón más valioso para depurar flujos agénticos. La máquina de escribir reveló que la latencia percibida cae en picado cuando aparece un solo token en los primeros 300 ms. El mapa de confianza es experimental y no usa datos reales del modelo — está etiquetado claramente como prototipo.

Qué funcionó

  • El streaming SSE de la API de Anthropic es fiable y está bien documentado
  • La traza de tool calls redujo el tiempo de depuración en tests multi-paso
  • AnimatePresence de Framer Motion gestionó los appends de tokens sin saltos de layout
  • El panel de configuración facilitó comparar patrones lado a lado

Qué falló

  • El mapa de confianza no usa logprobs reales: la API de Anthropic no expone probabilidades por token públicamente
  • Detectar fases de pensamiento por el timing de SSE es una heurística, no una característica del protocolo
  • Renderizar 1000+ tokens en streaming causó sobrecoste de re-render en React sin virtualización

Próxima iteración

Implementar virtualización de tokens para streams largos. Investigar si las trazas de extended thinking (disponibles en los modelos Claude con modo thinking) pueden alimentar el indicador de fases de forma más fiable.

Reprodúcelo tú

Este experimento es un playbook: con las herramientas de arriba y las notas de implementación puedes repetirlo en tu propio entorno. Si lo haces — funcione o no — cuéntanoslo en GitHub: las réplicas con resultados distintos son tan valiosas como el experimento original.

Claude APIReactTypeScriptFramer MotionSSE

Referencias