Build an AI Study Buddy (AJAX)

Free Review to certify

Build an AI Study Buddy (AJAX)

Design a thinking coach persona, build a chat webpage, call an AI API via AJAX + local proxy, then reflect. In class we use DeepSeek as the example provider.

Skills you'll learn

API integration fetch / AJAX Prompt design PHP proxy Error handling

~120 min · +50 pts

Build a learning companion that asks guiding questions and helps you think — not just dump answers.

You will:
1) Get an AI API key (in class we walk through DeepSeek: https://platform.deepseek.com/sign_in — other OpenAI-compatible providers also work if you adapt the proxy)
2) Write a Socratic study-buddy persona
3) Build a webpage that chats via AJAX through a tiny local proxy (never put the key in front-end JS)
4) Test, revise, submit reflection for an e-certificate

Starter pack (DeepSeek example wired in): /assets/templates/study-bot-deepseek/

Submit: persona + 3 test Q&As + what you revised (120+ chars), optional demo link (no keys in public repos).

Environment setup (start here)

Needs PHP on your machine. Windows: XAMPP is the easiest. Mac: built-in PHP or MAMP.

PHP required

Pick your OS and follow from step 1:

Windows macOS

1) Install XAMPP: https://www.apachefriends.org/ → install to C:\xampp
2) Open XAMPP Control Panel → Start Apache (green).
3) Copy study-bot-deepseek folder to C:\xampp\htdocs\study-bot\
   (You should have …\htdocs\study-bot\index.html and proxy.php)
4) Copy config.example.php → config.php, paste your AI API key.
5) Browser: http://localhost/study-bot/
6) Send a test message — Network tab should show proxy.php returning JSON.

Option A — built-in PHP (quick):
1) cd ~/Documents/study-bot-deepseek
2) cp config.example.php config.php → add API key
3) php -S localhost:8080 in that folder
4) Open http://localhost:8080/

Option B — MAMP:
1) Install MAMP → put folder in htdocs/study-bot → Start servers → http://localhost:8888/study-bot/

How do I know it worked?

Chat UI loads; a message returns an AI reply (not “config missing” or CORS error).

Common issues

404 → check folder name under htdocs matches URL. 500 on proxy.php → open config.php path and API key. Never put API keys in app.js or public GitHub repos.

Starter pack

Download into XAMPP htdocs, copy config.example.php → config.php with your AI API key. Browser AJAX hits the local proxy (DeepSeek is the in-class example).

Preview index.html app.js proxy.php config.example.php styles.css README

In-class example provider: platform.deepseek.com · /assets/templates/study-bot-deepseek/