Générateur de composants ai Télécharger - Générateur de composants ai Téléchargement du code source

ai component generator

Autre code source

1.0.0

Télécharger

Bienvenue dans AI Component Generator avec ChatGPT

Ce projet génère presque tous les composants d'interface utilisateur avec ChatGPT d'OpenAI et vous permet de copier le code HTML

Générateur de biographies Twitter

Générateur de composants AI2UI

Comment ça marche

Ce projet utilise l'API ChatGPT et les fonctions Vercel Edge. Il construit une invite basée sur le formulaire et les entrées de l'utilisateur, l'envoie à l'API chatGPT via une fonction Vercel Edge, puis renvoie la réponse à l'application. Vous pouvez demander n’importe quel composant d’interface utilisateur, en style libre. Très probablement, cela générera la bonne chose pour vous. Cela peut également être utilisé comme un excellent bootstrap pour les projets, j'ai essayé de créer le style Material-UI, mais vous pouvez modifier ce comportement.

Exportez vos composants

Vous pouvez désormais choisir entre l'exportation HTML de vos composants d'interface utilisateur et votre combinaison préférée de Tailwind CSS, Next.js, React.js, Material UI.

Exécution locale

Ce projet est construit avec Next.js et TailwindCSS , vous pouvez donc le déployer directement sur Vercel.

Après avoir cloné le dépôt, accédez à OpenAI pour créer un compte et placez votre clé API dans un fichier appelé .env (OPENAI_API_KEY). Ensuite, exécutez l'application dans la ligne de commande et elle sera disponible sur http://localhost:3000 .

 installation npm

développeur de fil

Modification des invites et des demandes ChatGPT

Afin de modifier la réponse ChatGPT, il vous suffit de lui donner un exemple de ce que vous souhaitez récupérer (utilisez le rôle d'assistant pour générer un exemple de bonne réponse)". Dans l'exemple ci-dessous, je lui montre comment générer TailwindCSS et Next. .js, puis demandez simplement de renvoyer le code HTML correspondant.

 // /api/generate.tsconst handler = async (req: Request): Promise => {const {prompt} = (attendre req.json()) comme {prompt?: string;};if (!prompt ) {return new Response("Aucune invite dans la requête", {status : 400});}charge utile const : OpenAIStreamPayload = {model : "gpt-3.5-turbo", messages : [{"role": "user","content": "créer le code CSS next.js + tailwind pour le bouton 200 x 100, fond violet clair, générer du texte dessus. Veuillez créer un composant next.js complet"},{"role": "assistant", "content": ` import React from 'react';                    const MyComponent = () => { return (  Bonjour tout le monde Bienvenue dans mon composant Next.js utilisant Tailwind CSS
   );                    } ;                    exporter MyComponent par défaut ;                `},{"role": "user","content": "Veuillez créer du code HTML avec du CSS en ligne pour créer le composant suivant, l'apparence et la convivialité de l'interface utilisateur Meterial, renvoyer uniquement du code"},{"role": "user" , "content": prompt},],};const stream = wait OpenAIStream(payload);return new Response(stream);};

Qui a réalisé ce projet

Je m'appelle Yuval - un entrepreneur dans l'âme, je ❤️ construis des systèmes de bout en bout qui non seulement sont incroyables et à la pointe de la technologie, mais qui ont également un sens et un impact réels.