Descarga del generador de componentes ai - Descarga del código fuente del generador de componentes ai

ai component generator

Otro código fuente

1.0.0

Descargar

Bienvenido al Generador de componentes de IA con ChatGPT

Este proyecto genera casi cualquier componente de interfaz de usuario con ChatGPT de OpenAI y le permite copiar el código html.

Generador de biografías de Twitter

Generador de componentes AI2UI

como funciona

Este proyecto utiliza la API ChatGPT y las funciones Vercel Edge. Construye un mensaje basado en el formulario y la entrada del usuario, lo envía a la API chatGPT a través de una función Vercel Edge y luego transmite la respuesta a la aplicación. Puedes solicitar cualquier componente de UI, estilo libre. Lo más probable es que genere lo adecuado para usted. Esto también se puede usar como un excelente arranque para proyectos. Intenté hacer que el estilo Material-UI tenga estilo, pero puedes cambiar este comportamiento.

Exporta tus componentes

Ahora puede elegir entre la exportación HTML de sus componentes de UI y su combinación preferida de Tailwind CSS, Next.js, React.js, Material UI

Ejecutando localmente

Este proyecto está creado con Next.js y TailwindCSS , por lo que puede implementarlo directamente en Vercel.

Después de clonar el repositorio, vaya a OpenAI para crear una cuenta y coloque su clave API en un archivo llamado .env (OPENAI_API_KEY). Luego, ejecute la aplicación en la línea de comando y estará disponible en http://localhost:3000 .

 instalación npm

desarrollador de hilo

Cambiar mensajes y solicitudes de ChatGPT

Para cambiar la respuesta de ChatGPT solo necesita darle un ejemplo de lo que desea recuperar (use el rol de asistente para generar un ejemplo de una buena respuesta)". En el siguiente ejemplo le muestro cómo generar TailwindCSS y Next. componente .js y luego solicitará simplemente devolver el código HTML correspondiente.

 // /api/generate.tsconst handler = async (req: Solicitud): Promesa => {const {prompt} = (espera req.json()) as {prompt?: string;};if (!prompt ) {return new Response("No hay mensaje en la solicitud", {estado: 400});}carga útil constante: OpenAIStreamPayload = {modelo: "gpt-3.5-turbo",messages: [{"role": "user","content": "crea next.js + código CSS tailwind para el botón 200 x 100, fondo violeta claro, genera texto en él. Por favor crea un componente next.js completo"},{"role": "assistant", "content": ` importar React desde 'react';                    const MyComponent = () => { return (  Hola mundo Bienvenido a mi componente Next.js usando Tailwind CSS
  );                    };                    exportar MyComponent predeterminado;                `},{"role": "usuario", "content": "Cree código html con CSS en línea para crear el siguiente componente, apariencia de interfaz de usuario material, solo devuelve código"},{"role": "usuario" , "contenido": aviso},],};const stream = await OpenAIStream(payload);return new Response(stream);};

¿Quién hizo este proyecto?

Mi nombre es Yuval, un emprendedor de corazón, ❤️ construyo sistemas de extremo a extremo que no solo se ven increíbles y se sienten de última generación, sino que también tienen un significado e impacto reales.