IA en tu muñeca: Cómo construí un chat con IA para el Apple Watch

¿Te imaginas hablar con una IA directamente desde tu muñeca? Eso es exactamente lo que estoy construyendo: una interfaz de chat con inteligencia artificial para el Apple Watch usando SwiftUI.

El reto: diseñar para una pantalla de 2 pulgadas

Diseñar para el Apple Watch no es como diseñar para el iPhone. Aquí cada píxel cuenta. Los principales desafíos que enfrenté fueron:

• Espacio limitado: La pantalla tiene apenas ~45mm de ancho
• Interacción diferente: No hay teclado tradicional, todo es dictado, scribble o respuestas rápidas
• Rendimiento: El Watch tiene recursos muy limitados comparado con un iPhone

Arquitectura del chat en SwiftUI

La estructura del chat se basa en un ScrollView con mensajes alineados y un campo de entrada con onSubmit:

struct ChatView: View {
    @State private var messages: [Message] = []
    @State private var inputText = ""
    
    var body: some View {
        VStack {
            ScrollViewReader { proxy in
                ScrollView {
                    ForEach(messages) { message in
                        MessageBubble(message: message)
                    }
                }
            }
            
            TextField("Escribe...", text: $inputText)
                .onSubmit {
                    sendMessage()
                }
        }
    }
}

Manejo de estados

Uno de los puntos clave fue manejar correctamente los estados de la conversación:

1. Idle — Esperando input del usuario
2. Sending — El mensaje se envió, esperando respuesta
3. Streaming — La IA está respondiendo en tiempo real
4. Error — Algo falló, mostrar retry

enum ChatState {
    case idle
    case sending
    case streaming
    case error(String)
}

@State private var chatState: ChatState = .idle

Esto permite mostrar indicadores visuales como un spinner mientras la IA responde, o un botón de reintentar si hay un error de conexión.

Diseño limpio para pantallas pequeñas

Para que la UI se vea bien en el Watch, seguí estos principios:

• Burbujas compactas: Padding reducido, texto de 14pt
• Colores diferenciados: Azul para el usuario, gris para la IA
• Sin elementos innecesarios: Cada elemento en pantalla debe tener un propósito
• Scroll automático: Al recibir una respuesta, el scroll baja al último mensaje

struct MessageBubble: View {
    let message: Message
    
    var body: some View {
        HStack {
            if message.isUser { Spacer() }
            
            Text(message.text)
                .font(.system(size: 14))
                .padding(8)
                .background(
                    message.isUser ? Color.blue : Color.gray.opacity(0.3)
                )
                .cornerRadius(12)
            
            if !message.isUser { Spacer() }
        }
    }
}

Lo que viene

Este proyecto aún está en desarrollo. Los próximos pasos son:

• Integración con API de IA (OpenAI / Gemini)
• Respuestas rápidas predefinidas para no depender del teclado
• Modo offline con respuestas cacheadas
• Complicaciones para acceder al chat desde el watch face

Mira el progreso

Puedes ver cómo va quedando la interfaz en mi publicación de X:

🤖⌚️ ¿IA en tu muñeca? Así va quedando la interfaz de chat para el Apple Watch usando SwiftUI. Manejando estados, onSubmit y un diseño limpio para pantallas pequeñas.

— @riscodevx

Lo que aprendí

Desarrollar para el Apple Watch me enseñó que menos es más. En una pantalla tan pequeña, cada decisión de diseño se amplifica. Un padding de más, un color incorrecto o un texto demasiado largo arruinan la experiencia.

SwiftUI hace que prototipar para el Watch sea rápido, pero optimizar para que se sienta fluido requiere atención al detalle.

---

¿Estás construyendo algo para Apple Watch o quieres integrar IA en tu app? Hablemos en una reunión gratuita y te cuento cómo lo estoy haciendo.