Conectar un frontend con un backend que vive en otra carpeta del proyecto suele ser un dolor de cabeza cuando el agente de IA no tiene visibilidad de ambos lados. Aquí aprendes a usar el comando add dir de Claude Code para dar contexto cruzado entre directorios y completar una integración full stack de ratings, leyendo el API real desde el navegador.
¿Cómo agregar un directorio externo como contexto en Claude Code?
Cuando trabajas en una carpeta de frontend, Claude Code no ve por defecto el código de backend aunque estén al mismo nivel. La solución es darle acceso explícito al directorio.
El flujo es directo y se apoya en la terminal:
- Entra a la carpeta de backend desde la terminal.
- Ejecuta
pwd para obtener la dirección absoluta del directorio.
- Copia esa ruta y, dentro de Claude Code, usa el comando
add dir seguido de la ruta.
- Confirma que la carpeta quedó accesible como contexto en la conversación.
¿Qué hace el comando add dir en Claude Code? Permite sumar una carpeta externa como contexto activo de la conversación, así el agente puede leer y modificar archivos fuera del directorio donde lo iniciaste.
Esto es clave cuando tu backend y frontend viven en repos o carpetas separadas y necesitas que la IA razone sobre ambos al mismo tiempo. [01:00]
¿Cómo darle contexto del API a un agente sin acceso al código?
No siempre tienes el código fuente del backend disponible. Si trabajas contra un API externo, necesitas otra estrategia para que el agente entienda la estructura sin adivinarla.
Leyendo el código fuente directamente
Cuando sí tienes el repo, el prompt correcto es pedirle que investigue. Algo como: "averigua todo lo que necesites para hacer la integración del API de ratings en el frontend, busca los archivos dentro de la carpeta backend que tengan relevancia".
Claude Code recorre el repo y devuelve un resumen útil:
- El modelo de datos de ratings.
- Los endpoints disponibles.
- El esquema de respuesta que retorna cada endpoint.
Usando Swagger y openapi.json como fuente de verdad
Si no hay acceso al código, la documentación del API resuelve el problema. En el proyecto, el backend corre en localhost:8000 y expone su documentación en la ruta /docs usando Swagger. Dentro de esa página existe un enlace a openapi.json, un archivo de texto con la definición completa de todos los endpoints.
¿Qué es openapi.json y por qué sirve como contexto? Es la especificación en formato JSON de todos los endpoints, parámetros y respuestas de un API. Como es texto plano, puedes pasárselo a un agente de IA para que entienda la estructura sin tocar el código.
En vez de copiar y pegar, el atajo elegante es pedirle al agente: "haz un curl a esta dirección y extrae todo el contexto que puedas del openapi.json". El agente descarga el archivo, lo interpreta y lo usa como referencia. [03:30]
¿Cómo ejecutar una integración full stack end to end?
Con contexto del código y del API, llega el momento de pedir la implementación concreta. La clave está en ser específico sobre dónde y qué quieres modificar.
El prompt usado fue: "utilizando el contexto, haz la integración del API para que traiga el rating del curso", aclarando que era en la página de lista de cursos y reemplazando el mock anterior por datos reales.
Aquí pasó algo interesante. Claude Code detectó que el endpoint que devuelve la lista de cursos no incluía el campo rating en su respuesta. Para terminar la integración del frontend, había que tocar también el backend. Y como add dir ya había habilitado el acceso a esa carpeta, el agente pudo planear cambios en ambos lados.
El plan de ejecución se aprobó con un simple "ejecuta la lista de to-dos" y al refrescar el navegador aparecieron los datos reales:
- Curso de React: rating promedio de 4.5 con 4 valoraciones.
- Curso de Python: con 2 valoraciones registradas.
¿Cuándo conviene modificar backend y frontend en la misma sesión? Cuando una integración revela que falta un campo, un endpoint o un dato en el backend. Tener ambos directorios como contexto evita ir y venir entre conversaciones.
Este flujo bidireccional es lo que vuelve poderoso a Claude Code para desarrollo full stack: corriges el frontend cuando el backend lo exige, y ajustas el backend cuando el frontend descubre un faltante.
Reto: completa la funcionalidad de ratings
La integración quedó lista para mostrar ratings en la lista, pero falta la otra mitad de la experiencia. El reto consiste en:
- Permitir que un estudiante guarde su valoración del curso.
- Mostrar en el detalle del curso el rating individual de ese estudiante.
Cuéntame en los comentarios qué features de Claude Code usaste para resolverlo y qué retos encontraste en el camino.
