🧠 Structured AI Knowledge Builder

Transform any topic into structured, grounded, and reusable knowledge. An AI-powered synthesis pipeline that converts a single topic into curated learning modules, tailored personas, and pixel-perfect PDF reports.

🚀 Overview: Why I Built This

Large Language Models are excellent at generating information but often return lengthy, unstructured walls of text that are difficult to scan, validate, and retain.

Structured AI Knowledge Builder was built to solve this problem by focusing on generating better knowledge, not just more text. Every response is transformed into a structured educational artifact rather than a free-form chat.

Every topic is converted into structured learning modules:

📝 Plain-English Explanations
📖 Formal Definitions & Use Cases
🧩 Types & Classifications
🎯 Step-by-Step Understanding & Reflections
🔗 Live YouTube & Source References

📺 Watch the Demo

Click to watch the full project demo!

📸 Screenshots

Application Interface

⚡ At a Glance

Real-Time Rendering • Live Web Grounding • Multi-Persona Adaptability

🚀 Real-Time SSE Streaming & Partial JSON: Bypasses static loading screens by parsing text/event-stream chunks, dynamically stitching incomplete JSON fragments live on the UI.
🧠 Azure AI Engine: Powered by Azure AI Foundry for robust orchestration, search grounding, and schema validation.
🌍 Live Deep Research: Autonomously queries Bing to fetch the latest context and sources.
📄 High-Fidelity PDF Export: Server-side Puppeteer rendering guarantees pixel-perfect exports regardless of the user's device.
🎭 Persona System: Adapts depth, language, and technical detail based on the target audience (Student, Engineer, Kid, etc.).

💡 When to Use It

The Knowledge Builder shines when you are learning a new, complex topic and need structured clarity tailored to your current expertise.

Example 1: The Engineer

Topic: Transformer Architecture: Multi-Head Self-Attention Mechanism
Target Audience: Engineer
Output: Utilizes architecture pattern analogies, includes matrix math formulas (softmax(QK^T / sqrt(d_k))V), covers Cross-Attention variants, and provides technical points to ponder like computational complexity.

Example 2: The Kid

Topic: Transformer Architecture: Multi-Head Self-Attention Mechanism
Target Audience: Kid
Output: Swaps matrix math for "magical talking book" and "special glasses" metaphors, simplifies steps to plain English, and provides beginner-friendly learning resources.

Note: MARTA doesn't just change the tone. She rewrites the entire knowledge architecture for the audience.

🛠️ How to Use It

Enter Your Topic: Type in any subject or concept you want to learn about.
Select a Persona: Choose who the explanation should be tailored for (e.g., Student, Developer, Teacher, Kid).
Generate: Watch the Bento Grid build in real-time as the AI streams the structured knowledge modules.
Export: Click Export to generate a server-side, high-fidelity PDF report of your custom learning material.

🏗️ Architecture

