A natural language interface lets users interact with an AI application through questions and replies rather than only buttons or menus. A text chat is the starting point: users type a question, read the response, and ask follow-ups. Voice input and spoken answers can extend the same conversational experience. section 2.0 section 1.2.1
A basic chat interaction has four moving parts:
- The interface accepts a question and displays the conversation history. section 2.2.1
- The backend receives the question and sends it, with relevant context, to an AI model. section 2.2.1
- The backend processes and verifies the model response before returning it to the interface. section 2.2.1
- The interface adds the reply to the message list, allowing the user to continue. section 2.2.1
Listing 3.6 useChat example
import { useChat } from 'ai/react'; #1
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit} =
useChat({ api: '/api' }); #2
return (
<div>
<Messages data={messages} />. #3
<form onSubmit={handleSubmit}>
<input
value={input}
placeholder="Ask me something..."
onChange={handleInputChange}
/>
</form>
</div>
)
}
This React example uses the Vercel AI SDK’s useChat hook to connect an input form to an API and render messages. The hook manages chat input, message state, and streamed updates, avoiding manual assembly of response chunks. section 3.2.2
Small interface details matter during generation: show a loading indicator while the model responds, then bring the latest message into view. Keep backend processing between the browser and model so responses can be processed before display. section 2.3 section 2.2.1
Interview practice
A chat-based interview asks questions, accepts answers, and uses earlier exchanges to make follow-ups coherent. Users can optionally hear questions through text-to-speech and close the session when finished. section 10.1.1
Questions about documents
A knowledge-base chat lets authenticated users ask questions about uploaded PDFs and DOCX files. Answers are grounded in those documents through retrieval, rather than treating the chat window as the whole application. section 11.1.1 section 11.4
