ai component generator

ChatGPT가 포함된 AI 구성 요소 생성기에 오신 것을 환영합니다.

이 프로젝트는 OpenAI의 ChatGPT를 사용하여 거의 모든 UI 구성 요소를 생성하고 HTML 코드를 복사할 수 있습니다.

AI2UI 구성 요소 생성기

작동 원리

이 프로젝트는 ChatGPT API 및 Vercel Edge 기능을 사용합니다. 양식과 사용자 입력을 기반으로 프롬프트를 구성하고 이를 Vercel Edge 기능을 통해 chatGPT API로 보낸 다음 응답을 애플리케이션으로 다시 스트리밍합니다. UI 구성 요소, 자유로운 스타일을 요청할 수 있습니다. 아마도 그것은 당신에게 적합한 것을 생성할 것입니다. 이는 프로젝트의 훌륭한 부트스트랩으로도 사용할 수 있습니다. 저는 Material-UI 스타일을 적용하려고 했지만 이 동작을 변경할 수 있습니다.

구성 요소 내보내기

이제 UI 구성 요소의 HTML 내보내기와 Tailwind CSS, Next.js, React.js, Material UI의 원하는 조합 중에서 선택할 수 있습니다.

로컬로 실행

이 프로젝트는 Next.js 및 TailwindCSS 로 구축되었으므로 Vercel에 직접 배포할 수 있습니다.

Repo를 복제한 후 OpenAI로 이동하여 계정을 만들고 API 키를 .env (OPENAI_API_KEY)라는 파일에 넣은 다음 명령줄에서 애플리케이션을 실행하면 http://localhost:3000 에서 사용할 수 있습니다.

 npm 설치

원사 개발

ChatGPT 프롬프트 및 요청 변경

ChatGPT 응답을 변경하려면 돌려받고 싶은 내용의 예만 제공하면 됩니다(좋은 응답의 예를 생성하려면 보조 역할을 사용하십시오). 아래 예에서는 TailwindCSS 및 Next를 생성하는 방법을 보여줍니다. .js 구성 요소를 사용하고 나중에 해당 HTML 코드를 반환하도록 요청합니다.

 // /api/generate.tsconst 핸들러 = async (req: 요청): Promise => {const {prompt} = (await req.json()) as {prompt?: string;};if (!prompt ) {return new Response("요청에 프롬프트가 없습니다", {status: 400});}const 페이로드: OpenAIStreamPayload = {model: "gpt-3.5-turbo",messages: [{"role": "user","content": "버튼 200 x 100, 연한 보라색 배경에 대한 next.js + tailwind CSS 코드를 생성하고 그 위에 텍스트를 생성하세요. 생성해 주세요. 완전한 next.js 구성 요소"},{"role": "assistant", "content": ` import React from 'react';                    const MyComponent = () => { return ( 
 
Hello World 
Tailwind CSS를 사용하는 Next.js 구성 요소에 오신 것을 환영합니다
 나를 클릭하세요 
 );                    };                    기본 MyComponent 내보내기;                `},{"role": "user","content": "다음 구성 요소, Meterial UI 모양과 느낌을 생성하는 인라인 CSS를 사용하여 html 코드를 생성하십시오. 코드만 반환합니다."},{"role": "user" , "content": 프롬프트},],};const stream = OpenAIStream(payload)을 기다리고; 새 응답(stream)을 반환합니다.};

이 프로젝트를 만든 사람

제 이름은 유발(Yuval)입니다. 저는 마음속의 기업가입니다. 저는 놀랍고 최첨단이라고 느낄 뿐만 아니라 실질적인 의미와 영향력을 지닌 엔드투엔드 시스템을 구축하고 있습니다.

? 기여

기여, 문제 및 기능 요청을 환영합니다!

• 저장소를 포크하고 장치에서 복제하십시오. 그게 다야?

• 마지막으로 풀 요청을 해보세요 :)

특허

이 프로젝트는 MIT 라이선스 라이선스를 받았습니다.

---

기부를 큰 사랑으로 받아들이겠습니다! 관심을 보여주세요! 기여하다!