Codemotion Magazine

We code the future. Together

ads

Crea aplicaciones de IA que ven, escuchen y respondan — ¡en menos de 30 minutos!

Inteligencia Artificial

Entonces, quieres crear una IA que observe un video en tiempo real, escuche a los usuarios y responda con voz natural. Suena genial, ¿verdad? Ahora intenta construirlo.

Vas a necesitar una API de reconocimiento de voz (speech-to-text), un modelo de visión, un modelo de lenguaje, un servicio de síntesis de voz (text-to-speech), WebRTC para transmisión en tiempo real y WebSockets para comunicación de baja latencia. Luego tendrás que unir todo, rezar para que la latencia se mantenga por debajo de dos segundos y depurar el caos asíncrono cuando el audio y el video se desincronizan.

Recommended article
noviembre 7, 2025

Red Neuronal: la inspiración biológica

Orli Dun

Orli Dun

Inteligencia Artificial

Lo hemos vivido. Precisamente por eso creamos Orga AI.

SDKs unificados. Un flujo de API sin fricciones. Visión, voz y conversación, procesadas juntas en menos de 700 milisegundos. Soporte para más de 40 idiomas desde el primer momento. Y sí, puedes tenerlo funcionando en menos de 30 minutos.

¿Qué es Orga AI?

Orga AI es una plataforma de IA conversacional en tiempo real. Los usuarios encienden su cámara, hablan de forma natural y muestran a la IA lo que está ocurriendo. La IA observa, escucha y responde con su voz, en su propio idioma.

Así es como funciona:
Usuario (apuntando la cámara del teléfono): “Mi hub inteligente no se conecta. La luz sigue parpadeando en naranja.”
Orga AI (observando el patrón de parpadeo): “Veo ese parpadeo naranja: tu hub perdió la configuración de red. Muéstrame la parte trasera y te guiaré para reiniciarlo.”

Nada de escribir, capturas de pantalla o “por favor describe tu problema en detalle”. La IA ve el problema y explica la solución como lo haría un compañero.

Esa es la experiencia que puedes ofrecer con Orga.

Primeros pasos con los SDKs de Orga

Orga ofrece un conjunto de SDKs, desde el cliente hasta el servidor, que trabajan juntos para conectar tu aplicación con nuestras APIs.

Los SDKs de cliente de Orga se integran con cualquier framework basado en React. Elige tu stack y sigue los pasos.

Next.js (Fastest Setup)

Nuestro starter de Next.js crea una aplicación completa con video, audio y conversación con IA ya integrados.

<code><strong>npx</strong> <strong>@orga-ai</strong>/create-orga-next-app my-app
cd my-app
npm install
npm run dev</code><small>Code language: CSS (css)</small>Lenguaje del código: HTML, XML (xml)

Abre localhost:3000. Verás una demo funcionando: vista previa de la cámara, entrada de voz y respuestas de la IA. Personaliza la personalidad, conecta tu lógica y lánzalo.

Backend Proxy (Node)

Para mantener tu clave API segura, primero necesitarás crear un pequeño servicio de backend. Este backend actúa como un proxy entre tu aplicación y Orga. Su función es obtener los servidores ICE y un token efímero desde la API de Orga. Tu SDK de cliente (React o React Native) llamará a este endpoint antes de establecer su propia conexión.

<code><strong>import</strong> 'dotenv/config';
<strong>import</strong> express <strong>from</strong> 'express';
<strong>import</strong> cors <strong>from</strong> 'cors';
<strong>import</strong> { OrgaAI } <strong>from</strong> '@orga-ai/node';
<strong>const</strong> app = express();
app.use(cors()); <strong>const</strong> orga = <strong>new</strong> OrgaAI({
apiKey: process.env.ORGA_API_KEY!
});
app.get('/api/orga-client-secrets', <strong>async</strong> (_req, res) => {
<strong>try</strong> {
<strong>const</strong> { ephemeralToken, iceServers } = <strong>await</strong> orga.getSessionConfig();
res.json({ ephemeralToken, iceServers });
} <strong>catch</strong> (error) {
console.error('Failed to get session config:', error);
res.status(500).json({ error: 'Internal server error' });
}
});
app.listen(5000, () => console.log('Proxy running on http://localhost:5000'));</code>Lenguaje del código: HTML, XML (xml)

