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

1. Instala las dependencias necesarias:

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

1. 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" })); }

1. 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.