Tutorial: Creando un Asistente AI de Onboarding con CopilotKit para React

Introducción

En este tutorial, aprenderás cómo crear un asistente AI para el onboarding de usuarios utilizando CopilotKit, Next.js y OpenAI. Este asistente ayudará a los nuevos usuarios a familiarizarse con una aplicación de gestión de tareas, guiándolos a través de las principales características y respondiendo a sus preguntas.

Lo que aprenderás

• Configurar un proyecto Next.js con CopilotKit
• Implementar un asistente AI para onboarding
• Crear acciones personalizadas para interactuar con la aplicación
• Proporcionar contexto al asistente AI

Prerrequisitos

• Conocimientos básicos de React y Next.js
• Node.js instalado en tu sistema
• Una cuenta de OpenAI con una API key

Paso 1: Configuración del proyecto

1. Crea un nuevo proyecto Next.js:

   npx create-next-app@latest ai-onboarding-assistant
   cd ai-onboarding-assistant

2. Instala las dependencias necesarias:

   npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea

3. Crea un archivo .env.local en la raíz del proyecto y añade tu API key de OpenAI:

   OPENAI_API_KEY=tu_api_key_aqui

Paso 2: Configurar CopilotKit

1. Crea un nuevo archivo app/api/copilotkit/route.ts:

   import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend";
   
   export const runtime = "edge";
   
   export async function POST(req: Request): Promise<Response> {
     const copilotKit = new CopilotBackend({});
     return copilotKit.response(req, new OpenAIAdapter({ model: "gpt-3.5-turbo" }));
   }

2. Modifica app/page.tsx para incluir CopilotKit:

   "use client";
   import { CopilotKit } from "@copilotkit/react-core";
   import { CopilotSidebar } from "@copilotkit/react-ui";
   import TaskManager from "../components/TaskManager";
   
   export default function Home() {
     return (
       <CopilotKit url="/api/copilotkit">
         <CopilotSidebar>
           <TaskManager />
         </CopilotSidebar>
       </CopilotKit>
     );
   }

Paso 3: Crear el componente TaskManager

Crea un nuevo archivo components/TaskManager.tsx:

import React, { useState } from "react";
import { useCopilotAction, useMakeCopilotReadable } from "@copilotkit/react-core";

const TaskManager = () => {
  const [tasks, setTasks] = useState([]);

  // Proporcionar contexto al asistente
  useMakeCopilotReadable(
    "Esta es una aplicación de gestión de tareas. Los usuarios pueden agregar, completar y eliminar tareas."
  );

  // Acción para agregar tarea
  useCopilotAction({
    name: "addTask",
    description: "Agregar una nueva tarea a la lista",
    parameters: [
      {
        name: "taskName",
        type: "string",
        description: "El nombre de la tarea a agregar",
      },
    ],
    handler: async ({ taskName }) => {
      setTasks([...tasks, { id: Date.now(), name: taskName, completed: false }]);
      return `Tarea "${taskName}" agregada exitosamente.`;
    },
  });

  // Resto del componente...
  return (
    <div>
      <h1>Gestor de Tareas</h1>
      {/* Interfaz de usuario para mostrar y gestionar tareas */}
    </div>
  );
};

export default TaskManager;

Paso 4: Implementar el asistente de onboarding

Modifica app/page.tsx para incluir instrucciones de onboarding:

<CopilotSidebar
  instructions="Eres un asistente de onboarding para nuestra aplicación de gestión de tareas. Ayuda a los nuevos usuarios a entender cómo usar la aplicación, explicando sus características y cómo realizar acciones básicas."
  defaultOpen={true}
>
  <TaskManager />
</CopilotSidebar>

Paso 5: Añadir más acciones y contexto

En components/TaskManager.tsx, añade más acciones y contexto:

// Acción para completar tarea
useCopilotAction({
  name: "completeTask",
  description: "Marcar una tarea como completada",
  parameters: [
    {
      name: "taskId",
      type: "number",
      description: "El ID de la tarea a completar",
    },
  ],
  handler: async ({ taskId }) => {
    setTasks(tasks.map((task) => (task.id === taskId ? { ...task, completed: true } : task)));
    return `Tarea con ID ${taskId} marcada como completada.`;
  },
});

// Proporcionar más contexto
useMakeCopilotReadable(
  `La aplicación actualmente tiene ${tasks.length} tareas, de las cuales ${tasks.filter((t) => t.completed).length} están completadas.`
);

Conclusión

¡Felicidades! Has creado un asistente AI de onboarding utilizando CopilotKit. Este asistente puede ayudar a los nuevos usuarios a familiarizarse con tu aplicación de gestión de tareas, explicando sus características y guiándolos a través de las acciones básicas.

Puedes seguir mejorando el asistente añadiendo más acciones, proporcionando más contexto, y personalizando las respuestas para hacer la experiencia de onboarding aún más útil y atractiva para tus usuarios.