Problem
General AI chat can feel too broad for a student's actual task, project and level.
Featured AI product · Functional prototype
StudyMate AI
A focused AI workspace for Multimedia Design students, combining specialised assistants, project context and clear interface states.
Target users
Multimedia Design students working with code, design, UX, exams and project planning.
My contribution
Product concept, UI design, frontend, backend structure, prompts and deployment preparation.
Technologies
HTML, CSS, JavaScript, Node.js, Express, OpenAI API, Markdown knowledge files and Cloudflare preparation.
Explore the product experience and the technical decisions behind the prototype.
01
The problem
Generic AI tools can give broad answers that feel disconnected from a student's current task. Students need focused support without writing a new role prompt every time.
Broad answers
A general chatbot does not automatically understand the subject, expected level or project context.
Too much setup
Students should not need to redefine a coding mentor, design critic or study coach in every conversation.
02
The solution
StudyMate combines six clear assistant roles, relevant project context and a calm workspace. The selected role shapes the support while the interface stays familiar.
Study Coach
Plans, explains and supports learning strategies.
Coding Mentor
Supports HTML, CSS, JavaScript, APIs and debugging.
Design Critic
Reviews hierarchy, visual choices and accessibility.
UX Researcher
Supports research, user journeys and testing plans.
Exam Coach
Challenges arguments and prepares project questions.
Project Manager
Turns project needs into priorities and manageable tasks.
03
User experience
The interface uses familiar chat patterns and makes assistant choice, system state and prototype limits visible before they become confusing.
Enter the demo
Continue without creating a real account.
Choose an assistant
Compare focused roles before starting.
Ask a question
Use a suggestion or enter a specific study task.
Follow the response state
See loading, success, error or an honest static fallback.
04
Testing and reflection
An internal walkthrough improved fallback copy and interaction clarity. External usability testing is still planned and is not presented as completed research.
Status: Planned — external testing has not yet been completed.
Planned test details
Objective and participants
Test with 3–5 Multimedia Design students whether they understand the assistant roles, complete the chat flow and recognise the static demo limits.
Tasks
- Explain the concept.
- Enter the demo and choose an assistant.
- Submit a realistic study task.
- Explain the static fallback.
Observe and measure
Record task completion, critical errors, moderator assistance, hesitation, wrong turns and participant comments.
Pending evidence
Findings and resulting design changes remain pending until the external sessions are completed.
What worked well
Focused assistant roles and visible states make the product idea easier to understand.
Biggest challenge
Balancing a simple interface with useful AI behaviour and honest prototype limits.
What I would improve
Run sessions with 3–5 students, strengthen context handling and test the server-backed deployment.
01
Current architecture
The browser controls the interface. A server-side route owns validation, assistant configuration, context building, the secret key and the OpenAI request.
- Student
Chooses a role and enters a study task.
- Interface
JavaScript manages selection and response states.
- Request
The frontend sends assistantId and the message to
POST /api/chat. - Protected route
Validates input and builds server-owned instructions.
- OpenAI API
Receives the prepared request from the server.
- Response state
Renders success, error, retry or static fallback.
02
Assistant and prompt flow
The user chooses a visible assistant. The server then combines that role with internal instructions, relevant context and the current message.
Role selection
A stable assistant ID maps to a focused support role.
Context matching
Relevant Markdown excerpts are selected with weighted phrases and keywords.
Server build
The protected route combines role, context and message.
Interface feedback
The frontend communicates progress and failure clearly.
03
Knowledge Base and project context
The local prototype uses understandable Markdown files and weighted matching. It is not semantic search and can miss useful context.
Current prototype
Local Markdown content is selected through simple keyword and phrase weighting.
Honest limitation
There are no embeddings, semantic retrieval or production database in the current version.
04
Security, limitations and next step
The API key stays server-side, but deployment protection is still prototype-level. Cloudflare testing, stronger abuse controls and real user validation remain unfinished.
Public demo
GitHub Pages shows the complete interface with static fallback responses.
Local server version
Express can send protected OpenAI requests when a local environment key is present.
Planned MVP direction
Validate Cloudflare deployment first, then evaluate Supabase for accounts, stored projects and controlled context.
LG Bio Capital Partners
Client website · Content hierarchy and frontend