flowchart TB
    %% ─────────────────────────────────────────
    %% LAYER 1 — User Interface
    %% ─────────────────────────────────────────
    subgraph CLIENT["🖥️  Client Layer  —  React 19 · TypeScript · Vite"]
        direction LR
        U(["👤 User"])
        FE["⚛️ React Frontend\n──────────────\nStreaming SSE Handler\nPartial JSON Parser\nNeo-Brutalist UI"]
        UI["📊 Bento Grid Dashboard\n──────────────\nKnowledge Modules\nYouTube Player\nPDF Export Trigger"]
    end

    U -- "Topic + Persona" --> FE
    FE -- "Render structured\nknowledge artifacts live" --> UI

    %% ─────────────────────────────────────────
    %% LAYER 2 — Backend Orchestration
    %% ─────────────────────────────────────────
    subgraph BACKEND["⚙️  Backend Orchestration Layer  —  Node.js · Express"]
        direction LR
        API["🚦 Express API Gateway\n──────────────\nRequest Routing"]
        RL["🛡️ Rate Limiter\n5 req / 15 min\nIP-based"]
        PUP["📄 Puppeteer\nServer-side PDF\nFixed 1200px Viewport"]
    end

    FE -- "POST /api/generate" --> API
    FE -- "POST /api/export-pdf" --> PUP
    API --> RL

    %% ─────────────────────────────────────────
    %% LAYER 3 — AI Synthesis Engine
    %% ─────────────────────────────────────────
    subgraph AI["🧠  MARTA  —  Azure AI Foundry Synthesis Engine"]
        direction LR
        MARTA["🤖 MARTA Agent\n──────────────\ngpt-4.1-mini\nStructured JSON Output\nSSE Streaming"]
        WEB["🌐 Deep Research\n──────────────\nBing Web Search\nLive Grounding"]
        GUARD["🛡️ Safety Guardrails\nContent Filters"]
    end

    RL -- "Structured prompt\n+ stream flag" --> MARTA
    MARTA <--> WEB
    MARTA --> GUARD
    GUARD -- "Strict JSON stream" --> API

    %% ─────────────────────────────────────────
    %% RETURN & EXPORT
    %% ─────────────────────────────────────────
    API -- "Chunked JSON Stream" --> FE
    PUP -- "Binary PDF Buffer" --> FE
    
    %% ─────────────────────────────────────────
    %% STYLES
    %% ─────────────────────────────────────────
    classDef clientNode fill:#1e3a5f,stroke:#4a90d9,color:#e8f4fd,rx:8
    classDef backendNode fill:#2d1b4e,stroke:#9b59b6,color:#ead5f5,rx:8
    classDef aiNode fill:#3d0f0f,stroke:#e74c3c,color:#fde8e8,rx:8

    class U,FE,UI clientNode
    class API,RL,PUP backendNode
    class MARTA,WEB,GUARD aiNode

🤖 Why Azure AI Foundry Agents?

MARTA was engineered as an Azure AI Foundry Agent instead of a standard completion endpoint to enforce strict execution constraints over a probabilistic model.

The Knowledge Builder relies heavily on:

Deep Research Grounding: Autonomous Bing Web Search integration ensures MARTA evaluates current facts and sources.
Enterprise Guardrails: Azure content safety filters ensure that inappropriate or malformed requests are categorically blocked (Prompt injection, Code vulnerability, Self-harm).
Schema Enforced Output: Standard conversational APIs are prone to markdown bleed. By utilizing strict schemas and partial JSON parsing, the React frontend never encounters a layout shift or broken component.

🧠 Meet MARTA: The Knowledge Synthesis Engine

The backend cognitive engine is MARTA, a master orchestrator agent on Azure AI Foundry. Rather than functioning as an open-ended conversationalist, MARTA operates as a strict analytical compiler—transforming any topic into objective, strictly-typed learning data.

Expected JSON Output Contract

Every generated response must strictly match this schema before reaching the UI:

{
  "layman": "...",
  "definition": "...",
  "when_to_use": [],
  "how_to_make": [],
  "types": [],
  "points_to_ponder": [],
  "youtube_id": "...",
  "youtube_fallback": "...",
  "sources": [],
  "conclusion": "..."
}

🎯 Key Features

AI Knowledge Synthesis & Streaming

Real-time SSE Streaming: Dynamically reacts to backend streams, parsing incomplete JSON on the fly to build tables and logic live before your eyes, entirely removing static loading screens.
Search-grounded generation: Live Bing searches to pull references and YouTube IDs.
Citation-aware content: Accurate sources embedded in the output.

Interactive Knowledge Interface

Neo-Brutalist Bento Grid: High information density with a visual learning hierarchy.
YouTube Integration: Embedded video player with fallback search handling.
Cross-Device PDF Export: Puppeteer renders the PDF server-side at a fixed 1200px desktop viewport, ensuring every export looks identical whether downloaded on mobile, tablet, or desktop.

🔒 Security & Reliability

Concern	Protection	Implementation Layer
Prompt Injection	Azure AI Foundry safeguards	AI Orchestration Layer
Invalid Responses	Strict schema validation	Node.js Backend
Excessive Requests	Rate limiting (5 req / 15 min) via `express-rate-limit`	Express Router
Broken Media Links	URL validation and fallback search handling	Frontend Components

⚙️ Technology Stack

