MDLR Framework Documentation

Getting Started

Introduction

MDLR Reviewer is an open-source framework that transforms unstructured feedback—notes, comments, and ideas—into real-time, actionable insights. Whether you're managing personal notes or coordinating feedback on collaborative projects, MDLR adapts to your workflows.

---

 

Key Features

• Real-Time Summaries: Use AI to summarize feedback or notes dynamically. Example: "Summarize feedback related to Site A."
• Modular Components: Includes packages for project management, notes visualization, and AI-powered summaries.
• Flexible Integration: Works seamlessly with Supabase, 2D/3D canvases, or project boards.
• Project Organization: Group notes and comments into project-based "buckets."

---

 

Packages

1. Project Package (@mdlr/project)

   Manage project notes, integrate with Supabase, and generate AI-powered summaries.

2. UI-Kit Package (@mdlr/ui-kit)

   Provides ready-to-use React components for notes, summaries, and UI panels.

---

 

Getting Started

1. Installation

Install MDLR packages via npm or yarn:

npm install @mdlr-reviewer/project @mdlr-reviewer/ui-kit
Copy

---

 

2. Setup Example

Below is an example of setting up MDLR in a Next.js/React app.

 

a. Supabase Initialization

Ensure you create a Supabase table for summaries named summaries with the following schema:

Column	Type	Notes
id	int8	Primary Key
project_id	uuid	References Project ID
prompt	text	User-provided prompt
title	text	AI-generated title
content	text	AI-generated summary
created_at	timestamp	Default: now()
updated_at	timestamp	Optional, for updates

 

b. Integrate MDLR with Supabase and the Summary API

import React from "react";
import { Project } from "@mdlr-reviewer/project";
import { Panel, NotesPanel, SplitPane } from "@mdlr-reviewer/ui-kit";
import { createClient } from "@supabase/supabase-js";

// Initialize Supabase
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL || "",
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || ""
);

// Initialize Project with API endpoint
const project = new Project("project-123", {
  supabase: { client: supabase },
  summaryEndpoint: "/api/generate-summary", // Backend endpoint for summaries
});

// Add initial notes
project.addNotes([
  { id: "1", content: "Review management tasks", author_id: "1", author_username: "John Doe", created_at: "2023-10-01" },
  { id: "2", content: "Update timelines for Site A", author_id: "2", author_username: "Jane Smith", created_at: "2023-10-01" },
]);

// App Component
const App = () => (
  <SplitPane>
    <Panel project={project} />
    <NotesPanel project={project} />
  </SplitPane>
);

export default App;
Copy

 

c. Backend API for Summaries

In /pages/api/generate-summary.ts, create a backend endpoint:

// pages/api/generate-summary.ts
import { NextApiRequest, NextApiResponse } from "next";
import { GenResultService } from "@mdlr-reviewer/project";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { notes } = req.body;

  const genResultService = new GenResultService({
    apiKey: process.env.CHATGPT_API_KEY || "", // Replace with your OpenAI key
  });

  try {
    const summary = await genResultService.generateSummary(notes);
    res.status(200).json({ summary });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}
Copy

 

Use Cases

Personal Notes

Use MDLR to organize and generate summaries from scattered, unstructured thoughts.
For example:

“What are the recurring themes in my journal this week?”

 

Collaborative Work

MDLR helps teams summarize feedback from design reviews, brainstorming boards, and project management workflows.
Example prompt:

“Summarize unresolved comments about the electrical plan.”