AI Frontend · Exercise 5 of 5 Previous
Intermediate
Mini Mitra
Build a small Mitra in React. The route /api/chat is ready: it streams an answer to { question }, and it crashes (status 500) if the question contains the word crash.
Requirements: a text input #prompt, a button #send and a paragraph #answer. #send is disabled when the input is empty or only spaces, and while an answer is on its way. Submitting sends the question and streams the answer into #answer.
If the response is not ok, show Mitra could not answer. Please try again. in an element with id error, and make sure the form can be used again afterwards.
What Check tests
- With an empty input,
#sendis disabled - With only spaces typed,
#sendis still disabled - After typing a question,
#sendis enabled; while the answer is on its way it is disabled again - The answer streams into
#answer - A question containing
crashshows the error message in#error - After the failure the form works again
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.