# kushall-j-4/sagar-ai-poc architecture

> Architecture diagram of the GitHub repository kushall-j-4/sagar-ai-poc, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kushall-j-4/sagar-ai-poc
- Repository: https://github.com/kushall-j-4/sagar-ai-poc

## Overview

#### Purpose and Runtime
SAGAR is a static, client-side Next.js demo illustrating conversion of government webpage content into Schema.org/JSON-LD-style semantic data and the resulting improvement to AI answers. It has no real ingestion, AI, database, or backend service; all displayed processing and graph data are static/demo state.

Runtime: Next.js 14 App Router, React, TypeScript, Tailwind CSS, and Lucide icons. Production output is a static export intended for GitHub Pages.

#### Application Entry and Shell
The App Router entry point is `app/page.tsx`, which owns the guided multi-screen demo flow and likely switches between the input, comparison, AI-answer, and processing views. `app/layout.tsx` provides the shared document/layout boundary, while `app/globals.css` establishes global visual styling.

Paths:
- `app/page.tsx`
- `app/layout.tsx`
- `app/globals.css`

#### Stage 1: Government URL Intake
The initial UI captures a government-site URL as the conceptual source material for semantic processing. This is a presentation/input boundary rather than a network integration: the URL advances the demo but does not invoke a scraping or processing backend.

Paths:
- `app/page.tsx`
- `app/components/SourceView.tsx`

#### Stage 2: Semantic Schema Transformation
The schema-comparison view presents the central product claim: unstructured/current source representation is transformed into an AI-readable semantic structure based on standards such as Schema.org and JSON-LD. This is visualized client-side from predefined data, not generated dynamically.

Paths:
- `app/components/SchemaComparisonView.tsx`
- `app/page.tsx`

#### Stage 3: Citizen/AI Answer Comparison
The citizen-question stage contrasts AI results derived from ordinary webpage content with results supported by structured semantic data. It represents the consumer-facing outcome of the transformation pipeline and remains isolated from external LLM APIs.

Paths:
- `app/components/CitizenQuestionView.tsx`
- `app/page.tsx`

#### Stage 4: Processing Pipeline and Knowledge Graph
The backend-process view visualizes the conceptual internal pipeline—source processing, semantic extraction/structuring, and knowledge-graph representation. Interactive graph nodes are a frontend visualization boundary; there is no persisted graph database, processing worker, or API behind it.

Paths:
- `app/components/BackendProcessView.tsx`
- `app/page.tsx`

#### Deployment Boundary
The application is configured as a static Next.js export, so the build produces HTML/CSS/JS deployable without a Node server. GitHub Actions handles deployment to GitHub Pages on repository pushes; deployment-specific behavior is documented separately.

Paths:
- `.github/workflows/deploy.yml`
- `next.config.js`
- `DEPLOYMENT.md`

Main entry points: [`app/page.tsx`](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/page.tsx) (Demo flow controller), [`app/layout.tsx`](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/layout.tsx) (Document shell), [`app/components/SourceView.tsx`](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SourceView.tsx) (Government URL intake), [`app/components/SchemaComparisonView.tsx`](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SchemaComparisonView.tsx) (Schema comparison)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Guided Demo UI"]
  node_layout["Document shell<br/>Next.js layout<br/>[layout.tsx]"]
  node_page["Demo flow controller<br/>Next.js page<br/>[page.tsx]"]
  node_styles["Global styles<br/>CSS<br/>[globals.css]"]
  node_source["Government URL intake<br/>React view<br/>[SourceView.tsx]"]
  node_schema["Schema comparison<br/>React view"]
  node_citizen["AI answer comparison<br/>React view"]
  node_process["Pipeline and graph view<br/>React view"]
end

subgraph group_conceptual["Conceptual Demo Flow"]
  node_conceptual_source["Source webpage content<br/>conceptual input"]
  node_semantic_structure["Semantic structure<br/>Schema.org / JSON-LD"]
  node_answer_outcome["Improved AI answer<br/>conceptual outcome"]
  node_knowledge_graph{{"Knowledge graph<br/>conceptual graph"}}
end

subgraph group_delivery["Static Delivery"]
  node_next_config["Static export config<br/>Next.js config<br/>[next.config.js]"]
  node_build_output["Static site output<br/>HTML/CSS/JS"]
  node_deploy_workflow["GitHub Pages deploy<br/>GitHub Actions workflow<br/>[deploy.yml]"]
  node_deployment_docs["Deployment guide<br/>documentation<br/>[DEPLOYMENT.md]"]
end

