I built a ChatGPT Clone in Nuxt3 and gave it Superpowers!

I built my own ChatGPT clone with Nuxt3, TypeScript and Tailwindcss, and then I gave it superpowers. Using the OpenAI GPT-3 API, Stable Diffusion API on Replicate, and NuxtJS 3, Vue.js 3. In this tutorial, I wish share how I did it, and how you can do it too. In our artificial intelligence packed time, it's important to learn how to build ai apps such as an AI Chatbot.
Why Nuxtjs 3 and Vue and not React? Because I personally think Vue.js is a much better js framework. It's faster, uses less memory, and easier to use. But you opinion might vary.
🤖 Try CloneGPT here: bit.ly/3LdZgWb
📹 Related videos:
Become a an expert in prompting in ChatGPT: • Become a Pro in ChatGP...
I asked ChatGPT to build me an app: • I asked ChatGPT to bui...
GPT-4 Announcement: • GPT4 Is Out! Can it un...
🧘‍♀️ For any questions, comments, ideas, join our community: / discord
💾 Software & Code:
CloneGPT Source Code:
As seen in this video: bit.ly/426pDDp
Current version (with superpowers): bit.ly/3Litpnw
OpenAI:
OpenAI Platform: bit.ly/3Li3k7Z
OpenAI Documentation: bit.ly/423nVmr
Dev tools & framworks:
Tabnine (AI Code Assistant): bit.ly/3kZy42Z
VSCode: bit.ly/3EInjXZ
pnpm: bit.ly/3Tba5dI
Nuxt.js 3: bit.ly/3Jcfqg6
Tailwinds CSS: bit.ly/3mNfBHv
📕 Chapters:
00:00 - Intro
01:36 - Intro to GPT-3 Prompts
03:27 - Building the app
06:07 - Copy the UI from ChatGPT
07:50 - Frontend Logic
12:06 - Building the API
14:02 - Prompting GPT-3
16:47 - The superpowers!
17:00 - It Talks!
17:16 - It Draws!
17:34 - It (Screen)Shots!
17:59 - Control what it says
18:58 - Final prompt
21:16 - Open Source
22:10 - Outro
#chatgpt #openai #ai #javascript #nuxtjs #vuejs #tailwindcss #chatgptclone #tutorial

[@peterhirt991]

Excellent video! could you do a follow-up using also embeddings so to finetune the answers to say a company internal target? I noticed that your prompt variable in the code could be populated with the 3 or 4 best probable embeddings coming from a vector store like Pinecone.

[@hml]

Yeah, this video is quite old in LLM terms, now there are so many other ways I could've built this. In this case, a vector store wouldn't help, since there isn't a "defined" knowledge base. But if I wanted it to answer data from a company data set or something like that, then I would definitely go with a vector store. I will make a video basically connecting Whisper/LLM/vector store to create a database of a full podcast.

[@truenemesisprime550]

You are ridiculously smart lol, you have images working before they do! I'm loving your clone, thank you very much. Would it be possible to add the ability to save the chat thread? Will it remember things I feed it if I were to use it to help write the story I've been working on in chat gpt? Also would it be possible to allow us to upload an image and have it give us the text prompts? Thanks again, IMPRESSIVE!

[@hml]

I know it's been 2 weeks since you left this comment, but we've been talking on the discord, so I didn't respond until now, but now been making sure I respond to all the comments. BTW, did you find out the "Clip Interrogator" (replicate.com/pharmapsychotic/clip-interrogator) and img2prompt (replicate.com/methexis-inc/img2prompt)? I shared them in my Midjourney videos, those tools allow you to give it an image, and it returns a prompt that allows you to generate a similar image.

[@truenemesisprime550]

@@hml Cool thanks, I didn't know about that one :D Edit: It's giving a page not found screen?

[@hml]

Remove the ")" from the link, stupid KZbin thinks it's part of the link

[@maskman4821]

I have buit several chatbot with different stacks such as vanilla, Next and Sveltekit, and I thnk I will go through this tutorial and dive in Nuxt fullstack applicaion because I am curious about Nuxt server route development, I think this will be a great tutorial 🤩😍😘😀

[@hml]

Great to hear! Let me know (either here on our Discord) how it goes, and what did you think! I'm also super curious about how you think it compares to the Sveltekit one.

[@1dosstx]

Has anyone been able to deploy chatGPT clone to Netlify or Vercel using edge functions? That's where I stumble and I have yet to see anyone do it there and also get streaming to work.

[@hml]

I initially planned go deploy this to Netlify and Vercel, and couldn't get streaming to work. Something in the Vercel network blocks SSE. That's why I switched to Cloud Run, and took me a few minutes to get it to work, including streaming.

[@1dosstx]

@@hml I may give that a try

[@NobodyBeatsTheSniz]

Can you modify parameters such as topics for content that is considered illegal. Tried to use GPT to write content for a blog on cannabis but it wouldn’t allow it. When cloning is there a workaround to accept this topic?

[@hml]

The clone has no content it considers illegal. Just asked it to write a blog posts on the benefits of recreational cannabis use, and it wrote it easily.

[@thomaskoner1287]

supercool

[@hml]

I still want us to make this music video animation! It can come out amazing.

[@same4047]

You are Great 👍, try make creative stories or problem solving stories out of your hacking skills 😉 that's may help gaining more subscribers

[@hml]

Ok I will definitely try! I did make a "vlog" out of my wifi lights video, not sure if that really worked out well, though. Would love to hear your opinion.

[@codewithnyamboks]

this is awesome. Lemi try it out and bring a feedback

[@hml]

Thank you so much! Definitely looking forward to your feedback 🙂

[@codewithnyamboks]

it was so fun. It worked, however the images refused to be drawn

[@hml]

That's weird, try writing "draw me a snowman". I just checked and it works.

[@EvgenyKerbel]

כל הכבוד

[@hml]

תודה רבה! 🙂

[@1dosstx]

Btw looks like the demo no longer works

[@hml]

Just tested it out, and it worked perfectly. What doesn't work for you?

[@aichampionofficial]

@hml Cannot use the magic link to Login. It loops or just doesn't work.