ai component generator

Bem-vindo ao AI Component Generator com ChatGPT

Este projeto gera quase todos os componentes de UI com ChatGPT da OpenAI e permite copiar o código html

Gerador de componentes AI2UI

Como funciona

Este projeto usa as funções ChatGPT API e Vercel Edge. Ele constrói um prompt com base no formulário e na entrada do usuário, envia-o para a API chatGPT por meio de uma função Vercel Edge e, em seguida, transmite a resposta de volta ao aplicativo. Você pode solicitar qualquer componente de UI, estilo livre. Muito provavelmente isso gerará a coisa certa para você. Isso também pode ser usado como um ótimo bootstrap para projetos, tentei deixar o estilo Material-UI estilizado, mas você pode alterar esse comportamento.

Exporte seus componentes

Agora você pode escolher entre a exportação HTML de seus componentes de UI e sua combinação preferida de Tailwind CSS, Next.js, React.js, Material UI

Executando localmente

Este projeto é construído com Next.js e TailwindCSS , para que você possa implantá-lo diretamente no Vercel.

Após clonar o repo, acesse OpenAI para fazer uma conta e coloque sua chave API em um arquivo chamado .env (OPENAI_API_KEY) Em seguida, execute o aplicativo na linha de comando e ele estará disponível em http://localhost:3000 .

 instalação npm

desenvolvedor de fios

Alterando prompts e solicitações do ChatGPT

Para alterar a resposta do ChatGPT você só precisa dar um exemplo do que deseja receber de volta (use a função de assistente para gerar um exemplo de uma boa resposta)". No exemplo abaixo mostro como gerar TailwindCSS e Next Componente .js e posteriormente solicitar apenas o retorno do código HTML correspondente.

 // /api/generate.tsconst handler = async (req: Request): Promise => {const {prompt} = (await req.json()) as {prompt?: string;};if (!prompt ) {return new Response("Nenhum prompt na solicitação", {status: 400});}const payload: OpenAIStreamPayload = {model: "gpt-3.5-turbo",messages: [{"role": "user","content": "create next.js + tailwind css code para botão 200 x 100, fundo roxo claro, gere texto nele. Por favor, crie um componente next.js completo"},{"role": "assistant", "content": ` import React from 'react';                    const MyComponent = () => { return ( 
 
Olá mundo 
Bem-vindo ao meu componente Next.js usando Tailwind CSS
 Clique em mim 
 ) ;                    };                    exportar MyComponent padrão;                `},{"role": "user","content": "Por favor, crie código html com css in-line que cria o seguinte componente, aparência da UI Meterial, retorna apenas código"},{"role": "user" , "content": prompt},],};const stream = await OpenAIStream(payload);return new Response(stream);};

Quem fez esse projeto

Meu nome é Yuval - um empreendedor de coração, eu ❤️ construo sistemas ponta a ponta que não apenas têm uma aparência incrível e são de última geração, mas também têm significado e impacto reais.

? Contribuindo

Contribuições, problemas e solicitações de recursos são bem-vindos!

• Bifurque o repositório, clone-o no seu dispositivo. É isso ?

• Finalmente faça uma solicitação pull :)

Licença

Este projeto é licenciado pela licença MIT.

---

Aceitamos contribuição com muito amor! Mostre seu interesse! Contribuir!