node_layout -->|"wraps"| node_page
node_styles -->|"styles"| node_layout
node_page -->|"renders stage 1"| node_source
node_page -->|"renders stage 2"| node_schema
node_page -->|"renders stage 3"| node_citizen
node_page -->|"renders stage 4"| node_process
node_source -.->|"illustrates"| node_conceptual_source
node_conceptual_source -.->|"conceptually transforms"| node_semantic_structure
node_schema -.->|"visualizes"| node_semantic_structure
node_semantic_structure -.->|"supports"| node_answer_outcome
node_citizen -.->|"compares"| node_answer_outcome
node_semantic_structure -.->|"represented as"| node_knowledge_graph
node_process -.->|"visualizes"| node_knowledge_graph
node_next_config -->|"produces"| node_build_output
node_build_output -->|"deployed by"| node_deploy_workflow
node_deployment_docs -.->|"documents"| node_deploy_workflow

click node_layout "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/layout.tsx"
click node_page "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/page.tsx"
click node_styles "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/globals.css"
click node_source "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SourceView.tsx"
click node_schema "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SchemaComparisonView.tsx"
click node_citizen "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/CitizenQuestionView.tsx"
click node_process "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/BackendProcessView.tsx"
click node_next_config "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/next.config.js"
click node_deploy_workflow "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/.github/workflows/deploy.yml"
click node_deployment_docs "https://github.com/kushall-j-4/sagar-ai-poc/blob/main/DEPLOYMENT.md"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_layout,node_page,node_styles,node_source,node_schema,node_citizen,node_process toneBlue
class node_conceptual_source,node_semantic_structure,node_answer_outcome,node_knowledge_graph toneAmber
class node_next_config,node_build_output,node_deploy_workflow,node_deployment_docs toneMint
```

## Components

### Guided Demo UI

Client-side screens coordinated by the App Router page.

- [Document shell](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/layout.tsx): Next.js layout · `app/layout.tsx`
- [Demo flow controller](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/page.tsx): Next.js page · Owns guided multi-screen navigation and static demo state. · `app/page.tsx`
- [Global styles](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/globals.css): CSS · `app/globals.css`
- [Government URL intake](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SourceView.tsx): React view · Captures a conceptual source URL without network ingestion. · `app/components/SourceView.tsx`
- [Schema comparison](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/SchemaComparisonView.tsx): React view · Shows predefined unstructured versus Schema.org/JSON-LD representations. · `app/components/SchemaComparisonView.tsx`
- [AI answer comparison](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/CitizenQuestionView.tsx): React view · Contrasts static ordinary-content and semantic-data answer examples. · `app/components/CitizenQuestionView.tsx`
- [Pipeline and graph view](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/app/components/BackendProcessView.tsx): React view · Visualizes conceptual processing and an interactive knowledge graph. · `app/components/BackendProcessView.tsx`

### Conceptual Demo Flow

Static visualized stages; no live processing services.

- **Source webpage content**: conceptual input · Demo-only representation of government content.
- **Semantic structure**: Schema.org / JSON-LD · Static AI-readable structured-data representation.
- **Improved AI answer**: conceptual outcome · Illustrated consumer-facing result, not an LLM response.
- **Knowledge graph**: conceptual graph · Frontend-only graph representation with no persistence layer.

### Static Delivery

Static export and GitHub Pages deployment.

- [Static export config](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/next.config.js): Next.js config · Configures production output for static hosting. · `next.config.js`
- **Static site output**: HTML/CSS/JS · Deployable assets requiring no Node server.
- [GitHub Pages deploy](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/.github/workflows/deploy.yml): GitHub Actions workflow · Deploys the static export on repository pushes. · `.github/workflows/deploy.yml`
- [Deployment guide](https://github.com/kushall-j-4/sagar-ai-poc/blob/main/DEPLOYMENT.md): documentation · `DEPLOYMENT.md`

## Connections

- Document shell → Demo flow controller: wraps
- Global styles → Document shell: styles
- Demo flow controller → Government URL intake: renders stage 1
- Demo flow controller → Schema comparison: renders stage 2
- Demo flow controller → AI answer comparison: renders stage 3
- Demo flow controller → Pipeline and graph view: renders stage 4
- Government URL intake → Source webpage content: illustrates
- Source webpage content → Semantic structure: conceptually transforms
- Schema comparison → Semantic structure: visualizes
- Semantic structure → Improved AI answer: supports
- AI answer comparison → Improved AI answer: compares
- Semantic structure → Knowledge graph: represented as
- Pipeline and graph view → Knowledge graph: visualizes
- Static export config → Static site output: produces
- Static site output → GitHub Pages deploy: deployed by
- Deployment guide → GitHub Pages deploy: documents