BARRIODIGITAL
ia-emerging-tech

Cómo Integrar ChatGPT en tu App Móvil: Guía Completa

Aprende a integrar la API de OpenAI ChatGPT en tu aplicación móvil. Código completo, mejores prácticas y casos de uso reales.

Samuel García
7 min read
Compartir:
Cómo Integrar ChatGPT en tu App Móvil: Guía Completa
#chatgpt#openai#ia#integracion

Cómo Integrar ChatGPT en tu App Móvil

La integración de IA en apps móviles ya no es futurista - es table stakes en 2025.

Si tu app no tiene alguna forma de IA, estás dejando dinero sobre la mesa. Period.

En esta guía, te muestro exactamente cómo integrar ChatGPT en tu app móvil, con código real que funciona.

¿Por Qué Integrar ChatGPT?

Casos de uso reales que hemos implementado:

1. Chatbots de Soporte

En lugar de FAQs estáticas, un chatbot que:

  • Entiende contexto
  • Responde 24/7
  • Escala infinitamente
  • Reduce tickets de soporte 60-80%

2. Generación de Contenido

  • Descripciones de productos
  • Emails personalizados
  • Posts para redes sociales
  • Traducciones contextuales

3. Asistentes Personalizados

  • Fitness: Planes de entrenamiento personalizados
  • Nutrición: Recetas basadas en lo que tienes
  • Finanzas: Análisis de gastos en lenguaje natural

Setup Inicial

Paso 1: Obtener API Key

  1. Ve a platform.openai.com
  2. Crea una cuenta (o login)
  3. Generate API key en Settings → API Keys
  4. Guarda la key (solo la verás una vez)

Costo (Enero 2025):

  • GPT-4o: $0.005 / 1K tokens ($0.10 MXN)
  • GPT-4o-mini: $0.00015 / 1K tokens ($0.003 MXN)

Para la mayoría de apps, GPT-4o-mini es suficiente.

Paso 2: Instalación (React Native)

npm install openai

Implementación Básica

Arquitectura Correcta (IMPORTANTE)

❌ NO hagas esto:

// NUNCA pongas tu API key en el cliente
const openai = new OpenAI({
  apiKey: 'sk-...' // ¡PELIGRO! Cualquiera puede extraer esto
});

✅ Haz esto:

// Cliente (React Native)
async function askChatGPT(message: string) {
  const response = await fetch('https://tu-backend.com/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  return response.json();
}
 
// Servidor (Node.js/Express)
import OpenAI from 'openai';
 
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY  // ✅ Seguro
});
 
app.post('/api/chat', async (req, res) => {
  const { message } = req.body;
 
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: message }],
  });
 
  res.json({ reply: completion.choices[0].message.content });
});

Ejemplo Completo: Chatbot en React Native

import { useState } from 'react';
import { View, TextInput, Button, ScrollView, Text } from 'react-native';
 
interface Message {
  role: 'user' | 'assistant';
  content: string;
}
 
export function ChatbotScreen() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
 
  async function sendMessage() {
    if (!input.trim()) return;
 
    const userMessage: Message = { role: 'user', content: input };
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setLoading(true);
 
    try {
      const response = await fetch('https://tu-backend.com/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          message: input,
          history: messages // Enviar contexto
        })
      });
 
      const data = await response.json();
      const assistantMessage: Message = {
        role: 'assistant',
        content: data.reply
      };
 
      setMessages(prev => [...prev, assistantMessage]);
    } catch (error) {
      console.error('Error:', error);
      // Manejo de errores
    } finally {
      setLoading(false);
    }
  }
 
  return (
    <View style={{ flex: 1 }}>
      <ScrollView style={{ flex: 1, padding: 16 }}>
        {messages.map((msg, idx) => (
          <View
            key={idx}
            style={{
              alignSelf: msg.role === 'user' ? 'flex-end' : 'flex-start',
              backgroundColor: msg.role === 'user' ? '#007AFF' : '#E5E5EA',
              padding: 12,
              borderRadius: 16,
              marginBottom: 8,
              maxWidth: '80%'
            }}
          >
            <Text style={{
              color: msg.role === 'user' ? 'white' : 'black'
            }}>
              {msg.content}
            </Text>
          </View>
        ))}
        {loading && <Text>Escribiendo...</Text>}
      </ScrollView>
 
      <View style={{ padding: 16, flexDirection: 'row', gap: 8 }}>
        <TextInput
          value={input}
          onChangeText={setInput}
          placeholder="Escribe un mensaje..."
          style={{ flex: 1, borderWidth: 1, padding: 12, borderRadius: 8 }}
        />
        <Button title="Enviar" onPress={sendMessage} disabled={loading} />
      </View>
    </View>
  );
}

Backend con Contexto (Node.js)

import express from 'express';
import OpenAI from 'openai';
 
const app = express();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 
app.post('/api/chat', async (req, res) => {
  const { message, history } = req.body;
 
  // Construir contexto con historial
  const messages = [
    {
      role: 'system',
      content: 'Eres un asistente útil para una app de fitness. Responde de forma concisa y motivadora.'
    },
    ...history, // Mensajes anteriores
    { role: 'user', content: message }
  ];
 
  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages,
      max_tokens: 150, // Limitar para ahorrar costos
      temperature: 0.7,
    });
 
    res.json({
      reply: completion.choices[0].message.content
    });
  } catch (error) {
    console.error('OpenAI Error:', error);
    res.status(500).json({ error: 'Error procesando mensaje' });
  }
});
 
app.listen(3000);

Optimizaciones para Producción

1. Caching de Respuestas Comunes