Una vez que este endpoint del backend esté en funcionamiento, tu SDK de frontend podrá llamarlo para obtener la configuración de la sesión. No es necesario exponer tu clave API en el cliente.

Eso es todo por el backend. A continuación, veremos cómo llamar a este endpoint desde el frontend y establecer la conexión.

React (Vite, CRA, or Your Own Setup)

¿Ya tienes un proyecto en React? Solo incorpora el SDK.

npm install @orga-ai/reactCode language: CSS (css)

Al configurar el provider, aquí es donde le indicas al SDK del cliente qué endpoint del backend debe llamar. Ese endpoint devuelve el token efímero y los servidores ICE, que el SDK utiliza para establecer una conexión segura con Orga, sin exponer nunca tu clave API.

<code>'use client' 
<strong>import</strong> { OrgaAI, OrgaAIProvider } <strong>from</strong> '@orga-ai/react';
OrgaAI.init({
logLevel: 'debug',
model: 'orga-1-beta',
voice: 'alloy',
fetchSessionConfig: <strong>async</strong> () => {
<strong>const</strong> res = <strong>await</strong> fetch('http://localhost:5000/api/orga-client-secrets');
<strong>if</strong> (!res.ok) <strong>throw</strong> <strong>new</strong> Error('Failed to fetch session config');
<strong>const</strong> { ephemeralToken, iceServers } = <strong>await</strong> res.json();
<strong>return</strong> { ephemeralToken, iceServers };
},
});
<strong>export</strong> <strong>function</strong> <strong>OrgaClientProvider</strong>({ children }: { children: React.ReactNode }) {
<strong>return</strong> {children};
}</code>Lenguaje del código: HTML, XML (xml)

Luego, envuelve tu aplicación con el provider:

<code><strong>import</strong> type { ReactNode } <strong>from</strong> 'react';
<strong>import</strong> { OrgaClientProvider } <strong>from</strong> './providers/OrgaClientProvider';
<strong>export</strong> <strong>default</strong> <strong>function</strong> <strong>RootLayout</strong>({ children }: { children: ReactNode }) {
<strong>return</strong> (
<<strong>html</strong> lang="en">
<<strong>body</strong>>
<<strong>OrgaClientProvider</strong>>{children}</<strong>OrgaClientProvider</strong>>
</<strong>body</strong>>
TypeScript
</<strong>html</strong>>
);
}</code><small>Code language: JavaScript (javascript)</small>Lenguaje del código: PHP (php)

Ahora estás listo para crear tu archivo principal e importar el hook useOrgaAI. Este te proporciona todo lo que necesitas: startSession(), endSession() y el estado en tiempo real, como connectionState.

<code>'use client'
 
<strong>import</strong> {
  useOrgaAI,
  OrgaVideo,
  OrgaAudio,
} <strong>from</strong> '@orga-ai/react';
 
<strong>export</strong> <strong>default</strong> <strong>function</strong> <strong>Home</strong>() {
  <strong>const</strong> {
    startSession,
    endSession,
    connectionState,
    toggleCamera,
    toggleMic,
    isCameraOn,
    isMicOn,
    userVideoStream,
    aiAudioStream,
  } = useOrgaAI();
 
  <strong>const</strong> isConnected = connectionState === 'connected';
  <strong>const</strong> isIdle = connectionState === 'disconnected';
 
  <strong>return</strong> (
    <<strong>main</strong> className="mx-auto flex max-w-2xl flex-col gap-6 p-8">
      <<strong>header</strong>>
        <<strong>h1</strong> className="text-3xl font-bold">Orga React SDK Quick Start</<strong>h1</strong>>
        <<strong>p</strong> className="text-gray-600">Status: {connectionState}</<strong>p</strong>>
      </<strong>header</strong>>
 
      <<strong>section</strong> className="grid grid-cols-2 gap-4">
        <<strong>button</strong>
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
          disabled={!isIdle}
          onClick={() => startSession()}
        >
          Start Session
        </<strong>button</strong>>
        <<strong>button</strong>
          className="rounded bg-red-600 px-4 py-2 text-white disabled:opacity-50"
          disabled={!isConnected}
          onClick={() => endSession()}
        >
          End Session
        </<strong>button</strong>>
        <<strong>button</strong>
          className="rounded border px-4 py-2 disabled:opacity-50"
          disabled={!isConnected}
          onClick={toggleCamera}
        >
          {isCameraOn ? 'Camera On' : 'Camera Off'}
        </<strong>button</strong>>
        <<strong>button</strong>
          className="rounded border px-4 py-2 disabled:opacity-50"
          disabled={!isConnected}
          onClick={toggleMic}
        >
          {isMicOn ? 'Mic On' : 'Mic Off'}
        </<strong>button</strong>>
      </<strong>section</strong>>
 
      <<strong>OrgaVideo</strong> stream={userVideoStream} className="h-64 w-full rounded bg-black" />
      <<strong>OrgaAudio</strong> stream={aiAudioStream} />
    </<strong>main</strong>>
  );
}
</code>Lenguaje del código: PHP (php)

