From 4448a0e61270bd918ed75ea793f3143141fa9b96 Mon Sep 17 00:00:00 2001
From: yeshamavani <yesha.mavani@sourcefuse.com>
Date: Thu, 23 Oct 2025 11:43:19 +0000
Subject: [PATCH] sync loopback4-llm-chat-extension docs

---
 .../loopback4-llm-chat-extension/README.md    | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)

diff --git a/docs/arc-api-docs/extensions/loopback4-llm-chat-extension/README.md b/docs/arc-api-docs/extensions/loopback4-llm-chat-extension/README.md
index ec7b8eeae..ca01a1ae0 100644
--- a/docs/arc-api-docs/extensions/loopback4-llm-chat-extension/README.md
+++ b/docs/arc-api-docs/extensions/loopback4-llm-chat-extension/README.md
@@ -173,6 +173,117 @@ Users can provide feedback on generated datasets through the dataset actions end
 
 ![alt text](https://raw.githubusercontent.com/sourcefuse/llm-chat-component/refs/heads/main/db-query-graph.png)
 
+## VisualizerComponent
+
+The `VisualizerComponent` extends the LLM Chat functionality by providing intelligent data visualization capabilities. This component automatically generates charts and graphs based on database query results, making data insights more accessible and visually appealing.
+
+### Features
+
+- **Automatic Visualization Selection** - The system intelligently selects the most appropriate visualization type based on the data structure and user prompt
+- **Multiple Chart Types** - Supports bar charts, line charts, and pie charts out of the box
+- **LLM-Powered Configuration** - Uses AI to generate optimal chart configurations including axis selection, orientation, and styling
+- **Seamless Integration** - Works directly with datasets generated by the DbQueryComponent
+
+### Available Visualizers
+
+The component includes three built-in visualizers:
+
+#### Bar Chart Visualizer (`src/components/visualization/visualizers/bar.visualizer.ts:13`)
+
+- **Best for**: Comparing values across different categories or showing trends over time
+- **Configuration**: Automatically determines category column (x-axis) and value column (y-axis)
+- **Options**: Supports both vertical and horizontal orientations
+
+#### Line Chart Visualizer (`src/components/visualization/visualizers/line.visualizer.ts`)
+
+- **Best for**: Displaying trends and changes over time
+- **Configuration**: Optimized for time-series data and continuous variables
+
+#### Pie Chart Visualizer (`src/components/visualization/visualizers/pie.visualizer.ts`)
+
+- **Best for**: Showing proportions and percentages of a whole
+- **Configuration**: Automatically identifies categorical data and corresponding values
+
+### Usage
+
+#### Basic Setup
+
+```ts
+import {VisualizerComponent} from 'lb4-llm-chat-component';
+
+export class MyApplication extends BootMixin(
+  ServiceMixin(RepositoryMixin(RestApplication)),
+) {
+  constructor(options: ApplicationConfig = {}) {
+    // Add the visualizer component
+    this.component(VisualizerComponent);
+
+    // ... other configuration
+  }
+}
+```
+
+#### Generate Visualization Tool
+
+The component provides a `generate-visualization` tool that can be used by the LLM to create visualizations:
+
+- **Input**: Takes a user prompt and dataset ID from a previously generated query
+- **Process**: Automatically selects the best visualization type and generates optimal configuration
+- **Output**: Renders the visualization in the UI for the user
+
+#### Example Usage Flow
+
+1. User asks: "Show me sales by region as a chart"
+2. LLM uses `generate-query` tool to create a dataset with sales data by region
+3. LLM uses `generate-visualization` tool with the dataset ID
+4. System selects bar chart as the most appropriate visualization
+5. Chart is rendered with regions on x-axis and sales values on y-axis
+
+### Visualization Graph Flow
+
+The visualization process follows a structured graph workflow (`src/components/visualization/visualization.graph.ts:9`):
+
+1. **Get Dataset Data** - Retrieves the dataset and query information
+2. **Select Visualization** - Chooses the most appropriate chart type based on data structure
+3. **Render Visualization** - Generates the final chart configuration and displays it
+
+### Creating Custom Visualizers
+
+You can extend the system with custom visualizers by implementing the `IVisualizer` interface (`src/components/visualization/types.ts:4`):
+
+```ts
+import {visualizer} from 'lb4-llm-chat-component';
+import {IVisualizer, VisualizationGraphState} from 'lb4-llm-chat-component';
+
+@visualizer()
+export class CustomVisualizer implements IVisualizer {
+  name = 'custom-chart';
+  description = 'Description of when to use this visualizer';
+
+  async getConfig(state: VisualizationGraphState): Promise<AnyObject> {
+    // Generate configuration based on the data and user prompt
+    return {
+      // your custom chart configuration
+    };
+  }
+}
+```
+
+### Configuration
+
+The visualizer component automatically registers all available visualizers and makes them available to the LLM. No additional configuration is required for basic usage. You can register a new visualizer using the `@visualizer` decorator on a class following the IVisualizer interface.
+
+### Integration with DbQueryComponent
+
+The visualizer component works seamlessly with the `DbQueryComponent`:
+
+1. Use database query tools to generate datasets
+2. The visualization tool automatically accesses dataset metadata including:
+   - SQL query structure
+   - Query description
+   - User's original prompt
+3. This context helps generate more accurate and relevant visualizations
+
 ## Providing Context
 
 There are two ways to provide context to the LLM -