Integrando IA por primera vez dentro de un sistema en Next.js

Estoy empezando a explorar la idea de integra IA dentro de mis sistemas, no solamente en el flujo de la construcción de estos, si no en busca de que los usuarios puedan interactuar con ella. En un principio tenía la idea del resultado tomando como ejemplo otras aplicaciones que la implementan como asistente, para automatizar tareas o para administrar las sugerencias como es el caso de las aplicaciones de entretenimiento.

Y lo más básico que encontré fue utilizar las Apis que las mismas organizaciones como Anthropic o OpenAI han desarrollado para que sistemas externos (como los nuestros) puedan hacer uso de sus modelos de IA.

De esta manera genere mi primer flujo real de peticiones y respuestas orquestadas por mi código que me permitió tener el control de la interacción y realizar acciones como colocar limites, seleccionar modelos, obtener información de los tokens, dándome las bases técnicas para tener una noción más clara de cómo se implementan herramientas avanzadas de IA.

Lo que haremos a continuación será integrar Claude a nuestro sistema. Encapsularemos la dinámica de preguntas y respuestas con un modelo de IA, usando nuestro propio front-end y lógica, colocando nuestros propios inputs, botones, diseño y por supuesto, lo mantendremos lo más simple posible para que nos centremos en la lógica de la implementación.

Dejo claro desde este punto que a esto se le pueden agregar muchas más funcionalidades como el streaming, elementos dinámicos, retroalimentacion, entre otros, pero ese no es el objetivo en este momento, así que obviaremos esos comportamientos y nos centraremos en la dinámica básica, que a su vez es la base sobre la que después se construyen funcionalidades más avanzadas como contexto personalizado, acceso a datos propios o automatización de tareas… razón por la que vale la pena entender bien este primer paso.

Requisitos y preparacion del entorno con next.js e instalacion de paquetes

Notas antes de iniciar:

• Vamos a desarrollar este sistema usando Next.js, partiendo desde la base que ya tienes instalado node.js, si aún no lo tienes instalado, lo más indicado es que busques los pasos para instalarlo en la documentación oficial según las especificaciones de tu computadora. Sitio oficial de node: https://nodejs.org/
• Debes tener acceso a una Api Key en tu cuenta de Anthropic, esta es distinta a tu plan de claude.ai si es que tienes algún plan. Esta opción es totalmente distinta y puedes recargar desde $5 para usos experimentales como el que desarrollaremos en este post. Puedes acceder a más información en https://platform.claude.com/
• Utilizaremos vscode como editor o si prefieres usar otro como cursor u otra opción también funcionara.

Acotado eso, empecemos.

Puedes crear el proyecto en la carpeta de tu elección, para ello vamos a correr el siguiente comando en la terminal: 

npx create-next-app@latest ts-chat-ai -y

Ahora necesitamos ingresar a la carpeta del proyecto… corremos este comando en la terminal

cd ts-chat-ai

Esto te colocara dentro de la carpeta del proyecto, ahora abres tu editor de código, ingresa al proyecto y puedes ver todos los archivos creados.

El siguiente paso es instalar la API de Anthropic en nuestro proyecto, para poder conectarnos a su servidor, lo instalamos corriendo este comando en la terminar, dentro de la carpeta del proyecto

npm install @anthropic-ai/sdk

con esto ya tenemos configurado el entorno necesario para nuestro sistema.

Explicación del flujo entre archivos:

Tendremos interacción entre 3 archivos principales: el archivo page.tsx que es el entry point de nuestro sistema y únicamente se encargara de llamar al archivo ChatBox.tsx.

El Archivo ChatBox.tsx es el que se encargara de mostrar la interfaz gráfica que vera el usuario final, y se encargar de gestionar el submit para enviar la pregunta a la Api de Anthropic y mostrar la respuesta obtenida.

Y el archivo chat.ts que se encargara de la configuración de la Api de Anthropic, donde se recibirá la pregunta del usuario y se devolverá la respuesta.

Como primer paso vamos a crea las siguientes carpetas dentro de "app"

1. _components
2. _actions

Ahora crea estos dos archivos. Dentro de la carpeta _components crea el archivo ChatBox.tsx y dentro de la carpeta _actions crea el archivo chat.ts.

El archivo ChatBox.tsx contendra el html que se mostrara en pantalla y el archivo chat.ts contendrá la conexión con la api de Anthropic. 

Ahora si, vamos al codigo…

Abrimos el archivo chat.ts, que es donde configuraremos la Api de Anthropic para poder enviar nuestras preguntas y que nos responda la IA, para ello primero le indicamos a next.js que tipo de archivo es chat.ts para que lo renderice del lado correcto.

'use server'

 Luego hacemos las importaciones necesarias, escribe o copia estos imports en tu archivo.

import Anthropic from "@anthropic-ai/sdk";

 Esto nos dará acceso a la librería de Anthropic instalada en nuestro proyecto.

Instanciamos la librería de Anthropic, donde tenemos que colocar nuestra api key para que se haga la conexión exitosa

