A streaming chatbot that answers from a business's facts or a set of documents, with cost and safety limits.
The project for module 6, AI features, deployment and jobs. It proves: ai integration, streaming, cost control and production deployment.
Choose one theme, or your own idea. Same skills, but your portfolio won't look like everyone else's.
Chat with a PDF that cites the page of each answer
Support bot for a made-up shop that answers from its FAQ
Study helper that quizzes you on your own notes
Two short builds that practise the skills this project needs. About 3.5 hours in total.
One API route that streams an AI answer, with input and cost limits.
Done when: The key never reaches the browser, and long or empty questions are rejected.
Turn your best project into something a recruiter or client understands in 2 minutes.
Done when: A non-developer friend can explain what your project does after watching.
7 steps in order. Each one ends with a clear check, so you always know when to move on.
Create a Next.js route handler that calls the AI API. Store the key in .env.local only.
Done when: Searching your browser's page source and network tab never shows the key.
Only read process.env.OPENAI_API_KEY in server files. Add the server-only package to make leaks a build error.
Stream the model's reply to the page word by word.
Done when: Text appears as it's written, not all at once after a wait.
Return a ReadableStream from the route and read it with response.body.getReader() in the browser.
Let users stop a long answer and retry a failed one.
Done when: Stop ends the stream right away and Retry sends the last question again.
Pass an AbortController's signal to fetch, and call abort() on Stop.
Put your facts or document chunks in the system prompt and tell the model to say "I don't know" otherwise.
Done when: Asking something outside your facts gets "I don't know", not a made-up answer.
Set temperature to 0 and keep a list of 5 test questions, including 2 that shouldn't be answered.
Validate input length, cap max_tokens, and rate limit each visitor.
Done when: Sending 50 requests fast gets blocked after your limit.
Also set a monthly budget in your AI provider's dashboard. Code limits can fail, a budget can't.
Optional: split a PDF into chunks, embed them, and send only the closest chunks to the model.
Done when: Answers come with the page number they came from.
Compare your build with the reference project below once yours works.
Deploy on Vercel with the key as an environment variable, and write a README with a Security section.
Done when: The live chatbot works on your phone.
Show the rate limit and the "I don't know" answer in your demo video. It proves you thought about real users.
Tick each one when it's done. Saved to your account.
Optional. One of these makes your project stand out from the tutorial version.
Free APIs, tools and docs for this project.
DocChat: AI PDF chatbot (Next.js + OpenAI, RAG)
Build your own version first. Then open this to compare how a finished app handles the same problems, and borrow ideas.