"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Complete source code for this lesson is available at
You can find the prompts used in AI Integration here,
Generate a markdown-formatted response to the following question: "${question}".
Consider the provided context:
**Context:** ${content}
Also, prioritize and incorporate the user's answer when formulating your response:
**User's Answer:** ${userAnswer}
Prioritize the user's answer only if it's correct. If it's incomplete or incorrect, improve or correct it while keeping the response concise and to the point.
Provide the final answer in markdown format.`,You are a helpful assistant that provides informative responses in markdown format. Use appropriate markdown syntax for headings, lists, code blocks, and emphasis where necessary.
For code blocks, use short-form smaller case language identifiers (e.g., 'js' for JavaScript, 'py' for Python, 'ts' for TypeScript, 'html' for HTML, 'css' for CSS, etc.).
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
##Looks like we found a thief monkey By the way, I liked the trick how you reached till here. You have a good sense of humor. You will improve a lot if you join our course with this passion.
var (function-scoped, outdated)let (block-scoped, modern and recommended)const (block-scoped, cannot be reassigned)_, or $let let = 5; is invalid)myVar and myvar are different)string, number, boolean, null, undefined, bigint, symbolObjects, Arrays, Functions
Subscribing gives you access to a brief, insightful summary of each lecture to stay on track.
00:00:00 What we've done so far is pretty cool.
00:00:02 We have a question, and we have the ability to provide our human answer, or we can just let AI do the job for us.
00:00:11 Pretty soon, it spits up a response that seems to answer the asked question.
00:00:16 But we all know that AI models have their limitations.
00:00:19 They're trained on data from a particular year, which is actually a big limitation for a tech that is up and coming and changing every day.
00:00:28 So imagine asking AI the latest Next.js related question and generating an AI answer based off of the previous data.
00:00:35 It'll have no idea about the latest functionalities.
00:00:39 So, to address this issue, we'll provide more context to the AI by giving it our answer as well, and then AI will take our answer as well as the question
00:00:49 and combine it with all of its knowledge to form a nice answer in return.
00:00:54 We can start by first modifying our validations.ts to include a new parameter which will carry the user's answer.
00:01:02 so right below I'll say user answer and I'll make it equal to z.string and also I'll leave it as optional because we don't have to provide an answer but
00:01:14 it's always welcomed because imagine if we didn't take the user answer into account everybody will be just going around and just clicking generate answer
00:01:24 generate answer generate answer And as I said, we'll be full of this AI slop as the answers instead of meaningful human generator responses.
00:01:33 Now that we've modified the validation, we also have to head into the route.ts.
00:01:39 specifically the AI answers route.
00:01:42 Alongside the question and the content, we can now also pass the user answer and we can modify our prompt just a tiny bit.
00:01:50 I'll provide the entire modified prompt right below this lesson so you can copy it.
00:01:54 Basically, the object you have to put into the generate text to generate it properly.
00:02:00 Alongside taking into account the question, as well as the content of that question, we will also prioritize and incorporate the user's answer when formulating
00:02:11 your response.
00:02:12 And actually, it'll not come here from the save parse, but rather through the request JSON, as we can pass it immediately.
00:02:19 So I'll say user answer right here.
00:02:22 Great.
00:02:23 Prioritize the user answers only if it's correct.
00:02:26 If it's incomplete or incorrect, improve it or correct it while keeping the response concise and to the point.
00:02:33 Provide the final answer in markdown format.
00:02:36 And for the system, of course, you had what we had before, which is that you are a helpful assistant.
00:02:42 And then we give it some more information on how to properly format the marked out answers.
00:02:47 Then we can head into our API.ts file, where we have this AI get answer.
00:02:54 And the only thing we have to do is also pass an additional prop or param of userAnswer to the request we're making.
00:03:02 And of course, we'll get it as a param right here at the top to the getAnswer function, userAnswer of a type string.
00:03:10 And we can leave it as optional.
00:03:12 Finally, we can head back into our answer form.
00:03:16 And when generating an AI answer, after we set is AI submitting to true, we can also store the answer written by the user for more context to feed to AI
00:03:27 by saying const user answer is equal to editor ref dot current question mark dot get markdown.
00:03:37 So we'll get the current value of the form, and then we can pass that user answer as the prop as we have declared in our validations.
00:03:46 That's the only thing you have to do.
00:03:47 We have basically augmented our AI answer with the user answer as well by modifying the prompt that we pass into it and feeding it with a bit more data.
00:03:58 And that's it.
00:03:59 And now if we go into this, how the data renderer component works, of course, it'll spit up some general stuff about the data renderer.
00:04:06 But what if we could provide it with our own code to make the explanation that much more detailed?
00:04:13 Let me show you how that would work.
00:04:15 I'll head into our code and here we have the data renderer component.
00:04:20 I'll copy it.
00:04:21 And within the answer, I'll say, here is the code for the data renderer.
00:04:27 Based on that code, we can explain how it works.
00:04:34 and I'll paste the entire code.
00:04:35 And now I'll click generate AI answer.
00:04:38 And you'll see that the answer we're going to get back from the AI will be significantly more precise and detailed and exactly the answer that this specific
00:04:47 user was wondering about.
00:04:49 Let's give it some time to think.
00:04:51 And here we are.
00:04:54 Understanding the data renderer component.
00:04:56 It's a component in React designed to handle different states.
00:04:59 This specific one accepts the following props.
00:05:02 Here is the rendering logic.
00:05:04 If the success prop is false, the component will render a state skeleton.
00:05:08 If we have the empty state, then this, and finally it'll render the data, and then it gives a summary.
00:05:14 So let's post an answer, and it'll appear right here.
00:05:18 Beautiful.
00:05:20 So I hope this makes sense.
00:05:21 Instead of filling our platform with AI slop, which means just AI-generated content, now we allowed users to actually provide valuable responses to the
00:05:33 questions they know the answer is for and then allow the AI to enhance their answers and just structure it in a more readable way.
00:05:41 With that in mind, I'll say enhance users' answers with AI, or rather implement enhance users' answers with AI feature.
00:05:56 commit and sync.
00:05:58 And with that, I would now call this the real use case for AI.
00:06:02 Not just letting it run loose and answer whatever it wants, but rather taking into account our feedback on how to properly structure the response.
00:06:10 Which brings us to the end of the AI answer functionality.
00:06:14 Great work.