Layer	Technology
Frontend	React 19, Vite, Tailwind CSS v4, Framer Motion
Backend	Node.js, Express, Puppeteer
AI Platform	Azure AI Foundry, `@azure/identity`
Language	TypeScript
Testing	Jest

📂 Project Structure

📦 AI_KNOWLEDGE_BUILDER
 ┣ 📂 Pictures/            # Demo images and PDF examples
 ┣ 📂 src/
 ┃ ┣ 📂 components/        # Isolated React UI pieces (Bento Grid, Loader, Player)
 ┃ ┣ 📂 lib/               # Shared utilities (Partial JSON parser)
 ┃ ┣ 📂 services/          # API fetch layers and stream handling
 ┃ ┣ 📜 App.tsx            # Main application orchestrator
 ┃ ┣ 📜 index.css          # Tailwind root
 ┃ ┣ 📜 main.tsx           # React DOM mounting
 ┃ ┗ 📜 types.ts           # TypeScript interfaces
 ┣ 📂 tests/               # Backend API integration tests
 ┣ 📜 server.ts            # Node/Express API Gateway & Puppeteer Logic
 ┣ 📜 vite.config.ts       # Bundler configuration
 ┣ 📜 jest.config.js       # Test runner configuration
 ┗ 📜 package.json         # Dependencies & scripts

🧪 Testing & Quality Assurance

The project includes automated backend integration tests to verify API reliability, schema validation, and PDF generation workflows.

Test Results

PASS
6 Tests Passing
0 Tests Failing

Backend Integration Test Coverage

Scenario	Status
Health check endpoint responds successfully	✅
Valid MARTA response schema validation	✅
Missing required request fields handling	✅
Incomplete MARTA schema validation	✅
Successful server-side PDF generation	✅
Missing report data handling during export	✅

🚀 Quick Start

1. Clone & Navigate

git clone https://github.com/Ahtesham-Latif/AI_KNOWLEDGE_BUILDER_BACKED_BY_MARTA.git
cd AI_KNOWLEDGE_BUILDER_BACKED_BY_MARTA

2. Install Dependencies

npm install

3. Configure Environment Variables

cp .env.example .env

Populate .env with:

FOUNDRY_ENDPOINT=https://your-agent.services.ai.azure.com/openai/deployments/gpt-4.1-mini/chat/completions?api-version=2025-05-15-preview
MARTA_ASSISTANT_ID=your-agent-id

4. Authenticate Infrastructure

az login

5. Launch Local Dev Node

npm run dev

🏆 GitHub Copilot & AI Development

GitHub Copilot and multiple AI models were used strategically based on their strengths throughout development.

Contributions

Component scaffolding and Express middleware (Copilot)
Azure SDK integration and debugging (Copilot)
Neo-Brutalist design patterns and UI architecture (Claude)
MARTA system prompt engineering (Claude + Gemini)
Engineering and Architect Advices (K - Azure Foundry Agent)

Verified Achievement

🔮 Future Enhancements

Persistent knowledge history
Multi-language support
Advanced PDF themes
Improved retrieval fallback strategies
Physics-based Bento interactions

🤝 Contributing

Contributions, suggestions, and feedback are welcome.

Fork the repository
Create a feature branch
Commit your changes
Open a pull request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

Ahtesham Latif
Business & IT Student — University of the Punjab (IBIT)

Built For: Microsoft Agents League – AI Skills Fest 2026
"Making AI-generated knowledge easier to understand, verify, and learn from."

Name		Name	Last commit message	Last commit date
Pictures		Pictures
src		src
tests		tests
.env.example		.env.example
.gitignore		.gitignore
Agents.md		Agents.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
index.html		index.html
jest.config.js		jest.config.js
jest.setup.ts		jest.setup.ts
metadata.json		metadata.json
package-lock.json		package-lock.json
package.json		package.json
server.ts		server.ts
test-parse.js		test-parse.js
test-stream-full.js		test-stream-full.js
test-stream.js		test-stream.js
test-stream2.js		test-stream2.js
tsconfig.json		tsconfig.json
ui.test.tsx		ui.test.tsx
vite.config.ts		vite.config.ts

Latest commit

History

Folders and files

Repository files navigation