An ultra-sleek, premium, offline-first workspace implementing Google Open Knowledge Format (OKF) architectures combined with Model Context Protocol (MCP) standards and advanced Agent-to-Agent (A2A) collaborative workflows.
Open Knowledge Studio serves as an autonomous, fully sandboxed intelligence workbench designed for field epidemiologists, system developers, and research teams operating under stringent data-privacy and low-connectivity environments.
This build has exactly two runtime npm packages: react and react-dom. Everything else that used to be a package -- Firebase (Auth + Firestore), @google/genai, recharts, marked, highlight.js, lucide-react -- has been replaced with first-party code that talks straight to the relevant REST API or renders its own SVG/markdown/icons. See 010-dependency-removal-notes.md for the full before/after and why each swap was made. npm install now pulls ~70 packages total (React + Vite/TypeScript build tooling), not the 300+ that shipped before.
- Split-Pane Real-Time Editor: Edit document contents in raw markdown on the left, and view beautifully typeset polish render states instantly on the right.
-
Math LaTeX & KaTeX Engine: Render equations in-line using single
$symbols or in display blocks using double$$syntax natively in real-time (e.g. reproducing epidemic models like$R_0 = \frac{\beta}{\gamma}$ ). -
Mermaid.js Diagrammer: Compile complex flowcharts, sequence diagrams, mindmaps, and system architecture topologies directly from codeblocks (
```mermaid) in live view. -
Dynamic Table of Contents (Outline): Automatically parse header trees (
h1,h2,h3) with deep ID anchors, supporting smooth scroll navigation inside a collapsible sidebar. - Multi-Format Export Engine: Download documents instantly as raw Markdown, JSON metadata structures, clean plaintext, or standalone, styled, printable HTML structures (with dedicated margin parameters perfect for field research printing).
- Model Context Protocol (MCP) Standards: Connect local code-runners, document ingestors, and tools seamlessly.
- Tunable Agent Memory Recall: Dynamically configure the sliding conversational turn history slider (from 2 to 30 turns) to manage prompt sizes and context engineering budgets.
- Plug-and-Play Skills Sandbox: Instantly assign targeted tools to agents, including:
- Web Grounding Search
- WASM JS Code Runner
- Mermaid Diagrammer
- LaTeX Math Solver
- WHO Field Ingestor
- MCP Desktop Sync
- Observability & Telemetry charts: Track A2A metrics using an interactive, first-party SVG charting layer (
components/charts/SimpleCharts.tsx) -- no charting library dependency. - Turn Metrics: Monitor individual agent execution times, response latencies, estimated token counts, and success flags.
- Consensus Benchmarks: Visualize latency curves and performance trends across design, security, and quality assurance agents.
- Unified Cloud Sync Hub: Sign in with Google Identity Services (no Firebase, no SDK) to instantly publish, synchronize, and exchange documents with your own Google Drive.
- Google Keep-style Notes: A high-fidelity local sandbox notes board with one-click conversion to workspace Markdown files (there is no public third-party Google Keep API, so this stays local-first for every account type).
- Drive Integration: Search, list, and download files from Google Drive, plus direct workspace document exports to
.md. - Docs, Sheets, and Slides Generators: Convert workspace documents into formal Google Docs, spreadsheet data structures (Sheets), or slide presentation files (Slides) instantly.
- Gmail & Tasks Mapping: Email active reports directly using the Gmail API, and map core action items as official Google Tasks.
- Onboarding Guideline Deck: Interactive step-by-step visual map inside the panel displaying OAuth credential states, active file nodes, and Google Cloud setup instructions.
- Offline-First Resilience: All configurations, logs, files, and prompts are backed up inside the browser's own client-side storage (
localStorage) as a local-first sandbox. - Autosave Control Deck: Automatically persists edits to the sandboxed storage every 5 seconds. Includes a UI toggle in the header to pause/resume auto-saving instantly.
- Cloud Sync Portal: Google Sign-In via Google Identity Services (no Firebase). When signed in, backs up to a JSON file inside your own Google Drive
appDataFolder-- your data, in your Drive account, not a shared third-party database.
- Role: Public health researcher, Cox's Bazar field office.
- Needs: Intermittent internet resilience, offline-first report generation, local RAG document ingestion, and mathematical modeling.
- Studio Solution: Amina drops WHO PDFs into the text ingestor, edits infection trends, plots spread metrics using KaTeX formulae, draws camp logistics with Mermaid flowcharts, and prints standalone report structures completely offline.
- Role: Full-stack developer, remote team.
- Needs: Modeling tool interfaces, local testing, telemetry benchmarking, and API gateway sequence visualizers.
- Studio Solution: Rafi runs collaborative agent debates to draft system specifications, tests JSON schemas, monitors execution speeds in the Telemetry Dashboard, and injects Model Context Protocol specs with a single click.
- Node.js 18+
- npm (or yarn/pnpm)
# Clone and open workspace
cd open-knowledge-studio
# Copy env template and fill in GEMINI_API_KEY (and optionally
# VITE_GOOGLE_OAUTH_CLIENT_ID for Google Workspace features) -- see SETUP.md
cp .env.example .env
# Install dependencies (react + react-dom + build tooling only)
npm install
# Start the local development server (bound to port 3000)
npm run devThe server binds exclusively to http://localhost:3000. Open the live URL to access the Studio. Full credential setup (Gemini key, Google OAuth Client ID) is in SETUP.md.