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
- Crea un nuevo proyecto Next.js:
npx create-next-app@latest ai-onboarding-assistant cd ai-onboarding-assistant
- Instala las dependencias necesarias:
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea
- 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
- 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" })); }
- 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.