const anthropic = new Anthropic({
   apiKey: "your-api-key"
})

Nota importante: En un entorno real, o si vas a subir este proyecto a GitHub o cualquier repositorio, coloca tu api key en el archivo .env (que no se debe subir) y llama la variable global en tu chat.ts. NUNCA SUBAS EL ARCHIVO CON EL API KEY EN CODIGO DURO. Lo estoy colocando aquí a manera de aprendizaje.

Y acá te muestro la configuración básica de una función que recibe una pregunta, la envía al modelo de IA y retorna la respuesta.

/* La función recibe la pregunta asegurándose que sea un 
string e indica que la respuesta también debe ser un string */
export default async function AssistantIA(question: string): Promise<string>{
 
/* Esta es la conexion especifica, donde pasamos los parámetros model, 
max_tokens y la pregunta del usuario puedes configurar otro modelo, 
aumentar o disminuir el limite de tokens. Con model nos referimos 
especificamente a los modelos LLM de Claude: Opus, Sonnet o Haiku, y el 
max_token nos sirve para limitar la cantidad de tokens a consumir 
en una interacción */
   const response = await anthropic.messages.create({
       model: 'claude-haiku-4-5-20251001',
       max_tokens: 1024,
       messages: [{ role: 'user', content: question }]
   })
 
/* Obtenemos específicamente la respuesta, ya que el response 
también contiene otros elementos como la cantidad 
de tokens consumidos */
   const block = response.content[0]
 
/* le indicamos que se asegure que exista una respuesta, 
si no que devuelva un string vacío, debemos hacer esto porque 
si no existe respuesta devolverá 'undefined' y al principio 
de la función indicamos que debía devolver un string */
   const text = block?.type === 'text' ? block.text : '' 
 
//retornamos la respuesta
   return text
}

Con esto tenemos configurado correctamente el archivo de conexión entre nuestro sistema y la api de Anthropic, ahora necesitamos configurar el archivo ChatBox.tsx que es donde el usuario interactúa con el sistema.

Para ello, abre el archivo ChatBox.tsx, y empecemos a escribir código:

Inicialmente configuramos el componente como client component

'use client'

 Esto le indica a next.js que este componente renderiza del lado del cliente (navegador).

Hacemos las importaciones necesarias

/* Importamos la libreria useState que nos ayudara a interactuar con la api de anthropic de manera reactiva */
import { useState } from "react"
//importamos la funcion de conexion con la api de Anthropic
import AssistantIA from "../_actions/chat"

Creamos la funcion principal del componente, donde manejaremos los estados, el submit y mostraremos los resultados en pantalla

export default function ChatBox() {
 
//Usamos el useState para que nuestros elementos sean reactivos
   const [question, setQuestion] = useState('')
   const [response, setResponse] = useState('')
 
/* Esta función de encarga de enviar la pregunta a la Api de Anthropic, 
recibir la respuesta y asignarla a la variable response para mostrarla 
en pantalla */
   async function handleSubmit() {
       const result = await AssistantIA(question)
       setResponse(result)
   }
 
/* Una plantilla simple del chatbox, con un input donde el usuario hará 
sus preguntas, el botón para hacer la llamada a la api y div dinámico 
donde podrá visualizar las respuestas obtenidas */
   return (
       <div className="max-w-md p-4 flex justify-center">
           <div className="border rounded-xl p-5">
               <div className="min-h-12 mb-4 text-gray-500 text-sm leading-relaxed">
                   {response && <p>{response}</p>}
               </div>
               <div className="border-t pt-4 flex gap-2">
                   <input
                       type="text"
                       value={question}
                       onChange={(e) => setQuestion(e.target.value)}
                       placeholder="Escribe tu pregunta..."
                       className="flex-1 border rounded-md px-3 py-2 text-sm"
                   />
                   <button type="button" onClick={handleSubmit}>
                       Submit
                   </button>
               </div>
           </div>
       </div>
   )
}

Y por ultimo llamamos el componente ChatBox dentro del componente page.tsx principal. El archivo page debe verse de esta manera.

//Importando el componente ChatBox y llamándolo dentro del return.
import ChatBox from "./_components/ChatBox";
export default function Home() {
  return (
    <ChatBox />
 );
}

Con esta configuración simple, hemos conseguido tener una interacción directa entre el usuario y un modelo de IA.

Pero podrías preguntarte. ¿Que ventaja obtengo de hacer esta configuración a simplemente entrar a claude.ai?

Duda muy válida, y la respuesta es simple, de esta funcionalidad básica, no obtienes mayor ventaja, pero el objetivo no es solo esta funcionalidad de preguntar y recibir una respuesta, si no que este es el primer paso para poder acceder a funcionalidades más avanzadas de IA dentro de tus sistemas, como el uso de tools, sistemas RAG, Fine tuning, entre otros, conceptos que iremos viendo en un futuro.

Te invito a que comentes sobre algún uso especifico que te gustaría darle a la IA dentro un nuevo sistema o dentro de un sistema existente.