🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 09月23日

EduBox - 人工智慧學生中心

這是KendoReact 免費元件挑戰賽的參賽作品。

TLDR；針對在職專業人士

生活總是一團糟：截止日期變來變去，任務堆積如山，校園生活也充滿了你意想不到的變數。 EduBox 致力於平衡－讓一切盡在掌控，讓你事半功倍，少擔心。無論你是被日程安排壓得喘不過氣的大一新生，還是忙於多項事務的大四學生，EduBox 都能幫助你保持最佳狀態，避免精疲力竭。

我建造了什麼

我建立 EduBox 是因為我厭倦了學生時代在無數不同的應用程式和工具之間來回切換。你懂的——筆記散落在 Google Drive 上，作業記錄在某個隨機的電子表格裡，校園活動你只是偶然聽說，而且總是擔心錯過截止日期。所以我建立了這個智慧學生中心，將所有東西整合到一個地方。

EduBox 利用人工智慧幫助學生保持井然有序，掌控學習生活。它具有支援語義搜尋的智慧型檔案管理功能（方便您在需要時輕鬆找到筆記）；智慧規劃器可以學習您的學習習慣，幫助您避免臨時抱佛腳；校園生活中心讓您隨時了解社團和活動；甚至還有一個人工智慧助手，可以回答您關於學習材料的問題，並建立新的作業/學習課程等——這一切都歸功於工具呼叫。它就像擁有一位真正了解您學習內容的私人學術組織者。此外，它還擁有人工智慧內容生成、Markdown 快速編輯器（感謝 Kendo）、學習助理、海量上下文儲存空間、資料匯入/匯出功能以及您的個人資料管理空間。

技術棧（高級）：

前端：Next.js + TypeScript，使用 Tailwind 設計以實現快速回應、可存取的 UI。
身份驗證：負責安全使用者登入和設定檔的職員。
同步/儲存：Convex 用於即時同步和簡單的無伺服器資料操作。
人工智慧與代理：使用 CopilotKit 建立的多代理編排、使用工具透過 Vertex/Gemini 託管的 LLM，以及 Kendo RAG（檢索增強生成）以在使用者筆記和文件中建立模型答案。
UI/UX 元件：KendoUI - 支援的小部件，可加速開發。
部署：前端 - Vercel 設置，後端 - 渲染，兩者都具有密鑰和提供者的環境驅動配置。

還需要更多嗎？看看這個應用程式——它肯定有更多功能，我一直在努力實現它 :)

示範

這個演示太瘋狂了，我預感它會出錯 [但並沒有出錯，很高興]： YouTube 上的演示影片

該應用程式已在 vercel網站上線：

以及原始碼：原始碼

注意：由於目前處於試用階段，某些功能可能已停止在部署中使用。在這種情況下，請嘗試使用您的 .env 檔案和本機環境。

截圖[部分是在開發過程中拍攝的]

登陸頁面

帶有 threejs 元件的漂亮登陸頁面

登陸頁面

儀表板和概覽

儀表板概述

學業進度追蹤和分析

分析儀表板

使用者設定檔和設定

個人資料頁面

人工智慧助理和聊天

AI助理家庭介面

AI聊天主頁

與擁有工具的人工智慧助理對話

AI聊天會話

人工智慧輔助學習

人工智慧學習助手

AI內容生成功能

內容生成

搜尋與RAG

檢索增強生成用法

RAG 演示

NucliaDB 中的知識庫和文件處理

RAG 資料庫

計劃與日程安排

智慧規劃與進度管理

規劃中心

文件管理

文件組織和管理介面

文件中心 1

進階文件操作和搜尋

文件中心 2

資料導入和匯出功能

進口/出口

後端服務

Nuclia 文件同步服務

後端同步

Convex即時資料庫管理

凸資料庫

計費和功能門控系統示意圖

示意圖計費

附加功能

進階功能存取控制元件

鎖定功能

使用的 KendoReact 元件

我為 EduBox 傾盡了所有 KendoReact 元件！以下是我使用的元件：

KendoReact 按鈕- 這些按鈕為我的所有 UI 按鈕提供了專業、精緻的外觀和流暢的波紋效果
KendoReact Indicators - 我在整個應用程式中放置了完美的載入器，用於那些「請等待」的時刻
KendoReact PDF - 輕鬆將分析報告匯出為 PDF
KendoReact 進度條- 非常適合在檔案管理部分顯示上傳進度
KendoReact Ripple - 為按鈕、開關、下拉式選單加入了令人滿意的漣漪效果 - 讓一切感覺更具互動性
KendoReact ScrollView - 透過允許我加入無限滾動的螢幕截圖部分，使登陸頁面更加美觀
KendoReact Sortable - 實現拖放功能來組織文件
KendoReact Taskboard - 圍繞此建立了整個規劃器介面
KendoReact Upload - 處理所有檔案上傳
KendoReact 編輯器- 當學生需要格式化筆記時，提供豐富的文字編輯功能
Kendo 主題預設- 讓兩個主題中的元件配色方案轉換過於容易

這些元件為我節省了大量時間，並且使 UI 看起來比我從頭開始建立一切更加專業。

