Automatiza la Gestión de Tickets en React 18 con Outputs Estructurados de OpenAI

En este tutorial, vamos a ver cómo integrar la nueva funcionalidad de Outputs Estructurados (Structured Outputs) de OpenAI en una aplicación de ticketing construida con React 18. Esta integración permitirá generar y asignar tickets de soporte automáticamente, basándote en las entradas de los usuarios.

Configuración del Backend con Node.js y OpenAI

Primero, configuraremos el backend usando Node.js y la API de OpenAI para manejar la generación y asignación automática de tickets.

Instalación de Dependencias

Asegúrate de tener instaladas las dependencias necesarias:

npm install express openai dotenv

Configuración de OpenAI

Crea un archivo openai.js y configura la API de OpenAI para generar tickets basados en la entrada del usuario y asignarlos automáticamente a miembros del equipo.

// openai.js
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY // Asegúrate de tener tu API key en un archivo .env
});

// Simulación de una base de datos de miembros del equipo
const teamMembers = [
  { name: 'Alice', role: 'Support', available: true },
  { name: 'Bob', role: 'Support', available: true },
  { name: 'Charlie', role: 'Support', available: false },
];

const schema = {
  type: 'object',
  properties: {
    title: { type: 'string' },
    description: { type: 'string' },
    priority: { type: 'string', enum: ['low', 'medium', 'high'] },
    assigned_to: { type: ['string', 'null'] },
    status: { type: 'string', enum: ['open', 'in_progress', 'closed'] }
  },
  required: ['title', 'description', 'priority', 'status'],
  additionalProperties: false
};

// Función para asignar tickets automáticamente basado en disponibilidad
async function assignTicket(priority) {
  const availableMember = teamMembers.find(member => member.available);
  return availableMember ? availableMember.name : null;
}

async function generateTicket(userInput) {
  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-2024-08-06',
    messages: [
      { role: 'system', content: 'You are a support ticket assistant.' },
      { role: 'user', content: userInput }
    ],
    response_format: {
      type: 'json_schema',
      json_schema: schema
    }
  });

  let ticket = completion.choices[0]?.message?.parsed || null;

  if (ticket) {
    // Asignar automáticamente el ticket
    ticket.assigned_to = await assignTicket(ticket.priority);
  }

  return ticket;
}

export { generateTicket };

Configura el Servidor Express

Ahora, configura un servidor básico con Express para manejar las solicitudes desde tu frontend React.

// server.js
import express from 'express';
import { generateTicket } from './openai';

const app = express();
app.use(express.json());

app.post('/api/generate-ticket', async (req, res) => {
  const { userInput } = req.body;
  const ticket = await generateTicket(userInput);
  res.json({ ticket });
});

app.listen(3001, () => {
  console.log('Server running on http://localhost:3001');
});

Configuración del Frontend en React 18

En el frontend, vamos a construir una sencilla interfaz en React 18 que permita a los usuarios describir su problema y generar un ticket automáticamente.

Componente de React

Crea un componente TicketingApp.js para gestionar la interfaz de usuario.

// TicketingApp.jsx
import React, { useState } from 'react';

function TicketingApp() {
  const [userInput, setUserInput] = useState('');
  const [ticket, setTicket] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('/api/generate-ticket', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ userInput })
    });
    const data = await response.json();
    setTicket(data.ticket);
  };

  return (
    <div>
      <h1>Ticketing System</h1>
      <form onSubmit={handleSubmit}>
        <textarea
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Describe your issue..."
        />
        <button type="submit">Generate Ticket</button>
      </form>

      {ticket && (
        <div>
          <h2>Generated Ticket</h2>
          <p><strong>Title:</strong> {ticket.title}</p>
          <p><strong>Description:</strong> {ticket.description}</p>
          <p><strong>Priority:</strong> {ticket.priority}</p>
          <p><strong>Status:</strong> {ticket.status}</p>
          {ticket.assigned_to && <p><strong>Assigned to:</strong> {ticket.assigned_to}</p>}
        </div>
      )}
    </div>
  );
}

export default TicketingApp;

Integración en tu Proyecto React

Asegúrate de incluir TicketingApp en tu proyecto React:

// App.jsx
import React from 'react';
import TicketingApp from './TicketingApp';

function App() {
  return (
    <div className="App">
      <TicketingApp />
    </div>
  );
}

export default App;

Conclusión

Este es solo el comienzo; trata ahora de ecalar la app expandiendo la lógica de asignación, añadiendo manejo de errores...