Smartsis MCP

SMK Smart SIS — Sistem Informasi Sekolah dengan AI

Asisten AI berbasis Model Context Protocol (MCP) untuk manajemen data SMK, termasuk kehadiran siswa, tagihan SPP, keuangan, dan profil siswa. Data diambil langsung dari database MySQL melalui MCP tools dan disajikan via chat AI (Ollama).

Arsitektur

Browser (React)  ←→  Express Backend  ←→  Ollama LLM
                          ↕
                     MCP Client (stdio)
                          ↕
                     MCP Server (11 tools)
                          ↕
                       MySQL DB

Fitur

• Chat AI — Tanya jawab natural language ke database sekolah
• 11 MCP Tools — rekap kehadiran, tunggakan SPP, profil siswa, dashboard eksekutif, dll.
• Markdown Rendering — Tabel, heading, list, code block, blockquote, link
• WhatsApp Links — Tombol WA otomatis untuk kontak orang tua
• Export PDF & Excel — Setiap tabel memiliki tombol download PDF/Excel
• Chart Visualisasi — Bar, Line, Pie chart otomatis untuk data numerik
• Notifikasi Tunggakan — Bell icon dengan polling otomatis
• Chat History — Disimpan di localStorage, persist saat refresh
• Multi-session — Buat banyak percakapan paralel

Prasyarat

• Node.js ≥ 18
• MySQL dengan database smksmartsis
• Ollama running di http://localhost:11434

Instalasi

git clone 
cd smartsis-mcp
npm install

Konfigurasi

Buat file .env (opsional):

PORT=3000
OLLAMA_MODEL=gpt-oss:120b-cloud
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=Sxxxxx25
DB_NAME=smksmartsis

Menjalankan

# Build frontend
npm run build:frontend

# Jalankan backend (otomatis spawn MCP server)
npm run start:backend

Buka http://localhost:3000 di browser.

Development

# Frontend dev server (hot reload, proxy ke :3000)
npm run dev:frontend

# Backend
npm run start:backend

Struktur Proyek

├── src/
│   ├── backend.ts        # Express server + MCP client + Ollama
│   ├── mcp-server.ts     # MCP Server dengan 11 database tools
│   ├── db.ts             # MySQL connection pool
│   └── types.ts          # Shared TypeScript interfaces
├── frontend/
│   ├── index.tsx          # React app utama (~1600 baris)
│   ├── main.tsx           # React entry point
│   ├── App.tsx            # App wrapper
│   ├── index.html         # HTML template
│   └── index.css          # Tailwind import
├── frontend-dist/         # Vite build output (gitignored)
├── vite.config.ts
├── tsconfig.json
└── package.json

MCP Tools

Lisensi

MIT