DEV Community

Julio Leiva Díaz
Julio Leiva Díaz

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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');
});
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay