4. Proveedores
Conecta Anthropic como alternativa
Cambia el adaptador y la credencial conservando las acciones, las trazas y el punto de entrada.
Qué aprenderás
- Distinguir una suscripción de Claude del acceso a su API.
- Configurar ANTHROPIC_API_KEY en el entorno local.
- Cambiar de proveedor sin reescribir la acción.
- Comprobar la conexión o interpretar el fallo.
Índice de esta lección
Paso 1
Prepara el acceso a la API de Anthropic
Esta lección es una alternativa a Groq. Si ya tienes un proveedor funcionando, puedes continuar con él. Para practicar con Anthropic necesitas acceso a su Console y una credencial de API válida.
Una suscripción de Claude no incluye el uso de la API de Console. Revisa allí la facturación y los límites de tu cuenta antes de llamar al modelo. No fijamos una recarga mínima: las condiciones pueden cambiar.
Crea una clave para tu práctica y guárdala únicamente en el entorno local. Si usas una expiración, comprueba que siga vigente cuando retomes los ejercicios.
Proveedor → AnthropicCuenta → Claude ConsoleAdaptador → @ai-sdk/anthropicVariable local → ANTHROPIC_API_KEYEjemplo del material → claude-haiku-4-5Qué deberías observar
Puedes distinguir acceso a Claude, credencial de API y disponibilidad del modelo.
Paso 2
Añade el adaptador a tu práctica
La base original ya declara @ai-sdk/anthropic. Si reconstruiste la práctica mínima con Groq, añade el adaptador desde esa carpeta. La versión mostrada coincide con package.json del material de estudio y AI SDK 7.
Conserva ai y las dependencias de desarrollo. Este cambio se hace en la práctica, no en el proyecto web del portafolio. El proveedor se decide en selected-model.ts, no por instalar varios paquetes.
npm install @ai-sdk/anthropic@4.0.37Qué deberías observar
package.json y el lockfile registran el adaptador. Instalarlo aún no ejecuta una llamada.
Paso 3
Configura la variable que corresponde a Anthropic
Añade ANTHROPIC_API_KEY con valor vacío a la plantilla pública .env.example. Si usas la base original, su plantilla puede llamarse .env.template. En tu .env local introduce el valor real sin espacios accidentales.
El adaptador anthropic usa ANTHROPIC_API_KEY por defecto. GROQ_API_KEY pertenece a Groq y no autentica una petición a Anthropic. Mantén .env excluido de Git; no copies la clave a selected-model.ts.
Los scripts de la práctica cargan .env con --env-file. Tener la variable escrita en un archivo no basta si ejecutas un comando que no carga ese entorno.
# Rellena estos valores solo en tu .env local.GROQ_API_KEY=ANTHROPIC_API_KEY=Qué deberías observar
La plantilla sigue sin credenciales y el entorno de la práctica contiene la variable del proveedor elegido.
Paso 4
Exporta un único modelo desde el selector
Reemplaza el contenido del selector de la práctica por este ejemplo. Conserva el nombre exportado model para que las acciones existentes sigan importándolo sin cambios.
claude-haiku-4-5 es el identificador utilizado por el material y documentado por el adaptador. Confirma que esté disponible para tu cuenta. El autocompletado del editor puede orientar, pero no demuestra acceso ni disponibilidad en el servidor.
Si vuelves a Groq, restaura el selector anterior y su variable correspondiente. No necesitas duplicar las acciones ni mantener dos declaraciones export const model.
import { anthropic } from '@ai-sdk/anthropic'; export const model = anthropic('claude-haiku-4-5');Qué deberías observar
La acción importa el mismo model y ahora usa el adaptador Anthropic.
Paso 5
Comprueba la conexión y revisa el resultado
Usa getMessageFromModelFailSafe de la lección de errores si ya la implementaste. Ejecuta primero npm run build y después npm run dev desde la práctica. Compilar comprueba tipos; dev realiza la llamada real al proveedor.
El prompt pide “OK, todo listo!”. Registra la respuesta que realmente recibes. Si falla, confirma que cargas .env, que el nombre es ANTHROPIC_API_KEY, que la clave sigue vigente y que tienes acceso y capacidad de uso en Console.
Un 429 orienta a límites o cuota; un fallo sin HTTP puede ser de red. Usa el diagnóstico de la lección anterior y corrige la causa antes de repetir. El texto y el color de la consola no garantizan que futuros patrones funcionen bien.
import { getMessageFromModelFailSafe } from './actions/get-message-model.js'; await getMessageFromModelFailSafe();Qué deberías observar
Obtienes una respuesta real o una orientación de diagnóstico. Puedes explicar qué cambió al pasar de Groq a Anthropic.
Ahora te toca
Prueba la idea por tu cuenta
Dibuja el recorrido main → acción → model → Anthropic e identifica qué archivo y variable cambian al volver a Groq. Si tienes acceso a la API, comprueba la llamada; si no, completa el mapa sin ejecutarla.
Necesito una pista
La acción conserva la importación de model. Cambia el selector y la credencial del proveedor.
Comparar con una solución
Anthropic usa @ai-sdk/anthropic y ANTHROPIC_API_KEY; Groq usa @ai-sdk/groq y GROQ_API_KEY. selected-model.ts exporta model en ambos casos. main.ts y la acción pueden permanecer iguales.
Antes de seguir
Comprueba lo que aprendiste
No es una nota. Es una pausa para comprobar que la idea quedó clara.
¿Terminaste la práctica?
Haz el ejercicio y comprueba tus respuestas antes de marcar la lección como completada.