Extend UI: 現代文件應用程式的開源 UI Kit

Extend UI 是一款專為現代文件應用程式設計的開源 UI kit，提供了一套專門的組件來處理複雜的文件類型和文件工作流。它允許開發者將專業級的文件檢視器和文件管理工具整合到面向用戶的流程、AI agent 或內部管理工具中，而無需從頭開始構建這些高摩擦力的介面。

Specialized Document Viewers and Components

Extend UI 提供了一套高階組件，用於處理各種文件格式的渲染和互動。這消除了將文件轉換為 PDF 的伺服器端轉換需求，而這通常是缺乏原生渲染庫的開發者所採用的常見備案。 \n### Supported File Formats

  • PDF Viewer: 渲染 PDF 文件的專用組件。
  • DOCX Viewer: Microsoft Word 文件的原生渲染。
  • DOCX Editor: 用於編輯 Word 文件的區塊。
  • XLSX Viewer: 用於檢視 Excel 試算表的組件，包括支援跨工作表和儲存格範圍的搜尋功能。

Workflow and Management Tools

  • File System: 用於管理和導覽文件的組件，包括支援 "Miller columns"（一種多欄位瀏覽介面）。
  • Schema Builder: 用於定義數據結構和屬性鍵值的工具。
  • File Upload: 用於文件攝取（file ingestion）的專用拖放區。
  • File Thumbnail: 文件系統內文件的視覺預覽。
  • E-Signature: 用於處理電子簽名的整合式組件。

Advanced Document Interaction Features

Extend UI 包含專為 AI 原生工作流設計的專用區塊，例如 bounding box citations。這些功能允許應用程式高亮顯示文件中的特定區域，為 AI 生成的答案提供證據，這是將 AI agent 錨定在來源文件中的關鍵功能。

Technical Implementation and Community Feedback

Extend UI 是以 React 組件集的形式構建的。雖然這為 React 開發者提供了深度的整合，但一些社群成員指出，框架支援的多樣性不足（例如，缺乏 web components）限制了其對使用其他技術棧的開發者的可及性。

Performance and Usability Observations

使用者在高端硬體（例如 MacBook Pro M3 和 M4 晶片）上測試該庫時，回報了登錄頁面的效能問題，特別是在與 Schema Builder popover 等組件互動時會出現延遲和滯後。

Integration Insights

開發建構 AI 原生文件工具的開發者強調了此 kit 的實用性，用於將原生解析器（例如使用 Rust 撰寫的解析器）的輸出進行視覺化，而無需要求使用者開啟 Microsoft Word 或 PowerPoint 等外部軟體。

"We were looking to add DOCX and XLSX preview to our app, and were planning to do server-side conversion to PDF... and this is exactly what we were looking for!"

Current Limitations

  • Search Functionality: 一些使用者回報 Excel viewer 內部的搜尋功能無法如預期觸發，且瀏覽器原生的搜尋功能無法找到儲存格內的內容。
  • Mobile Compatibility: 報告指出登錄頁面在 mobile Safari 上可能無法載入。
  • Framework Lock-in: 目前該庫僅限於 React 生態系統。

Sources