const cache = new Map<string, string>();
 
app.post('/api/chat', async (req, res) => {
  const { message } = req.body;
 
  // Check cache primero
  if (cache.has(message)) {
    return res.json({ reply: cache.get(message), cached: true });
  }
 
  const completion = await openai.chat.completions.create({...});
  const reply = completion.choices[0].message.content;
 
  // Guardar en cache
  cache.set(message, reply);
 
  res.json({ reply });
});

2. Rate Limiting por Usuario

import rateLimit from 'express-rate-limit';
 
const chatLimiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutos
  max: 50, // Máximo 50 requests
  message: 'Demasiadas peticiones, intenta de nuevo más tarde'
});
 
app.post('/api/chat', chatLimiter, async (req, res) => {
  // ...
});

3. Streaming de Respuestas

Para respuestas largas, mostrar texto mientras se genera:

// Backend
app.post('/api/chat/stream', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
 
  const stream = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [...],
    stream: true,
  });
 
  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content || '';
    res.write(`data: ${JSON.stringify({ content })}\n\n`);
  }
 
  res.end();
});
 
// Cliente React Native
async function streamChat(message: string) {
  const response = await fetch('https://tu-backend.com/api/chat/stream', {
    method: 'POST',
    body: JSON.stringify({ message })
  });
 
  const reader = response.body?.getReader();
  const decoder = new TextDecoder();
 
  while (true) {
    const { done, value } = await reader!.read();
    if (done) break;
 
    const chunk = decoder.decode(value);
    // Procesar y mostrar chunk
    console.log(chunk);
  }
}

¿Te gustó este artículo?

Suscríbete y recibe tutoriales, guías y tips sobre desarrollo móvil directo en tu inbox. Sin spam, solo contenido de calidad.

Costos Reales

Basado en nuestra experiencia con apps en producción:

App de fitness con 1,000 usuarios activos/mes:

  • ~5 mensajes por usuario/día
  • Promedio 100 tokens por mensaje
  • Total: 1,000 × 5 × 30 × 100 = 15M tokens/mes
  • Costo: ~$225 MXN/mes con GPT-4o-mini

Totalmente escalable.

Mejores Prácticas

1. Siempre Usa System Prompts

Define el comportamiento del asistente:

const systemPrompt = `
Eres un asistente de nutrición.
- Responde de forma concisa (máximo 3 párrafos)
- Usa emojis apropiados
- Si no sabes algo, admítelo
- NUNCA des consejos médicos, solo nutricionales generales
`;

2. Valida Inputs

if (message.length > 500) {
  return res.status(400).json({
    error: 'Mensaje muy largo, máximo 500 caracteres'
  });
}
 
// Filtrar contenido inapropiado con moderación de OpenAI
const moderation = await openai.moderations.create({ input: message });
if (moderation.results[0].flagged) {
  return res.status(400).json({ error: 'Contenido inapropiado' });
}

3. Manejo de Errores

try {
  const completion = await openai.chat.completions.create({...});
} catch (error) {
  if (error.code === 'insufficient_quota') {
    // Sin créditos
    return res.status(503).json({
      error: 'Servicio temporalmente no disponible'
    });
  }
 
  if (error.code === 'rate_limit_exceeded') {
    // Demasiadas peticiones
    return res.status(429).json({
      error: 'Intenta de nuevo en unos segundos'
    });
  }
 
  // Error genérico
  return res.status(500).json({ error: 'Error procesando mensaje' });
}

Casos de Uso Avanzados

Generación de Imágenes con DALL-E

const image = await openai.images.generate({
  model: 'dall-e-3',
  prompt: 'Un logo minimalista para una app de fitness',
  size: '1024x1024',
  quality: 'standard',
  n: 1,
});
 
const imageUrl = image.data[0].url;

Text-to-Speech

const speech = await openai.audio.speech.create({
  model: 'tts-1',
  voice: 'nova',
  input: 'Hola, bienvenido a la app',
});
 
const buffer = Buffer.from(await speech.arrayBuffer());
// Guardar o enviar audio

Conclusión

Integrar ChatGPT en tu app móvil es:

  • Técnicamente simple (API bien diseñada)
  • Económicamente viable (costos predecibles)
  • Diferencialmente valioso (tus usuarios lo notarán)

La pregunta no es "¿debería integrar IA?" sino "¿qué features con IA van primero?"

¿Necesitas ayuda integrando ChatGPT o cualquier otra IA en tu app? Contáctanos - hacemos esto todo el tiempo.

Recursos:

Samuel García

Experto en desarrollo de apps móviles, especializado en React Native y tecnologías emergentes.

Artículos relacionados

MVP vs App Completa: Guía Práctica para Founders
business-strategy

MVP vs App Completa: Guía Práctica para Founders

Aprende cuándo lanzar un MVP y cuándo construir una app completa. Decisiones, trade-offs y ejemplos reales de startups mexicanas.

5 min read
#mvp#producto#startup
React Native vs Flutter: Cuál Elegir en 2025
mobile-dev-tecnico

React Native vs Flutter: Cuál Elegir en 2025

Comparación técnica completa entre React Native y Flutter. Performance, ecosistema, curva de aprendizaje y cuál elegir para tu proyecto.

5 min read
#react-native#flutter#comparacion
Cuánto Cuesta Desarrollar una App en México en 2025
business-strategy

Cuánto Cuesta Desarrollar una App en México en 2025

Descubre los costos reales de desarrollar una aplicación móvil en México. Rangos de precios, factores que afectan el costo y cómo presupuestar tu proyecto.

4 min read
#costos#presupuesto#mvp