React Native (Expo)

¿Vas a desarrollar para móvil? Mismo API, rendimiento nativo.

La configuración es casi idéntica al ejemplo de React, con solo algunas diferencias en cómo se importa e inicializa el SDK.

Instala las dependencias requeridas:

npm install @orga-ai/react-native react-native-webrtc react-native-incall-managerCode language: CSS (css)

Con Expo, asegúrate de actualizar el app.json para solicitar acceso a la cámara y al micrófono.

<code>{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "Allow $(PRODUCT_NAME) to access your camera",
        "NSMicrophoneUsageDescription": "Allow $(PRODUCT_NAME) to access your microphone"
      }
    },
    "android": {
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO"
      ]
    }
  }
}
</code><small>Code language: JSON / JSON with Comments (json)</small>Lenguaje del código: JavaScript (javascript)

Al configurar el provider, aquí es donde le indicas al SDK del cliente qué endpoint del backend debe llamar. Ese endpoint devuelve el token efímero y los servidores ICE, que el SDK utiliza para establecer una conexión segura con Orga, sin exponer nunca tu clave API.

<code><strong>import</strong> { Stack } <strong>from</strong> 'expo-router';
<strong>import</strong> { OrgaAI, OrgaAIProvider } <strong>from</strong> '@orga-ai/react-native';
 
OrgaAI.init({
  logLevel: 'debug',
  model: 'orga-1-beta',
  voice: 'alloy',
  fetchSessionConfig: <strong>async</strong> () => {
    <strong>const</strong> response = <strong>await</strong> fetch('http://localhost:5000/api/orga-client-secrets');
    <strong>if</strong> (!response.ok) <strong>throw</strong> <strong>new</strong> Error('Failed to fetch session config');
    <strong>const</strong> { ephemeralToken, iceServers } = <strong>await</strong> response.json();
    <strong>return</strong> { ephemeralToken, iceServers };
  },
});
 
<strong>export</strong> <strong>default</strong> <strong>function</strong> <strong>RootLayout</strong>() {
  <strong>return</strong> (
    <<strong>OrgaAIProvider</strong>>
      <<strong>Stack</strong> />
    </<strong>OrgaAIProvider</strong>>
  );
}
</code><small>Code language: JavaScript (javascript)</small>Lenguaje del código: PHP (php)

Ahora estás listo para crear tu archivo principal e importar el hook useOrgaAI. Este te proporciona todo lo que necesitas: startSession(), endSession() y el estado en tiempo real, como connectionState.

<code><strong>import</strong> { StyleSheet, View } <strong>from</strong> 'react-native';
<strong>import</strong> {
  OrgaAICameraView,
  OrgaAIControls,
  useOrgaAI,
} <strong>from</strong> '@orga-ai/react-native';
 
