LogoLupe

Generación de código

Capacidades de generación

Generación basada en descripción

Describe lo que necesitas en lenguaje natural

Ejemplo:

Crea una función que valide un email y contraseña, la contraseña debe tener al menos 8 caracteres, una mayúscula y un número

Completado inteligente

Lupe puede completar código parcial basándose en el contexto

Ejemplo:

Tengo esta función incompleta de autenticación, necesito agregar validación y manejo de errores

Refactorización

Mejora el código existente manteniendo su funcionalidad

Ejemplo:

Refactoriza este componente para usar hooks y mejorar su rendimiento

Generación de tests

Crea tests unitarios y de integración

Ejemplo:

Genera tests unitarios para esta función de autenticación, incluyendo casos de éxito y error

Ejemplos detallados

Componente React

Generación de un componente con estado y efectos

Solicitud:

Crea un componente que muestre una lista de tareas con búsqueda y filtros

Código generado:

import React, { useState, useEffect } from 'react';

const TaskList = ({ tasks: initialTasks }) => {
  const [tasks, setTasks] = useState(initialTasks);
  const [search, setSearch] = useState('');
  const [filter, setFilter] = useState('all');

  const filteredTasks = tasks.filter(task => {
    const matchesSearch = task.title.toLowerCase().includes(search.toLowerCase());
    const matchesFilter = 
      filter === 'all' ? true :
      filter === 'completed' ? task.completed :
      !task.completed;
    
    return matchesSearch && matchesFilter;
  });

  return (
    <div className="space-y-4">
      <div className="flex gap-4">
        <input
          type="text"
          placeholder="Buscar tareas..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="px-3 py-2 border rounded"
        />
        <select
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className="px-3 py-2 border rounded"
        >
          <option value="all">Todas</option>
          <option value="active">Activas</option>
          <option value="completed">Completadas</option>
        </select>
      </div>
      
      <ul className="space-y-2">
        {filteredTasks.map(task => (
          <li key={task.id} className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => {
                setTasks(tasks.map(t =>
                  t.id === task.id
                    ? { ...t, completed: !t.completed }
                    : t
                ));
              }}
            />
            <span className={task.completed ? 'line-through' : ''}>
              {task.title}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};

API Endpoint

Generación de un endpoint REST con validación

Solicitud:

Crea un endpoint para registrar usuarios con validación de datos

Código generado:

import { Router } from 'express';
import { body, validationResult } from 'express-validator';
import bcrypt from 'bcrypt';
import { User } from '../models/User';

const router = Router();

router.post(
  '/register',
  [
    body('email')
      .isEmail()
      .normalizeEmail()
      .custom(async (email) => {
        const existingUser = await User.findOne({ email });
        if (existingUser) {
          throw new Error('Email already registered');
        }
        return true;
      }),
    body('password')
      .isLength({ min: 8 })
      .matches(/^(?=.*[A-Z])(?=.*[0-9])/)
      .withMessage('Password must be at least 8 chars with 1 uppercase and 1 number'),
    body('name').trim().notEmpty(),
  ],
  async (req, res) => {
    try {
      const errors = validationResult(req);
      if (!errors.isEmpty()) {
        return res.status(400).json({
          status: 'error',
          errors: errors.array(),
        });
      }

      const { email, password, name } = req.body;
      const hashedPassword = await bcrypt.hash(password, 10);

      const user = new User({
        email,
        password: hashedPassword,
        name,
      });

      await user.save();

      res.status(201).json({
        status: 'success',
        data: {
          user: {
            id: user._id,
            email: user.email,
            name: user.name,
          },
        },
      });
    } catch (error) {
      res.status(500).json({
        status: 'error',
        message: 'Internal server error',
      });
    }
  }
);

Mejores prácticas

Sé específico en tus solicitudes

Incluye detalles sobre el comportamiento esperado, manejo de errores y casos límite.

Proporciona contexto

Menciona el framework, librerías y patrones que estás utilizando.

Revisa y prueba

Siempre revisa el código generado y asegúrate de que cumple con tus requisitos.

Siguientes pasos

Para aprovechar al máximo la generación de código:

→ Explora la asistencia en tiempo real→ Aprende sobre depuración inteligente→ Ver ejemplos prácticos