![Roy Derks](/img/default-banner.jpg)
- 31
- 253 854
Roy Derks
Netherlands
เข้าร่วมเมื่อ 1 ก.ย. 2017
Practical videos to help you create awesome programming projects
Build AI Applications With LangChain, JavaScript and React
How To Get Started with OpenAI, GPT-4, LangChainJS in React | Learn AI Development
Welcome to our comprehensive tutorial on how to build AI applications using LangChain, JavaScript, and React. This video is designed for developers of all levels interested in integrating cutting-edge artificial intelligence into their web applications. Whether you're a seasoned developer or just starting out, you'll find valuable insights and practical steps to leverage AI in your projects.
00:00 Intro
01:24 Set Up LangChain
02:52 Connect to OpenAI
04:20 Build Get Answer Function
06:00 Handle Form Submission
08:09 Test It Out
You can find code examples in the blog post hackteam.io/blog/building-project-management-board-trello-react-vitejs-typescript-tailwind/
What You'll Learn:
* Introduction to LangChain: Get to know LangChain, a powerful library designed to make building AI-powered applications more accessible. We'll cover the basics and show you why LangChain is a game-changer in the AI development space.
* Setting Up Your Development Environment: A step-by-step guide to setting up your environment for AI development, including installing Node.js, React, and the LangChain library.
* Building a Basic AI Application: Dive into coding as we build a simple AI application from scratch. You'll learn how to integrate LangChain with React to create dynamic, AI-driven interfaces.
This video is packed with practical examples, code snippets, and real-world applications. By the end of this tutorial, you'll have a solid understanding of how to use LangChain with JavaScript and React to build powerful AI applications that can transform user experiences.
- - -
Follow @gethackteam on Twitter
#React #TailwindCSS #WebDevelopment #CSS #Tutorial #FrontEndDevelopment #Programming
AI Application Development, LangChain Tutorial, JavaScript AI Integration, React and AI, Building AI Web Applications, LangChain and JavaScript, AI Development with React, Natural Language Processing, Machine Learning Models, Web Development AI Techniques, AI User Experience Optimization, Deploying AI Applications, AI Programming for Web, Getting Started LangChain JS, LangChain JavaScript, LangChain App Development, GPT-4, GPT-3, langchain javascript, langchain js tutorial, build chatgpt clone, openai models javascript, vite react tutorial, react chatbot tutorial, ai chatbot javascript
Welcome to our comprehensive tutorial on how to build AI applications using LangChain, JavaScript, and React. This video is designed for developers of all levels interested in integrating cutting-edge artificial intelligence into their web applications. Whether you're a seasoned developer or just starting out, you'll find valuable insights and practical steps to leverage AI in your projects.
00:00 Intro
01:24 Set Up LangChain
02:52 Connect to OpenAI
04:20 Build Get Answer Function
06:00 Handle Form Submission
08:09 Test It Out
You can find code examples in the blog post hackteam.io/blog/building-project-management-board-trello-react-vitejs-typescript-tailwind/
What You'll Learn:
* Introduction to LangChain: Get to know LangChain, a powerful library designed to make building AI-powered applications more accessible. We'll cover the basics and show you why LangChain is a game-changer in the AI development space.
* Setting Up Your Development Environment: A step-by-step guide to setting up your environment for AI development, including installing Node.js, React, and the LangChain library.
* Building a Basic AI Application: Dive into coding as we build a simple AI application from scratch. You'll learn how to integrate LangChain with React to create dynamic, AI-driven interfaces.
This video is packed with practical examples, code snippets, and real-world applications. By the end of this tutorial, you'll have a solid understanding of how to use LangChain with JavaScript and React to build powerful AI applications that can transform user experiences.
- - -
Follow @gethackteam on Twitter
#React #TailwindCSS #WebDevelopment #CSS #Tutorial #FrontEndDevelopment #Programming
AI Application Development, LangChain Tutorial, JavaScript AI Integration, React and AI, Building AI Web Applications, LangChain and JavaScript, AI Development with React, Natural Language Processing, Machine Learning Models, Web Development AI Techniques, AI User Experience Optimization, Deploying AI Applications, AI Programming for Web, Getting Started LangChain JS, LangChain JavaScript, LangChain App Development, GPT-4, GPT-3, langchain javascript, langchain js tutorial, build chatgpt clone, openai models javascript, vite react tutorial, react chatbot tutorial, ai chatbot javascript
มุมมอง: 5 542
วีดีโอ
How To Get Started with TailwindCSS in React | Learn Web Development
มุมมอง 5K8 หลายเดือนก่อน
How To Get Started with TailwindCSS in React | Learn Web Development In this tutorial, I'll walk you through the process of replacing CSS with Tailwind in your React application. The focus will be on leveraging Tailwind's class names to simplify and streamline your styling.Start by setting up a new React app with Vite. Once your project is established, install Tailwind CSS along with the necess...
Do We Still Need GraphQL with React Server Components?
มุมมอง 7K10 หลายเดือนก่อน
Do We Still Need GraphQL with React Server Components? Today we will explore whether GraphQL is still necessary with the advent of React Server Components in Next.js 14. I will discuss the benefits of server components, allowing developers to query databases directly from React components. The key question raised is whether GraphQL remains essential when direct frontend-to-backend querying is p...
The BEST Create React App VITE! | A Lightweight Alternative
มุมมอง 10Kปีที่แล้ว
The BEST Create React App VITE! | A Lightweight Alternative If you're into React, you've likely noticed a major update in the official documentation-no more mention of create-react-app. Does this mean create-react-app is no longer the go-to for building React applications? The documentation now recommends frameworks like Next.js or Remix, but what if you prefer a lighter-weight library? Enter V...
What is the best GraphQL IDE? | GraphiQL 2 vs. Altair Comparison
มุมมอง 61Kปีที่แล้ว
What is the best GraphQL IDE? | GraphiQL 2 vs. Altair Comparison Explore and test GraphQL APIs with this comparison of GraphiQL 2 and Altair.. In this video you will learn about the features of GraphiQL 2, such as executing queries, viewing schema, and interactive query building. I will also speak about Altair, a versatile graphical IDE that goes beyond GraphiQL in terms of features. Altair can...
How YOU Can Get Started with React Router 6 | Simplified React Routing
มุมมอง 27Kปีที่แล้ว
How YOU Can Get Started with React Router 6 | Simplified React Routing
Bootstrap Is The Easiest Way To Style React Apps in 2023
มุมมอง 11Kปีที่แล้ว
Bootstrap Is The Easiest Way To Style React Apps in 2023
How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)
มุมมอง 12Kปีที่แล้ว
How To Create A React App With React 18, Webpack 5, And Babel (2023 Update)
Exploring GraphiQL 2 Updates and New Features
มุมมอง 3.7Kปีที่แล้ว
Exploring GraphiQL 2 Updates and New Features
How To Set Up Next.js With Typescript Without Any Configuration
มุมมอง 12Kปีที่แล้ว
How To Set Up Next.js With Typescript Without Any Configuration
Apollo Server V4 Breaking Changes: Time To Move Away?
มุมมอง 5Kปีที่แล้ว
Apollo Server V4 Breaking Changes: Time To Move Away?
Creating Your First React & Typescript Project From Scratch
มุมมอง 6Kปีที่แล้ว
Creating Your First React & Typescript Project From Scratch
Let's build the book! Learn React during free livestreams
มุมมอง 5Kปีที่แล้ว
Let's build the book! Learn React during free livestreams
Super
Nice way you explained brother.
I was getting an error after adding the HtmlWebpackPlugin and running `npm start` again - it's saying "Cannot find package '@babel/preset-react'" - I had to actually install @babel/preset-env and @babel/preset-react - I think you may have forgotten to include that in the tutorial? Otherwise, great tutorial!
Thanks for mentioning! I’d have to check but could be the requirements changed after posting this video, if you’re not on the same React / Babel versions as in the video. Will verify and get back to you all :)
thanks! you saved me.
does anybody know to calculate token usage in langchain js, their documentation is shitee! not working!
I’d recommend using your LLM provider (like OpenAI, watsonx etc) to track token usage. They should have APIs to show this, and it could be included in the LLM response’s metadata too
Ty
🙏
Yeah, the big question is caching. With GraphQL, I am able to cache response but not with querying direct. I noticed a refetch is made nearly every time.
There are many ways to do caching in React too, for example, React Query (from Tanstack) is great for that use case
@@gethackteam Yeah, I will check it out. Does React Query work server side? Can you make a video on that? Maybe I am just too familiar with the pages router but it is easier to do everything, like refetching data, is almost makes app router pointless.
Works both way, and making a video about it is definitely on my todo list
thank you for the video , i have a question so i can you vite or next.js to create my web app but what do you think is better ? is it a good idea to use vite for prototyping and next.js for large products
Great question. Nextjs is great if you want to rely on a single framework, it helps you with SSR and also has built in API Routes. It uses its own routing file based system. Where with Vite on the other hand you can pick the open source libraries you want to use for SSR and for example use Express for the API calls, or react-router to handle routing. It depends on preferences, both are good for either prototypes or production
@@gethackteam thank youu sooo much <3
i want to perform the action on backend , instead of in the frontend
Totally possible! You can take the LangChain SDK and build an API endpoint for it instead, or use something like API Routes in Nextjs/Remix or RSC
fyi de vid loopt een beetje vast
What is the name of the sleep tracker?
Sleep cycle
What's the name of that extension who suggest code? (at 0:51)
It’s GitHub CoPilot!
Is there any repo?
You can find it here github.com/PacktPublishing/React-Projects-Second-Edition/tree/main/Chapter01. It’s slightly outdated but the video has the latest syntax
very nice content and clear explanation, thanks!
Thanks a lot Alan, appreciate it!
This is very useful, novadays everyone want just to create react app with one command, and its fine if you understand how it works under the hood. It's sad that almost every youtube video shouts just use THAT or use THAT, but defenitly dont use THAT!!! (becouse its slow, and there are betterr options!!!) Everyone is looking for shortcuts and easy-way. I'm glad that there are some dudes like you on this platform that make videos to help.
Thanks a lot! Happy to hear you liked it. Personally I like to understand fundamentals before taking the easy path of abstraction
Thanks for everyone that took the time to watch it live! Hope to see you again at the next one! You have until tomorrow 20:00 CEST to submit your answers here in the comments for the give away!
What do you think? I've described my reasoning behind this video some more in this blog post hackteam.io/blog/do-need-graphql-now-react-server-components/
good job man!
Thank you! Cheers!
Thanks for a great video. Do you have any input regarding @apollo/gateway? Will that work with apollo v.4?
I suppose so. But it heavily depends on the version as previous releases of Apollo gateway have reached end of life
Read the full blog post here hackteam.io/blog/vite-better-create-react-app-alternative
Thank you. You have no idea how many articles that don't work I had to read through before I found your excellent article. Medium, dev, youtube and other re-posted AI garbage make life hard!
That's so good to hear! Good luck
Roy our large enterprise govt team is behind firewall. Does Altair have schema designer? What on-prem (linux) tool would you recommend for federated schema diagram and design? Apollo Studio charges and we’re in sandbox right now.
😂😂😂😂😂😂😂😂😂😂😂
No Altair doesn't have a schema designer. However Altair allows you extend its functionality by creating plugins to add extra features. this might be a use case where a schema designer plugin would work.
❤perù
2s es e tesorso que stssssds s
Rr
Ere
Está 2ew
Recently went through an AS3 to AS4 upgrade across multiple servers and gateways. It was relatively painless. AS4 comes across as a "clear a few decks" release from Apollo with the intent to lay pathways for easier future developments and feature releases. The common "you're basically screwed" refrain and the reveal that building on apollo server means building on technical debt in the video comes across like FUD. I've developed software on all kinds of software frameworks (OSS, commercial, proprietary) - the AS3 to AS4 upgrade wasn't that dramatic. Of course YMMV - and for some setups there will be more disruption or work required. But the ebb and flow of intentional technical debt accumulation and clear down is a large part of any kind of sustained software development. There's a rich and growing ecosystem for GraphQL out there. Apollo, The Guid, StepZen, Wundergraph all come to mind off hand...we're spoilt to be honest. I can only speak to a very narrow set of GraphQL experiences as an Apollo user (and member of their supergraph champions slack community) - but in terms of general software frameworks/stacks it's been a solid choice.
Tv❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤🎉🎉🎉🎉🎉😢😮😮😅😅😊😊❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤😂😂😂😂😂😂😂😂😂😂😂😂😂🎉😅😅😅❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤😂🎉🎉🎉🎉🎉🎉🎉😂😂❤❤❤❤❤❤❤❤❤🎉🎉❤❤❤❤❤❤ de❤❤❤❤❤❤😂😂😂🎉🎉🎉😮😮😮😅😅😊😊😊
This video is inaccurate. 4 months have passed since Roy agreed he did not fully understand the details of the changes to Apollo Server 4. Yet he failed to correct it. Is this due to the fact that he works for an Apollo competitor, StepZen (now IBM)? I prefer transparency, so I'll state that our company happily uses Apollo Server and Studio. @Roy, please reconsider your ethics and update the video. In the spirit of transparency, I also have close relations with the Apollo team, have been presented at GraphQL Summit, and frequently on the Supergraph Champions weekly "think tank" style calls where we discuss roadmap, challenges from startups to enterprise, and generally geek out on everything GraphQL. But in general, I'm very committed to GraphQL and the ecosystem - beyond Apollo. @Community, if you are just embarking on your GraphQL journey or are experienced with the Apollo platform, I would recommend you take the Odyssey courses over at www.apollographql.com/tutorials/ . By going with official tutorials/courses, you'll have accurate information to build stronger projects. Regardless of the framework you end up using, you'll get to deep dive on the GraphQL spec, architecture, best practices, data modeling, and patterns that will level up your skillset. While they focus on implementing Apollo Server, the core GraphQL knowledge is applicable to all frameworks, and you'll benefit from knowing how to properly implement Apollo Server - which is a great skill for your CV given that the largest companies rely on Apollo. The courses are very well-made, fun, easy to follow, and taught by experienced software engineers from large companies. I wish I had this available when we first started on our journey with GraphQL, we would have saved a lot of headaches. @David Glasser, you're a rock star! Thanks for the outline you posted and for making it known that one confused but very popular Next.js tutorial caused so much confusion across the developer community. I hope history doesn't repeat with this video. In general, in our first months of embarking on GraphQL, our dev team encountered so many tutorials written by people who only knew frameworks at the surface level. It hurt us in the long run, but good experience on vetting the accuracy of sources of information. Also, 10000% agree with using native database drivers. In general, we see projects bloated with NPM packages that break away from best practices. I hope the Apollo team will launch a series of Apollo Server 4 videos ASAP, from migration, to architecture, and decisions like you outlined. @Roy Derks, 4 months ago, David Glasser kindly outlined in detail the inaccuracies from your video, you even acknowledge that you recorded this based on your interpretation of docs and random threads on Reddit - but you didn't make any updates. You don't even mentioning it on your video description text or updated your blog post. Obviously, it's important to be loyal to your employer StepZen, but the role of Developer Relations is to communicate and distribute accurate knowledge, not misinformation guided by a paycheck or personal opinions. Overall, it's concerning to see this from people educating the developer community. Even David recommended another library in his response on Reddit, stating that for certain use cases that was a better choice. Integrity is everything in the dev community, we shouldn't be bringing sales/marketing-style tactics into the space. When you change jobs and move to another company, this accumulation of misinformation becomes like technical debt and ultimately affects your credibility.
Thanks for the response. Great to hear you’re happy with your tech stack. I’m sharing opinions and a video is a moment in time. For me it doesn’t matter if someone is using X, Y or Z to build a GraphQL API. All I know is at the moment a recorded the video the communication and documentation around this Apollo Server update was confusing as hell and I’m staying away from it. As I’m working in Developer Relations I’m helping the broader community to learn more around GraphQL and surrounding technologies. IMO there are easier/better ways to build GraphQL, and Apollo hasn’t kept the developer in mind much lately. In time, I might record another video that’s more positive on Apollo. I let the tech speak for itself and people should form their own opinions.
thanks, useful
i'm from Russian. Good video, thanks
Thanks for watching!
No te entiendo hahajsus
Gghsgwgegdgdhdhffhevvdvdvdvdbebdhsvavaksjsdhzjdjzvsbd🎉🎉😢😮😮😮😮😅😮😅😅😅😮😮
Amazing!
Thank you! Cheers!
You can actually turn on Auto format when you save a file which saves time.
That’s smart, I will do that for the next livestream 👍
One is a RPC format for service to service calls. The other is a client facing protocol. Are they really competing with each other?
Can I use typegraphql with apollo version 4? I notice whenever I install typegraphql with apollo version 4 there's an error.
With all the breaking changes in Apollo Server 4 I wouldn’t be surprised if this doesn’t work. Maybe try something like mercurius?
I heard that React can touch the DOM, which creates compatibility issues with React. Is this true?
React is using a virtual DOM, it’s not directly touching it. In my experience this has never led to compatibility issues
añ
i just found out they're deprecating apollo-server-express too.. wtf man.. now i've got to refactor my code .. this is frustrating as hell .. anyway thanks for sharing
Yes it’s quite extensive. I believe now is the best time to pack your bags and try a different GraphQL server implementation
well major releases often introduce major changes. You suggest graphql-yoga (among others) as an alternative. well i've seen a tutorial about setting up graphql-yoga from french channel techwall that was made in march 2021 and it's deprecated too, the code to setup the yoga server has completely changed since too. I haven't looked at express in yoga, but i just figure out it's the very same story.
Best overview of React I have seen so far until today 🙌 Great video, Roy!👏🙌
Appreciate that, thanks a lot Bruno!
🤔
Old but gold. What are you using for styling?
Just use tailwind 😉
Hehe. Have used Tailwind before but cannot say it’s easier then Bootstrap
🎉 I still use bootstrap for 😅 and I’m comfortable with it, Tailwind is hell at the moment
Yes!! I feel people take the hype and forget to look at the more stable tools that have been around for so long
I have two suggestions related to grid. First is important to follow, second is a preference. 1. Don’t put anything else other than column inside a row. Row adds negative margin to element, and column compensates it back with padding. This is done so you could have gaps between columns. So when you have anything else inside the row other than column, it will get out of grid. 2. Don’t put the column class inside the component, you make the component strictly tied to that specific row configuration, and it’s not reusable. Instead of Row Component Column Do Row Column Component
These are great tips, thank you! I feel like I only scratched the surface on the power of boostrap, so tips like these are definitely helpful 🙌
Really great video, Roy!👏It gives a deeper understanding of how React works how and webpack bundles JS under the hood. I look forward to your upcoming videos 😉
Glad you enjoyed it! And yes I will definitely create more content to teach fundamentals :)
@@gethackteam I would love to see one on React testing, especially when you have API calls and want to test those, as well as how they render in the UI, for example :)
@@brunocosta4889 yes I will cover these in the livestream of chapter 5 / 6. so hang on :)
We did a few platforms in GraphQL, hate it. So verbose and not TypeSafe. We're using tRPC for multiple platforms now, including for platforms without TypeScript like Flutter (Dart). Works great!
Nice! There’s something for everybody these days and I can see where one technology fits one company (and its developers) better than the other
Its typesafe if your generate your code from Schema. Which is what tRPC essentially does
The useEffect hook is used to handle side effects, either when the application mounts or when the state or a prop gets updated. This Hook takes two parameters, where the first one is a callback and the second one is an array containing all of the variables this Hook depends on. When any of these changes, the callback for this Hook will be called. When there are no values in this array, the Hook will only be called on the first mount. After the data is fetched from the source, the state will be updated with the results.
Great, you’re on the raffle list
Cool
Already have the book but thanks for the stream Roy
The dependency array is the square brackets in the useEffect hook. When any of the dependencies specified in the array change, the function is re-executed.
Added to the raffle list 👍
useEffect hook is for you to perform side effects in a React component, we have the dependency array to control when the effect should run
Thanks! Added you to the rafffle
useEffect hook is for you to perform side effects in reactjs component, we have the dependency array to control when the effect should run