Building an AI-Powered College Application Assistant with Vue3 and Python

The project builds an AI‑driven college application assistance system that interacts via natural language using the Tongyi Qianwen model to recommend majors and universities for high‑school students.

Core Requirements

Vue 3 frontend with a user‑friendly form for personal data (name, gender, ID, province, exam score).

Python backend (FastAPI or Flask) that calls the Qwen 3‑Coder‑Plus model via the DashScope OpenAI‑compatible API to generate recommendation results.

Display detailed major information (prospects, salary, demand).

Responsive design for mobile devices.

Optional Supabase integration for persisting user submissions.

Pre‑setup

Obtain a MasterGo Enterprise account to access DSL.

Configure MasterGo MCP with a personal token using npm:

{"@master/mastergo-magic-mcp": {"command":"npx","args":["-y","@mastergo/magic-mcp","--token=YOUR_TOKEN","--url=https://mastergo.com"]}}

Configure Supabase MCP on Aliyun with an access token (see https://help.aliyun.com/zh/analyticdb/analyticdb-for-postgresql/user-guide/supabase-mcp-use-guide) and add to package.json:

{"supabase": {"command":"npx","args":["-y","@aliyun-supabase/mcp-server-supabase@latest","--features=aliyun","--read-only"],"env":{"ALIYUN_ACCESS_TOKEN":"ACCESS_KEY_ID|ACCESS_KEY_SECRET"}}}

Progressive Development Steps

Step 1: Design Draft

Use MasterGo AI to generate frontend mockups based on a prompt such as “students input name, gender, ID, province, and exam score; the model outputs personalized college and career suggestions.”

Step 2: Frontend Implementation

Develop two Vue 3 pages (Composition API + Vite):

Application Information Submission page – design link: https://mastergo.com/file/167266857969601?fileOpenFrom=project&page_id=M&layer_id=1%3A0

Recommendation Consultation page – design link: https://mastergo.com/file/167266857969601?fileOpenFrom=project&page_id=M&layer_id=14%3A004

Structure the project as:

collegeApplication/
├── frontend/
│   ├── src/
│   │   ├── views/   # page components
│   │   ├── router/   # routing config
│   │   ├── App.vue
│   │   └── main.js
│   ├── package.json
│   └── vite.config.js
├── backend/
│   ├── controllers/
│   ├── services/
│   ├── models/
│   ├── app.py
│   └── requirements.txt
└── README.md

Step 3: Backend Service (Agent Mode)

Create a FastAPI (or Flask) service that receives the form payload, calls the Qwen 3‑Coder‑Plus model, and returns the recommendation. Example client code:

import os
from openai import OpenAI
client = OpenAI(api_key=os.getenv("DASHSCOPE_API_KEY"), base_url="https://dashscope.aliyuncs.com/compatible-mode/v1")
completion = client.chat.completions.create(
    model="qwen3-coder-plus",
    messages=[
        {"role":"system","content":"You are a helpful assistant."},
        {"role":"user","content":"请编写一个Python函数 find_prime_numbers..."}
    ]
)
print(completion.choices[0].message.content)
print(completion.usage)

Step 4: Data Persistence

Insert submitted fields (name, gender, age, education, major, application category, etc.) into Supabase via the backend. Use the Supabase client library or direct HTTP calls with the service role key.

Running the Project

Frontend: cd frontend && npm install && npm run dev Backend:

cd backend && pip install -r requirements.txt && uvicorn app:app --reload

These steps enable a complete AI‑enabled college application system with a clear separation of concerns, responsive UI, and optional persistent storage.