<strong>export</strong> <strong>default</strong> <strong>function</strong> <strong>HomeScreen</strong>() {
  <strong>const</strong> {
    connectionState,
    isCameraOn,
    isMicOn,
    userVideoStream,
    startSession,
    endSession,
    toggleCamera,
    toggleMic,
    flipCamera,
  } = useOrgaAI();
 
  <strong>return</strong> (
    <<strong>View</strong> style={styles.container}>
      <<strong>OrgaAICameraView</strong>
        streamURL={userVideoStream?.toURL()}
        containerStyle={styles.cameraContainer}
        style={{ width: '100%', height: '100%' }}
      >
        <<strong>OrgaAIControls</strong>
          connectionState={connectionState}
          isCameraOn={isCameraOn}
          isMicOn={isMicOn}
          onStartSession={startSession}
          onEndSession={endSession}
          onToggleCamera={toggleCamera}
          onToggleMic={toggleMic}
          onFlipCamera={flipCamera}
        />
      </<strong>OrgaAICameraView</strong>>
    </<strong>View</strong>>
  );
}
 
<strong>const</strong> styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a' },
  cameraContainer: { width: '100%', height: '100%' },
});
</code>Lenguaje del código: PHP (php)

A diferencia de React para web, desarrollar con React Native y Expo introduce algunos detalles específicos de móviles. WebRTC y el audio requieren acceso nativo a la cámara y al micrófono del dispositivo, por lo que tendrás que configurar los permisos en tu app.json.

Nota: Debido a que Orga depende de módulos nativos, el SDK no funcionará dentro de Expo Go. Necesitarás usar un cliente de desarrollo (dev client).

Al desarrollar localmente, ten en cuenta que tu endpoint del backend debe ser accesible desde tu dispositivo móvil. Usa la IP de tu red local (por ejemplo, http://192.168.x.x:5000) o una herramienta de túnel como ngrok al hacer pruebas.

Para guías de configuración más detalladas, pasos de solución de problemas y ejemplos completos para React, React Native y Node, consulta nuestra documentación completa. Encontrarás todo lo necesario para pasar de la configuración inicial a una aplicación lista para producción.

¿Qué puedes construir?

Orga no suena a robot. La voz es natural. La cadencia se siente humana. Los usuarios olvidan que están hablando con una IA, por lo que se expresan libremente y confían en las respuestas. Así es como funciona:

  1. Soporte al cliente. Un usuario muestra su router. La IA detecta una luz roja en el puerto 3 y dice: “Ese puerto tiene un fallo de hardware. Prueba con otro cable.” Nada de “describe tu problema”. La IA simplemente lo ve.
  2. Accesibilidad. Un usuario con discapacidad visual sostiene su teléfono en una cafetería. “¿Qué hay en el menú?” La IA lee la pizarra en voz alta. Más tarde: “¿Está lista mi café?” Detecta la taza con su nombre en el mostrador.
  3. Servicio de campo. Un técnico apunta su teléfono a un panel de control desconocido. “¿Dónde está el interruptor de reinicio?” La IA lo encuentra detrás de una pequeña cubierta a la izquierda y lo guía paso a paso, sin necesidad de usar las manos.

Si tus usuarios necesitan mostrar algo y hablar sobre ello, Orga fue creado para eso.

Hazlo tuyo con un System Prompt

Cada agente de Orga comienza con un system prompt. Es simplemente un texto que indica a la IA cómo comportarse. ¿Quieres un representante de soporte amable? ¿Un verificador de seguridad estricto? ¿Un tutor paciente?

Solo escríbelo.

Eres un técnico de HomeHelp.
Habla con calma. Cuando los usuarios muestren un dispositivo averiado, identifica primero el modelo y luego guíalos en la reparación.
Si ves cables expuestos o daños por agua, indícales que llamen a un profesional.

Empieza a construir hoy

Crea una cuenta gratuita en platform.orga-ai.com para construir y probar un prototipo completo.

Ya has pasado suficiente tiempo conectando servicios. Ahora construye el producto.

¿Qué vas a crear?

Codemotion Collection Background
Top of the week
Seleccionados para ti

¿Te gustaría leer más artículos como este? Explora la colección Top of the week , con una selección personalizada y siempre actualizada de contenido nuevo.

Natalia de Pablo Garcia
¡Hola! Soy Natalia, Community Manager y Social Media de Codemotion. Mi función es ser el enlace con las comunidades tecnológicas en España.