使用 Kendo AI 編碼助理實現更聰明的編碼

哇，Kendo AI Assistant 簡直是 EduBox 開發過程中的轉捩點！在整個開發過程中，我多次將它用作我的 AI 程式設計助理。它不僅僅是幫我寫程式碼，它還成了我的程式夥伴，幫助我思考問題並實施解決方案。

以下是它對我的幫助：

元件建立簡直太瘋狂了：它真的可以在幾秒鐘內建立一個非常非常複雜的元件。我當時被困住了——我有個想法，想走「Highway」的路，創造一個邏輯稍微複雜一點的 React 元件，來打造我理想中的使用者體驗。結果我諮詢了 Kendo AI，出乎意料的是，答案竟然只是簡單的「可排序」。這確實是我想要建立的元件，Kendo 已經有了，但這個 AI 助理讓整合變得非常簡單。它幫我省了好幾次事。它幫我建立了複雜的元件，並建立了 TypeScript 介面。
偵錯夥伴：當我遇到前端元件和頁面與各種 AI 服務和資料擷取的整合問題時，它幫助我辨識並解決問題
架建置議：它為我組織現有元件結構以及如何將所有這些不同的服務與 Kendo 元件整合提供了很好的建議

人工智慧助理尤其有助於：

製作複雜的元件並處理適當的資料方法
修改現有元件以新增使用者體驗
設定多服務架構
使用適當的 TypeScript 類型建立響應式 UI 元件
優化元件效能

如果沒有 Kendo AI Assistant，這個專案可能會耗時更長，而且可能還會有更多 bug。快速挑戰 - 盡可能多地查找 bug 並提出問題

Progress/Kendo NucliaDB RAG 集成

我整合了 Nuclia RAG 作為 EduBox 搜尋功能的大腦，它徹底改變了學生與學術資料的互動方式。學生現在可以自然地提問，並根據自己的文件獲得智慧答案，而不僅僅是關鍵字搜尋。你可以詢問你的照片、聊天記錄、作業、文件、內容、日程安排、餐飲、活動——幾乎任何內容。你會得到答案 + 你會得到來源 + 所有內容都會透過他們的同步 API 持續更新 + 驚人的檢索速度。真是太棒了，他們創造瞭如此實用的服務，雖然正式版可能很快就會上線——目前還在試用階段。

整合主要有兩個部分：

後端服務：我建立了一個自訂的 Node.js 服務來處理所有文件處理。它會自動為每個使用者建立個人化的知識庫，在背景執行檔案上傳處理，並提供乾淨的 API 端點供前端使用。它會將您的使用者上下文同步到 NucliaDB，NucliaDB 會對其進行操作，以便向量化、尋找相似性等等。我們可以使用他們的小工具進行查詢，而回應產生則透過 ChatGpt + Azure 模型進行，就我而言——他們的網站上有很多選項。超酷，超簡單。

前端整合：Nuclia 有一個彈出式搜尋元件，它本質上是一個由 Nuclia 本身提供的搜尋元件（更像是一個小元件），可以請求 Nuclia 以語義方式搜尋使用者的所有文件。當您上傳 PDF 或文件時，它會立即被索引，以便您立即進行搜尋。人工智慧可以從您的資料中提取相關訊息，並根據上下文給出合適的答案。當 userContext 的雜湊值發生變化時，前端會觸發後端請求。然後，後端透過 Nuclia API 進行同步。

這款應用程式的特別之處在於，學生可以提出諸如「我的微積分筆記的重點是什麼？」或「查找下週作業的相關資訊」之類的問題，並根據他們自己上傳的資料獲得準確且實用的解答。這就像擁有一位了解你所學或想要學習的所有內容的人工智慧導師 :|

整個設定也確保了隱私 - 每個用戶在 Nuclia KB 中都有自己的雜湊值，因此他們的學術材料保持私密和安全。

EduBox 的下一步是什麼－AI 學生中心

改進了入職和初始設定流程，以便新用戶可以快速從 obsidian/notion/joplin 等軟體匯入筆記並看到價值。
諸如 Google 日曆、iCal、Canvas/Blackboard 等連接器，用於雙向同步和成績/任務提取。 Zoom 和 Gmeet 整合、Youtube API 整合以及 GDrive 商店整合。
行動優先優化（PWA 或原生客戶端）和可存取性改進。
插件/連接器系統，方便第三方新增資料來源或自訂代理行為。顯然難度較低，現在也可以實現，但可能需要架構上的調整，例如建立網關和相互依賴關係。

附加資訊：

架構圖[非常進階]

圖片描述

專案結構[非常簡單]

EduBox/
├── frontend/                
│   ├── app/                  # App Router pages and API routes
│   ├── components/           
│   │   ├── schematic/       # Schematic billing components
│   │   └── ui/              
│   ├── convex/              # Convex database schema and functions
│   ├── lib/                 # Utility libraries
│   ├── hooks/               # Custom React hooks
│   └── types/               # TypeScript type definitions
├── backend/
│   └── nuclia-sync/         # Nuclia document sync service
└── README.md