Problem
Students often use AI as one general chatbot, which can make answers feel generic and disconnected from the actual study task.
AI prototype
StudyMate AI
StudyMate AI is an AI study platform prototype built to explore how students can use specialized AI assistants instead of one generic chatbot.
Target group
Multimedia Design students who need practical help with coding, design, UX, exams and project planning.
My role
Product concept, UI design, frontend, backend structure, prompt design, documentation and deployment preparation.
Tools
HTML, CSS, JavaScript, Node.js, Express, OpenAI API, Cloudflare Pages Functions and GitHub.
Prototype status
Current prototype status
Static portfolio demo
The published GitHub Pages version demonstrates the interface, assistant selection and fallback states without pretending that the live AI backend is already deployed.
Server-side version prepared
The GitHub Pages version is a static fallback demo. A Cloudflare Pages Functions version is prepared so the real OpenAI API call can run server-side.
Production ready: no
This is not a finished SaaS product. It still needs final Cloudflare deployment, real AI testing, stronger long-term usage protection and more user testing.
Internal review
Internal walkthrough before external testing
Internal walkthrough
I reviewed the prototype myself with five user tasks: understand the product, continue as demo, choose an assistant, send an MMD task and start a new chat.
Internal observations
The product concept was clear, but the static GitHub Pages demo could sound like a technical error. Link-based questions were also confusing because the static demo cannot inspect external websites.
Changes after the walkthrough
I rewrote the fallback answer, added URL-aware guidance, made the user message bubble calmer and reduced the visual weight of copy actions.
Process
From chatbot idea to assistant system
1. Clear assistant roles
I changed the idea from one general chatbot into six focused assistants: Study Coach, Coding Mentor, Design Critic, UX Researcher, Exam Coach and Project Manager.
2. Product-like chat UI
I built a dashboard and chat flow with assistant selection, prompt suggestions, loading states, error states and calmer copy actions after reviewing the first version.
3. Honest portfolio scope
I kept the project realistic by using vanilla frontend code and a simple backend instead of turning it into an over-engineered SaaS platform.
Implementation evidence
How the prototype connects
Assistant choice
The frontend stores the selected assistant role and presents matching prompt suggestions.
API request
The message and assistant ID are sent to /api/chat without exposing an API key.
Prompt context
The backend combines the assistant role, connected skills and relevant local knowledge.
Response state
The interface shows either a server response or an explicit static fallback with its limits.
Evidence boundary: The flow is implemented in the repository. The public GitHub Pages demo remains static until the server-side Cloudflare deployment has been tested with a real key.
AI implementation
Protected API and assistant prompts
Frontend to backend
The frontend sends the selected assistant and user message to `/api/chat`. The frontend never contains the OpenAI API key.
Assistant data
Each assistant has a role, description, example questions and internal skill stack. This makes the AI feel more focused than a random chatbot.
Knowledge Base direction
The local version can load Markdown knowledge files, so the assistant can become more relevant to school projects and personal notes over time.
Security
Protecting the AI demo
API key protection
The OpenAI key is only used on the server side. It is not stored in frontend JavaScript and should never be committed to GitHub.
Usage limits
The backend includes message length limits, token limits and basic rate limiting to make the public demo safer to share.
Cloudflare preparation
The Cloudflare version is prepared so the public portfolio demo can use server-side functions instead of exposing secrets in the browser.
Testing
What has been checked
Internal flow check
I checked whether a new user can understand the product, enter the demo, choose an assistant, send a message and start a new chat on desktop and mobile.
Interface testing
I checked empty states, loading states, error states, static demo fallback text, copy actions, spacing and mobile layout so the prototype feels calmer and more product-like.
Planned external testing
The final Cloudflare deployment should be tested with a real OpenAI key and 3–5 external participants before I present it as a live AI demo to employers.
Usability testing plan
Can students understand and use the assistant system?
Status: Planned — external testing has not yet been completed.
Objective and participants
Test whether 3–5 Multimedia Design students or students familiar with digital study tools can understand the assistant roles, complete the main chat flow and recognise the limits of the static demo.
Tasks
- Explain what StudyMate AI is for.
- Enter the demo and select a suitable assistant.
- Submit a realistic study task.
- Start a new chat.
- Explain what the static fallback means.
Observe and measure
Record task completion, critical errors, moderator assistance, hesitation or wrong turns, and participant comments. Pay particular attention to assistant selection and whether the fallback is mistaken for a broken feature.
Pending evidence
Findings: Pending external sessions. Resulting design changes: Pending analysis of the completed test notes.
Result
What the project shows
The result is an AI study platform prototype with a usable frontend, structured backend routes and explicit deployment limits. The implementation shows how I connect product decisions, interface states and server-side API handling.
Next step: I would deploy the Cloudflare version, test `/api/chat` with a real OpenAI key and keep improving the Knowledge Base with more real project summaries.