Build a SMART Portfolio Website (Next.js 14, Langchain, Vercel AI SDK, OpenAI API, Tailwind CSS)

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ต.ค. 2024

ความคิดเห็น • 114

  • @xCarter93
    @xCarter93 8 หลายเดือนก่อน +5

    I'm always amazed by how knowledgeable you are in all of these different topics. I've watched and followed along with all of your tutorials so far and I'm more and more impressed each time. Truly amazing what you are doing here and can't thank you enough!

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Thank you for the kind words

  • @AmphibianDev
    @AmphibianDev 8 หลายเดือนก่อน +16

    Man, do you read my mind or what the f**k is happening? I can't thank you enough. I am at the beginning of starting my own company, and you come out with exactly what I needed to build my website. For the moment, I don't have any money to spare, but when I do, I will surely support you by buying your course or making a donation.

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +2

      Happy to hear that! Yea I think this kind of website is really useful for different usecases!

    • @azzamismail41
      @azzamismail41 8 หลายเดือนก่อน

      Ya he read my mind too. Many times before lol

    • @Entertainment--Shorts
      @Entertainment--Shorts 8 หลายเดือนก่อน

      The same here 😬☝️😅👍

  • @GregPeters1
    @GregPeters1 8 หลายเดือนก่อน +3

    I'm a huge fan of yours, Florian. Appreciate the outstanding content

  • @neelusingh7167
    @neelusingh7167 8 หลายเดือนก่อน +5

    Thanks GURU (A Sanskrit word means teacher). Love from India

  • @wordslivelonger
    @wordslivelonger 8 หลายเดือนก่อน +1

    Kudos and massive appreciation for using the latest and in-demand technologies and your unique perspective in integrating AI chatbots with Langchain for building applications based on LLMs and it showcases a forward-thinking approach that sets you apart in the ever-evolving tech landscape on youtube.

  • @mehraj43
    @mehraj43 2 หลายเดือนก่อน

    A great tutorial will definitely implement it for my portfolio website
    Thanks a lot

  • @kwonsama
    @kwonsama 5 หลายเดือนก่อน

    I have a question. When receiving a response through API, how do receive a response without websocket or sse?

  • @hk254lyt8
    @hk254lyt8 8 หลายเดือนก่อน

    Damn. Thank you so much. Watching from Kenya 🇰🇪

  • @rapidinsightsai
    @rapidinsightsai 8 หลายเดือนก่อน

    great tutorials. Please keep them coming!

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      More to come!

  • @quilloai
    @quilloai 7 หลายเดือนก่อน +1

    My question is how will I load also the file components that don't have text? Like example but the text is on that component how will i load it?

  • @kordou
    @kordou 8 หลายเดือนก่อน

    Great Content! Thank you for that. RECOMENDED

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Thank you very much!

  • @Leesdjo
    @Leesdjo 6 หลายเดือนก่อน

    Thank you. This is amazing.

  • @azzamismail41
    @azzamismail41 8 หลายเดือนก่อน

    Great content as always. This is a site i would definitely build for myself since I am always worrying about what design to go with. Minimalist wins.

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      It's a great project to build

  • @brancode404
    @brancode404 8 หลายเดือนก่อน

    Great as always brother. Do you use server actions here bro? When do you use api routes and server actions? Just curious

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Server actions don't support streaming this is why we use a route handler here

  • @GREENDAYROKS1
    @GREENDAYROKS1 8 หลายเดือนก่อน +1

    Hey bro great tutorial, taught me alot about langchain. One question I have, how are your responses so quick? As a test case I copied your chat route exactly but am getting 15-20 second response times. Would be great to know if you had any insights about this. Thanks again man!

    • @mysanctuary4017
      @mysanctuary4017 7 หลายเดือนก่อน +1

      It's happening to me as well, didn't figure it out yet, did you ?

    • @GREENDAYROKS1
      @GREENDAYROKS1 7 หลายเดือนก่อน

      @@mysanctuary4017 it resolved itself for me when I deployed to production / vercel

  • @lightyagami4667
    @lightyagami4667 8 หลายเดือนก่อน

    Unique and a Masterpiece man

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Thank you so much!

  • @amanasrani6405
    @amanasrani6405 6 หลายเดือนก่อน

    This is amazing , i l need this , really thank you🙏🏻❤

  • @sahilmund6824
    @sahilmund6824 8 หลายเดือนก่อน +1

    Can we change the db from astraDb to supabase postgres db. Can u assist me on it

  • @gonzalovillafane1644
    @gonzalovillafane1644 หลายเดือนก่อน

    How do you recommend I add text? I have 100 pages of text (its a pdf)

  • @M1a2n3o43
    @M1a2n3o43 5 หลายเดือนก่อน

    Do you have any links to the docs where you got this code? I choose this project for a project in my school, so i have to explain this code to my teachers. This video alone wont cover the information i need and since versions of these packages you are using have been updated, the code has been changed and the docs aswell.

  • @henrikfogbunzel2224
    @henrikfogbunzel2224 5 หลายเดือนก่อน

    Super cool project with which I have made my own website!
    However, I am a bit confused about our design. Can I follow Tailwind CSS official documentation or have we made our own?

    • @codinginflow
      @codinginflow  5 หลายเดือนก่อน

      Yes you can use any Tailwind classes

  • @AjayCoding
    @AjayCoding 4 หลายเดือนก่อน

    I have to upload PDFs. Can I use LlamaIndex or LangChain?

  • @kiwaikos
    @kiwaikos 7 หลายเดือนก่อน

    amazing video, super professional, I learned so much, i just have a small thing that is bothering me... at first i thought there was something wrong with my code , but i see the problem from branch "4-Dark-Theme" on all browsers console i see a warning :
    Warning: Extra attributes from the server: class,style looks like something from ThemeProvider ...do i need to add suppressHydrationWarning some where?

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน +1

      I think that is caused by some browser extension

  • @prakashbanjade4374
    @prakashbanjade4374 5 หลายเดือนก่อน

    What about dynamic data? How can the document be generated?

  • @khainghtoo9372
    @khainghtoo9372 7 หลายเดือนก่อน

    Amazing Sir

  • @prakashbanjade4374
    @prakashbanjade4374 4 หลายเดือนก่อน

    I tried the same, but chat model does not impersonate me. The very first 'kwargs' is the prompt template and the context that I can clearly see in the console. But I don't know why, the model can't even reply my name.

  • @JeanBaptisteChabi
    @JeanBaptisteChabi 8 หลายเดือนก่อน +1

    Another geat one, please can you make a video on how to develop a mobile app with react native for an existing next js web app, not PWA but native app using the same data as the next js web app

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      I'm not really that interested in React Native but we'll see

    • @JeanBaptisteChabi
      @JeanBaptisteChabi 8 หลายเดือนก่อน

      @@codinginflow Thanks for your help

  • @amir78989
    @amir78989 8 หลายเดือนก่อน

    Can you do one with php or Laravel? Maybe a react frontend?

  • @powerball200
    @powerball200 8 หลายเดือนก่อน

    Can a newbie in software field who doesn't know abc of coding can watch this video and learn from it or should he she knows some prior to this video?

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Watch my linked Next.js beginner tutorial first

  • @programmingwithalex.585
    @programmingwithalex.585 8 หลายเดือนก่อน

    Amazing content

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      Thank you very much. Please share it to help the video grow 🤩

  • @mysanctuary4017
    @mysanctuary4017 7 หลายเดือนก่อน

    Response time is extremely slow, would you know why? Great tutorial BTW

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน +1

      Probably because you are in a low OpenAI tier

  • @FahadKiani1
    @FahadKiani1 8 หลายเดือนก่อน

    wow legendary tutorial

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      Glad you like it!

  • @geniusworkspace17
    @geniusworkspace17 4 หลายเดือนก่อน

    Thanks man, I learned a lot

  • @iNT3NS3CLUTCH
    @iNT3NS3CLUTCH 7 หลายเดือนก่อน

    The re-ordering tailwind values with shift+alt+f doesn't work for me on any video and I've done alot of research trying to figure out why and can't. The format keyboard shortcut works for me as it formats my spacing correctly with prettier but it doesn't add missing semicolons or order my tailwind properties and I'v redone the setup you show in the video multiple times. Can't figure out the issue.

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน

      Did you set the default formatter to Prettier?

    • @iNT3NS3CLUTCH
      @iNT3NS3CLUTCH 7 หลายเดือนก่อน

      I finally fixed it for anyone having a simillar issue. right click on any document and go to "Format Document with" then select the bottom option to configure the default and set it to Prettier. Mine by dedfault was 'typescript and javascript' and it was causing prettier to not work with the shortcut.

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน

      @@iNT3NS3CLUTCH We set up the default formatter in all my Prettier videos

  • @farid9323
    @farid9323 7 หลายเดือนก่อน

    Is it possible to return source documents? You might be searching a website with thousands of pages. Knowing where the chatbot got its answers from is important.

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน

      Our chatbot returns the links to relevant pages

    • @farid9323
      @farid9323 7 หลายเดือนก่อน

      @@codinginflow True, I saw that for the TH-cam link example, but is it guaranteed to always return sources for every answer? My product requires that. My current solution does that, but it's very slow.

    • @felixm.5901
      @felixm.5901 5 หลายเดือนก่อน

      have you found a solution to that problem? I also need the source documents to do further analysis

  • @harveyezihe
    @harveyezihe 8 หลายเดือนก่อน

    Please, I have an old portfolio that I still use. It was built using react, and I'm trying to implement the ai chat functionality. I'm currently stuck at the file loader part. You said NextJS automatically checks /api/chat when using useChat(). But then you changed the code to LangChain's code and it still worked. My question is, does LangChain also check /api/chat? And what changes do I have to make for this to work for me in React?

    • @harveyezihe
      @harveyezihe 8 หลายเดือนก่อน

      I think basically, what I'm asking is... Can you use vercel's ai with vanilla react?

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      You need an API endpoint at /api/chat

  • @adarshrathi8265
    @adarshrathi8265 8 หลายเดือนก่อน +1

    big brother , if you made tutorial video Like previous job Listing video on server action , then this is much better for your channel like full stack same way in job video and choose different topic. use server action.

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      What do you mean

    • @adarshrathi8265
      @adarshrathi8265 8 หลายเดือนก่อน

      @@codinginflow I mean made clone video using server action on different topics like you made previous job listing server action video like that but different topic like different website clone like, buddy

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      @@adarshrathi8265 I see. Thank you.

  • @piyushshrestha3651
    @piyushshrestha3651 8 หลายเดือนก่อน

    Brother the Image component is saying image has either width or height modified include auto
    This is my code
    I also included className h-auto and w-auto

    • @artistejiro
      @artistejiro 7 หลายเดือนก่อน

      Width

    • @piyushshrestha3651
      @piyushshrestha3651 7 หลายเดือนก่อน

      @@artistejiro still bro

    • @artistejiro
      @artistejiro 7 หลายเดือนก่อน

      @@piyushshrestha3651 i mean use small letter for the width and height

  • @DaveundLenz
    @DaveundLenz 8 หลายเดือนก่อน

    Kannst du mir helfen in unity 2d weil ich fliege durch die halbe tilemap

  • @himenatika
    @himenatika 8 หลายเดือนก่อน

    Man, I just realized it's over 3 hours 😄🤯

  • @joshbleijenberg4000
    @joshbleijenberg4000 8 หลายเดือนก่อน

    This is amazing

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      thank you 😊

    • @joshbleijenberg4000
      @joshbleijenberg4000 8 หลายเดือนก่อน

      @@codinginflow image we are also building a blog, and we want to give users 10 free questions to the bot. After that, they have to go premium for unlimted questions. How can we integrate that?

    • @joshbleijenberg4000
      @joshbleijenberg4000 8 หลายเดือนก่อน

      @@codinginflow is it also possible to give users for example 10 free questions Every day, and if they want more. They need to take a premium account? How could we integrate that

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      @@joshbleijenberg4000 Yes. You need authentication. I recommend Next-auth. Then you store the daily question count in the database.
      I recommend watching my Next-js e-commerce tutorial and then go from there.

    • @joshbleijenberg4000
      @joshbleijenberg4000 7 หลายเดือนก่อน

      Is it also possible to container this whole workflow of creating the bot and make for example an Wordpress plugin of it where website owners only have to put their env variables for example? Ofcourse is everything possible, but what would be a good approach to create something like this?@@codinginflow

  • @rainerpavletic4814
    @rainerpavletic4814 5 หลายเดือนก่อน

    I truly thank this video and your tutorial. But, just one thing though, it's making it so hard to listen to you especially with headphones on because of the type of mic you're using. It's making all the sounds you're creating from your mouth so audible I have to pause the audio from time to time. It's better to have these kind of tutorials without using microphones so close in your mouth or use a microphone that's not made for "ASMR". Over all thank you for this tutorial, very helpful!

    • @rainerpavletic4814
      @rainerpavletic4814 5 หลายเดือนก่อน

      1:26:01 The components prop is used to customize the rendering of Markdown elements. It accepts an object where the keys are the names of the Markdown elements you want to customize, and the values are React components that will be used to render these "elements" (not links).

  • @asdfeeafgdsf1826
    @asdfeeafgdsf1826 7 หลายเดือนก่อน

    The bot on your website is broken. Security issue?

    • @codinginflow
      @codinginflow  7 หลายเดือนก่อน

      What website?

  • @lightyagami4667
    @lightyagami4667 8 หลายเดือนก่อน

    If possible in your free time
    can you make an e commerce website with Ai chatbot sir. Only coder that can make it possible is you sir

  • @dleonardo3238
    @dleonardo3238 8 หลายเดือนก่อน +1

    Is he still doing Android?

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      No, I quit Android several years ago. Only web now.

  • @abirahamed2093
    @abirahamed2093 8 หลายเดือนก่อน

    Can you please Tell me your vs code theme and font name?

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน +1

      GitHub Dark and Consolas

    • @abirahamed2093
      @abirahamed2093 8 หลายเดือนก่อน

      @@codinginflow thanks

  • @tktserapio
    @tktserapio 3 หลายเดือนก่อน +2

    hi im encountering a problem at 2:41:26 where the import { AstraDB } from "@datastax/astra-db-ts" line of code says that "Module '"@datastax/astra-db-ts"' has no exported member 'AstraDB'"

    • @AkmalAshwin
      @AkmalAshwin 3 หลายเดือนก่อน

      SAME

    • @AkmalAshwin
      @AkmalAshwin 3 หลายเดือนก่อน +3

      solution is change the import import { AstraDB } from "@datastax/astra-db-ts" to import { DataAPIClient } from '@datastax/astra-db-ts'; and then step 2 is use this function instead export async function getEmbeddingsCollection() {
      const client = new DataAPIClient(token);
      const db = client.db(endpoint);

      return db.collection(collection);
      } and then continue the video

    • @tktserapio
      @tktserapio 3 หลายเดือนก่อน +2

      @@AkmalAshwin thank you so m much my guy

  • @DaveundLenz
    @DaveundLenz 8 หลายเดือนก่อน

    are you german or do you speak german

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      ja

    • @DaveundLenz
      @DaveundLenz 8 หลายเดือนก่อน

      @@codinginflow ich habe es in einen deiner früheren videos bemerkt

    • @codinginflow
      @codinginflow  8 หลายเดือนก่อน

      ​@@DaveundLenz Das heißt mein Akzent ist vielleicht besser geworden 😆

    • @DaveundLenz
      @DaveundLenz 8 หลายเดือนก่อน

      @@codinginflow ja

  • @abirahamed2093
    @abirahamed2093 8 หลายเดือนก่อน

    In this short th-cam.com/users/shorts7r4ahP3PP54?feature=share Which vs code and font you are using?

  • @AlexanderMoyer-k3b
    @AlexanderMoyer-k3b 3 หลายเดือนก่อน

    Do you have a discord? :)

  • @lycan2494
    @lycan2494 5 หลายเดือนก่อน

    dude whats your iq?

    • @codinginflow
      @codinginflow  5 หลายเดือนก่อน

      200

    • @lycan2494
      @lycan2494 5 หลายเดือนก่อน

      @@codinginflow no fr tho xD how u went through all of that langchain stuff. that's crazy.

    • @codinginflow
      @codinginflow  5 หลายเดือนก่อน +1

      @@lycan2494 Lots of pain and patience 😆

  • @AJ-ru7ub
    @AJ-ru7ub 8 หลายเดือนก่อน

    chat gpt provides free api key ? for making chatbots