AI-Komponentengenerator herunterladen - AI-Komponentengenerator-Quellcode herunterladen

ai component generator

Anderer Quellcode

1.0.0

Herunterladen

Willkommen beim AI Component Generator mit ChatGPT

Dieses Projekt generiert nahezu alle UI-Komponenten mit ChatGPT von OpenAI und ermöglicht Ihnen das Kopieren des HTML-Codes

Twitter-Biogenerator

AI2UI-Komponentengenerator

Wie es funktioniert

Dieses Projekt verwendet die ChatGPT-API und die Vercel Edge-Funktionen. Es erstellt eine Eingabeaufforderung basierend auf dem Formular und der Benutzereingabe, sendet sie über eine Vercel Edge-Funktion an die chatGPT-API und streamt die Antwort dann zurück an die Anwendung. Sie können nach jeder UI-Komponente im freien Stil fragen. Höchstwahrscheinlich wird es das Richtige für Sie generieren. Dies kann auch als großartiger Bootstrap für Projekte verwendet werden. Ich habe versucht, den Stil „Material-UI“ zu gestalten, aber Sie können dieses Verhalten ändern.

Exportieren Sie Ihre Komponenten

Sie können jetzt zwischen dem HTML-Export Ihrer UI-Komponenten und Ihrer bevorzugten Kombination aus Tailwind CSS, Next.js, React.js und Material UI wählen

Lokal ausgeführt

Dieses Projekt wurde mit Next.js und TailwindCSS erstellt, sodass Sie es direkt in Vercel bereitstellen können.

Nachdem Sie das Repo geklont haben, gehen Sie zu OpenAI, um ein Konto zu erstellen und Ihren API-Schlüssel in eine Datei namens .env (OPENAI_API_KEY) einzufügen. Führen Sie dann die Anwendung in der Befehlszeile aus und sie wird unter http://localhost:3000 verfügbar sein.

 npm installieren

Garnentw

ChatGPT-Eingabeaufforderungen und -Anfragen ändern

Um die ChatGPT-Antwort zu ändern, müssen Sie ihr lediglich ein Beispiel dafür geben, was Sie zurückerhalten möchten (verwenden Sie die Assistentenrolle, um ein Beispiel für eine gute Antwort zu generieren). Im folgenden Beispiel zeige ich, wie TailwindCSS und Next generiert werden .js-Komponente und fragt später nur nach der Rückgabe des entsprechenden HTML-Codes.

 // /api/generate.tsconst handler = async (req: Request): Promise => {const {prompt} = (await req.json()) as {prompt?: string;};if (!prompt ) {return new Response("Keine Eingabeaufforderung in der Anfrage", {status: 400});}const payload: OpenAIStreamPayload = {model: „gpt-3.5-turbo“,messages: [{“role“: „user“,content“: „next.js + Tailwind-CSS-Code für Schaltfläche 200 x 100 erstellen, hellvioletter Hintergrund, Text darauf generieren. Bitte erstellen eine vollständige next.js-Komponente"},{"role": "assistant", "content": ` import React from 'react';                    const MyComponent = () => { return (  Hello World Willkommen bei meiner Next.js-Komponente mit Tailwind CSS
   );                    };                    Standard-MyComponent exportieren;                `},{"role": "user","content": "Bitte erstellen Sie HTML-Code mit Inline-CSS, um die folgende Komponente zu erstellen, Erscheinungsbild der Meterial-Benutzeroberfläche, nur Code zurückgeben"},{"role": "user" , "content": prompt},],};const stream = waiting OpenAIStream(payload);return new Response(stream);};

Wer hat dieses Projekt gemacht?

Mein Name ist Yuval – im Herzen ein Unternehmer. Ich wünsche mir den Aufbau von End-to-End-Systemen, die nicht nur fantastisch aussehen und sich auf dem neuesten Stand der Technik anfühlen, sondern auch echte Bedeutung und Wirkung haben.