Lo esencial
Aprendiste cada herramienta por separado. Ahora miras todo junto: cómo se arma un negocio vivo. La arquitectura no es un esquema bonito para una diapositiva. Es el mapa que te dice a dónde correr cuando algo se rompe y qué agregar cuando llegue el momento de crecer.
Conceptos clave
- El stack de 5 capas: Frontend → API → IA → Datos → Pagos
- La capa de integración: n8n/Zapier como el pegamento entre herramientas
- Integración con Microsoft: Teams, Office y Power Platform para clientes corporativos
- El costo del stack: de qué se compone en cada nivel: Starter / Pro / Scale
- Puntos de crecimiento: dónde ampliar cuando haya dinero
Teoría
La arquitectura completa de un negocio de IA en 2026
┌─────────────────────────────────────────────────────────┐
│ USUARIO │
└────────────────────────┬────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────┐
│ FRONTEND (Capa 1) │
│ v0.app / Webflow / Next.js / Bot de Telegram │
│ Qué hay aquí: UI, formularios, paneles, versión móvil │
└────────────────────────┬────────────────────────────────┘
│
┌────────────────────────▼────────────────────────────────┐
│ API GATEWAY (Capa 2) │
│ Cloudflare Workers / FastAPI / Express │
│ Qué hay aquí: ruteo, auth, rate limiting, registros │
└─────────┬──────────────┬──────────────┬─────────────────┘
│ │ │
┌─────────▼──────┐ ┌─────▼──────┐ ┌────▼──────────────────┐
│ IA (Capa 3) │ │ DATOS (C.4)│ │ PAGOS (Capa 5) │
│ Claude API │ │ Supabase │ │ Stripe │
│ Embeddings │ │ PostgreSQL │ │ Suscripciones │
│ Vector DB │ │ Redis cache│ │ Webhooks │
└────────────────┘ └────────────┘ └───────────────────────┘
│
┌─────────▼────────────────────────────────────────────────┐
│ CAPA DE INTEGRACIÓN (Transversal) │
│ n8n / Zapier: conecta todo con todo │
│ CRM → Marketing → Soporte → Analítica │
└──────────────────────────────────────────────────────────┘Capa 1: Frontend, lo que ve el usuario
Opciones y cuándo usarlas:
| Herramienta | Cuándo | Precio |
|---|---|---|
| v0.app (antes v0.dev) | Prototipo rápido, React | Tiene plan gratis; precios en su sitio |
| Webflow | Sitio de marketing sin código | De pago; precios en su sitio |
| Next.js | Control total, cuando importa el SEO | Gratis (el hosting va aparte) |
| Bot de Telegram | B2C, usuarios masivos | Gratis |
| Streamlit | Herramienta interna, MVP | Gratis |
Capa 2: API Gateway, el sistema nervioso
Cloudflare Workers es la opción óptima para quien construye por su cuenta:
// worker.js: estructura básica
export default {
async fetch(request, env) {
const url = new URL(request.url);
// Ruteo
if (url.pathname === '/api/generate') {
return handleGenerate(request, env);
}
if (url.pathname === '/api/webhook/stripe') {
return handleStripeWebhook(request, env);
}
return new Response('Not found', { status: 404 });
}
};
async function handleGenerate(request, env) {
// Revisión de autenticación
const apiKey = request.headers.get('X-API-Key');
if (!await validateKey(apiKey, env)) {
return new Response('Unauthorized', { status: 401 });
}
// Rate limiting con KV
const count = await env.RATE_LIMITS.get(apiKey) || 0;
if (count > 100) { // 100 solicitudes por hora
return new Response('Rate limit exceeded', { status: 429 });
}
await env.RATE_LIMITS.put(apiKey, String(parseInt(count) + 1), {expirationTtl: 3600});
// Llamada a Claude
const body = await request.json();
const result = await callClaude(body.prompt, env.ANTHROPIC_API_KEY);
return Response.json({ result });
}Capa 3: IA, el cerebro del sistema
Claude como la IA central, pero con un ruteo correcto entre modelos:
def route_to_model(task_type: str, complexity: str) -> str:
"""
Optimizar el costo con un ruteo correcto.
"""
# Precios por 1 millón de tokens (entrada / salida) a octubre de 2026; vigentes: ../actual.html
routing = {
("classification", "simple"): "claude-haiku-4-5", # $1 / $5
("summarization", "simple"): "claude-haiku-4-5",
("generation", "standard"): "claude-sonnet-5-5", # $2 / $10
("generation", "complex"): "claude-sonnet-5-5",
("reasoning", "critical"): "claude-opus-5-5", # $4 / $20
("architecture", "critical"): "claude-opus-5-5",
}
return routing.get((task_type, complexity), "claude-sonnet-5-5")
# Ejemplo de uso
model = route_to_model("classification", "simple")
# → claude-haiku-4-5 (el más ligero y barato de la línea)Capa 4: Datos, la memoria del sistema
Supabase (PostgreSQL): el almacenamiento principal
├── users (cuentas, configuración)
├── conversations (historial de chats)
├── documents (archivos subidos)
└── analytics (eventos, métricas)
pgvector (la extensión vectorial de Supabase): búsqueda semántica
├── embeddings para RAG
└── búsqueda de documentos parecidos
Redis (Upstash): caché rápida
├── rate limiting
├── sesiones
└── resultados de solicitudes frecuentesLa capa de integración: n8n como director de orquesta
n8n es automatización sin código o con poco código. Conecta todo con todo:
Cliente nuevo en Stripe
↓ webhook
workflow de n8n:
├── Crear un registro en Supabase
├── Enviar el correo de bienvenida (Gmail/SendGrid)
├── Agregarlo al CRM (HubSpot/Notion)
├── Avisarte a ti (Telegram, Slack o correo)
└── Arrancar la secuencia de onboardingCuándo n8n y cuándo Zapier:
| n8n | Zapier | |
|---|---|---|
| En tu propio servidor | ✅ (gratis para tareas internas; revisa las condiciones de la licencia en su sitio) | ❌ |
| En la nube | Starter €20/mes con pago anual (a octubre de 2026) | Free: 100 tareas al mes; Professional desde $19.99/mes con pago anual |
| Código propio | ✅ nodos de JS | ⚠️ limitado |
| Workflows complejos | ✅ | ⚠️ |
| Facilidad | ⚠️ | ✅ |
Para quien construye por su cuenta: n8n en tu propio VPS = automatización sin pagar suscripción, pero el servidor y las actualizaciones corren por tu cuenta. El precio del VPS depende del proveedor.
Integración con Microsoft para clientes corporativos
Si tus clientes son corporativos, todo lo tienen en Microsoft. Así se entra ahí:
Teams + Claude con un webhook:
Microsoft está retirando los webhooks viejos de Office 365 Connectors. Ahora el webhook se crea con la app Workflows en Teams (la plantilla «Send webhook alerts to a channel»), y el mensaje se envía como una Adaptive Card:
import os
import requests
def notify_teams_channel(webhook_url: str, message: str, facts: dict = None):
"""Enviar un aviso a un canal de Microsoft Teams con un webhook de Workflows (Adaptive Card)."""
body = [{"type": "TextBlock", "text": message, "weight": "Bolder", "wrap": True}]
if facts:
body.append({
"type": "FactSet",
"facts": [{"title": k, "value": v} for k, v in facts.items()]
})
payload = {
"type": "message",
"attachments": [{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.2",
"body": body
}
}]
}
response = requests.post(webhook_url, json=payload)
return response.status_code in (200, 202)
# Ejemplo: aviso de que terminó un análisis con IA
notify_teams_channel(
webhook_url=os.environ["TEAMS_WEBHOOK_URL"],
message="✅ Terminó el análisis con IA de los reportes",
facts={"Documentos procesados": "47", "Tiempo": "3.2 min", "Anomalías encontradas": "2"}
)SharePoint como base de conocimiento para Claude:
import os
import anthropic
import requests
from msal import ConfidentialClientApplication
def get_sharepoint_documents(site_id: str, folder: str) -> list:
"""Obtener documentos de SharePoint con la Graph API."""
app = ConfidentialClientApplication(
client_id=os.environ["AZURE_CLIENT_ID"],
client_credential=os.environ["AZURE_CLIENT_SECRET"],
authority=f"https://login.microsoftonline.com/{os.environ['AZURE_TENANT_ID']}"
)
token = app.acquire_token_for_client(
scopes=["https://graph.microsoft.com/.default"]
)
headers = {"Authorization": f"Bearer {token['access_token']}"}
# Obtener los archivos de la carpeta
url = f"https://graph.microsoft.com/v1.0/sites/{site_id}/drives/root:/{folder}:/children"
response = requests.get(url, headers=headers)
files = response.json().get("value", [])
return [{"name": f["name"], "url": f["@microsoft.graph.downloadUrl"]}
for f in files if f.get("file")]
def answer_from_sharepoint(question: str, site_id: str) -> str:
"""Claude responde una pregunta usando los documentos de SharePoint."""
docs = get_sharepoint_documents(site_id, "Knowledge Base")
# Cargar el contenido de los documentos
context = ""
for doc in docs[:5]: # Los 5 más recientes
content = requests.get(doc["url"]).text[:2000]
context += f"\n---{doc['name']}---\n{content}"
client = anthropic.Anthropic()
return "".join(b.text for b in client.messages.create(
model="claude-sonnet-5-5",
max_tokens=1000,
messages=[{
"role": "user",
"content": f"Documentos de la empresa:\n{context}\n\nPregunta: {question}"
}]
).content if b.type == "text")Modelos de OpenAI en Azure vs. Claude para corporativos:
| Modelos de OpenAI en Azure | Claude | |
|---|---|---|
| Dónde corre | Dentro de Azure | En Microsoft Foundry: en la infraestructura de Azure o en la de Anthropic (dos opciones de alojamiento) |
| Regiones y zona de datos | Consulta la documentación de Azure | Dependen del modelo y de la opción de alojamiento: revisa la documentación de Microsoft Foundry |
| Protección y tratamiento de datos | Revísalo en el contrato y la documentación | Revísalo en el contrato y la documentación de la opción elegida |
| Integración con Azure | Nativa | A través de Microsoft Foundry; la conexión y el cobro van por Azure Marketplace |
| Calidad del modelo | Depende de la tarea | Depende de la tarea: compara ambos con tus datos |
| Precio | Tarifas de Azure | Tarifas de Claude en Foundry; consulta la documentación de Microsoft |
| Para corporativos con Azure | Suele ser la opción por defecto | Depende de los requisitos |
Si el cliente dice "no podemos salir de Azure", propón Microsoft Foundry (antes Azure AI Foundry): ahí Claude está disponible en una opción que corre por completo en la infraestructura de Azure. La conexión pasa por Azure Marketplace y requiere una suscripción de pago de Azure en un país compatible. La lista de modelos y regiones disponibles está en la documentación de Microsoft Learn.
El costo real del stack por nivel
Los precios de abajo están a octubre de 2026 y solo donde se verificaron en los sitios de los servicios. Lo demás, calcúlalo tú con las tarifas vigentes; los modelos de Claude, consúltalos en la página Lo vigente.
Starter: los primeros clientes
| Componente | Herramienta | Precio |
|---|---|---|
| Frontend | Cloudflare Pages Free + Next.js (el plan gratis Vercel Hobby solo sirve para proyectos no comerciales) | $0 |
| API | Cloudflare Workers Free (100,000 solicitudes al día) | $0 |
| IA | Claude API | Depende del tráfico y del modelo |
| Base de datos | Supabase Free (2 proyectos, base de 500 MB, pausa tras una semana sin actividad) | $0 |
| Pagos | Stripe | 2.9% + 30¢ en EE. UU.; en otros países es distinto |
| Automatización | n8n en tu propio servidor | El precio del VPS depende del proveedor |
| Correo | Resend Free | Plan gratis; límites en su sitio |
| Monitoreo | LangSmith Free | Plan gratis; límites en su sitio |
| Total | La suma de las filas; con poco tráfico, el gasto principal es la Claude API |
Pro: un negocio en crecimiento
| Componente | Herramienta | Precio |
|---|---|---|
| Frontend | Vercel Pro | $20/mes por desarrollador |
| API | Cloudflare Workers Paid | desde $5/mes |
| IA | Claude API (más tráfico) | Depende del tráfico y del modelo |
| Base de datos | Supabase Pro | $25/mes |
| Vector DB | Supabase pgvector | incluido |
| Caché | Upstash Redis | Según la tarifa de Upstash |
| Automatización | n8n Cloud Starter | €20/mes con pago anual |
| Correo | Resend | Según la tarifa de Resend |
| Monitoreo | LangSmith | Según la tarifa de LangSmith |
| Total | La suma de las filas a precios vigentes |
Scale: un negocio serio
- Claude API: el gasto principal con mucho tráfico (Opus para las tareas críticas)
- Supabase: planes por encima de Pro; consulta su sitio
- Infraestructura dedicada: según las tarifas del proveedor
- Teams + herramientas de soporte: según las tarifas de los servicios que elijas
- Total: calcúlalo con tu propio stack
Práctica
Paso 1: Dibuja la arquitectura de tu negocio de IA
Toma una hoja de papel (o Miro/FigJam) y dibuja:
- Quién es el usuario: desde dónde entra, qué quiere
- Frontend: qué ve, dónde corre
- API: qué procesa las solicitudes
- IA: dónde está Claude, qué prompts, qué modelo
- Datos: qué se guarda y de dónde viene
- Pagos: cómo se cobra
No hay una respuesta "correcta". Lo importante es ver el sistema completo.
Paso 2: Calcula el costo de tu stack
Llena la tabla siguiendo el ejemplo Starter/Pro/Scale. ¿Qué tienes gratis ahora? ¿Qué se volverá de pago cuando crezcas?
Paso 3: Encuentra el cuello de botella
Mira tu arquitectura y responde:
- ¿Qué se rompe primero con 10 veces más carga?
- ¿Dónde dependes de un solo proveedor sin plan B?
- ¿Qué eslabón sale más caro al escalar?
Paso 4: Tarea
Si tienes una idea de producto con IA, dibuja su arquitectura completa. Si no, toma cualquier producto del curso (un chatbot de soporte, una herramienta de contenido con IA, una automatización de correo) y desglosa su stack en las 5 capas con precios reales.
Herramientas y recursos
- Diagramas: draw.io (gratis), Miro, Excalidraw
- n8n en tu propio servidor: n8n.io/docs/hosting
- Microsoft Graph API: learn.microsoft.com/graph
- Webhooks de Teams: learn.microsoft.com/microsoftteams/platform/webhooks-and-connectors
- Microsoft Foundry (antes Azure AI Foundry): ai.azure.com
- Supabase: supabase.com
- Cloudflare Workers: workers.cloudflare.com
- Upstash Redis: upstash.com
Ideas clave
La arquitectura no se trata de tecnología, se trata de decisiones. Cada capa responde a una pregunta: Frontend, "¿qué ve el usuario?"; API, "¿quién rutea?"; IA, "¿quién piensa?"; Datos, "¿qué recuerda?"; Pagos, "¿cómo se cobra?". Empieza con el stack Starter: al principio, los planes gratis suelen alcanzar. Escala cuando la carga y los ingresos lo justifiquen, no antes.
Siguiente lección
→ Unit economics del stack de IA: las cuentas financieras completas en 3 niveles
La marca se guarda solo en este navegador y no se envía a ningún sitio. Mi progreso