Quickchart Tool!

pages/docs/configuration/tools/quickchart.mdx

@@ -0,0 +1,235 @@
+---
+title: 📊 QuickChart Tool
+description: Configure and use the QuickChart tool for data visualization in LibreChat
+---
+
+# QuickChart Tool Configuration
+
+The QuickChart tool allows you to generate charts and data visualizations directly in LibreChat using Chart.js syntax. It supports various chart types including bar charts, line charts, pie charts, and more with extensive customization options.
+
+## Prerequisites
+
+- No API key is required for basic usage
+- For production usage, you may want to consider self-hosting the service (details below)
+
+## Configuration
+
+### Environment Variables
+
+Add the following to your `.env` file:
+
+```bash
+# Optional - only needed for custom installations
+QUICKCHART_BASE_URL=https://quickchart.io
+```
+
+### Plugin Configuration
+
+Add the QuickChart tool to any [agent](https://www.librechat.ai/docs/features/agents) to enable chart generation capabilities.
+
+## Usage
+
+The QuickChart tool supports the following actions:
+
+- `help`: Get detailed usage information
+- `create_chart`: Generate a chart with the specified configuration
+
+### Example Prompts
+
+```
+Create a simple bar chart showing monthly sales data for Q1
+Generate a line chart showing temperature trends over the past week
+Make a pie chart of market share for the top 5 smartphone brands
+Create a time series chart of stock prices from January to June
+```
+
+### Parameters
+
+The tool accepts numerous parameters for chart customization:
+
+- `action`: Required - either "help" or "create_chart"
+- `chartConfig`: Required for create_chart - Chart.js configuration as a JSON string
+- `title`: Optional chart title
+- `showGridLines`: Boolean to toggle grid lines
+- `xAxisLabel`, `yAxisLabel`: Optional axis labels
+- `beginAtZero`: Force Y axis to start at zero
+- `labels`: Toggle data value labels
+- `legend`: Legend configuration (display, position, alignment)
+- `chartBackgroundColor`: Background color for the chart
+- `backgroundImageUrl`: Custom background image
+- `datasetColors`: Array of color configurations for each dataset
+- `globalPointStyle`: Global point styling for charts
+- `datasetPointStyle`: Per-dataset point styling
+- `datasetLineStyle`: Per-dataset line styling
+- `timeAxis`: Time series configuration
+- `globalLineTension`: Line smoothing factor
+- `roundedBars`: Configuration for rounded bar corners
+- `neverExpire`: Boolean for chart expiration (ONLY for self-hosted instances)
+
+## Hosting Options
+
+You have three options for using the QuickChart service:
+
+### 1. QuickChart.io (Cloud Service)
+
+The simplest option is to use the public QuickChart.io service. This requires no setup and is free for basic usage.
+
+```bash
+# Default - no configuration needed
+QUICKCHART_BASE_URL=https://quickchart.io
+```
+
+### 2. Self-Hosted (Official Version)
+
+You can self-host the official QuickChart service:
+
+1. Clone the [official repository](https://github.com/typpo/quickchart)
+2. Follow the installation instructions
+3. Update your `.env` file to point to your instance:
+
+```bash
+QUICKCHART_BASE_URL=http://your-quickchart-instance:3400
+```
+
+### 3. jmaddington Fork (Enhanced Version)
+
+For more features, you can use the jmaddington fork:
+
+1. Pull the Docker image from [GitHub Packages](https://github.com/jmaddington?tab=packages&repo_name=quickchart)
+2. Or clone the repository from GitHub
+3. Update your `.env` file:
+
+```bash
+QUICKCHART_BASE_URL=http://your-quickchart-instance:3400
+```
+
+The jmaddington fork includes additional features and enhancements not available in the official version, including the `neverExpire` parameter.
+
+### Self-hosting with Docker and Caddy
+
+You can easily self-host QuickChart alongside LibreChat using Docker Compose and Caddy as a reverse proxy. This setup provides:
+
+- Automatic HTTPS certificates via Caddy
+- Proper domain routing for both services
+- Easy configuration of QuickChart with LibreChat
+
+#### Docker Compose Setup
+
+Create or edit your `docker-compose.override.yml` file in your LibreChat directory:
+
+```yaml
+services:
+  # Add Caddy as reverse proxy
+  caddy:
+    image: caddy:2
+    container_name: caddy
+    restart: unless-stopped
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./Caddyfile:/etc/caddy/Caddyfile
+      - caddy_data:/data
+      - caddy_config:/config
+
+  # Add QuickChart service
+  quickchart:
+    image: ghcr.io/jmaddington/quickchart:latest
+    container_name: quickchart
+    restart: unless-stopped
+    environment:
+      - PORT=3400
+      - NODE_ENV=production
+      # Optional configurations:
+      # - MEMORY_LIMIT=1024
+      # - LOGGING_LEVEL=info
+
+  # Configure LibreChat to use QuickChart
+  api:
+    environment:
+      - QUICKCHART_BASE_URL=https://quickchart.example.com
+
+# Define volumes for Caddy
+volumes:
+  caddy_data:
+  caddy_config:
+```
+
+#### Caddy Configuration
+
+Create a `Caddyfile` in your LibreChat directory:
+
+```
+librechat.example.com {
+    reverse_proxy api:3080
+    log {
+        output file /var/log/caddy/librechat.log
+    }
+    tls {
+        protocols tls1.2 tls1.3
+    }
+}
+
+quickchart.example.com {
+    reverse_proxy quickchart:3400
+    log {
+        output file /var/log/caddy/quickchart.log
+    }
+    tls {
+        protocols tls1.2 tls1.3
+    }
+}
+```
+
+#### LibreChat Configuration
+
+Update your `.env` file to configure LibreChat to use your self-hosted QuickChart instance with HTTPS:
+
+```bash
+# QuickChart Configuration
+QUICKCHART_BASE_URL=https://quickchart.example.com
+```
+
+#### DNS Configuration
+
+Make sure to configure your DNS settings to point both domains to your server's IP address, or for local testing, add them to your hosts file:
+
+```
+127.0.0.1 librechat.example.com quickchart.example.com
+```
+
+#### Start the Services
+
+Restart your Docker Compose setup to apply the changes:
+
+```bash
+docker compose down
+docker compose up -d
+```
+
+Now you can access LibreChat at `https://librechat.example.com` and it will automatically use your self-hosted QuickChart instance at `https://quickchart.example.com` when generating charts. Caddy handles all the TLS certificate management automatically.
+
+Always use the exact URL returned by the tool without modification.
+
+## Troubleshooting
+
+Common issues and solutions:
+
+1. **Chart Not Displaying**
+   - Ensure the chart URL is properly embedded in markdown format: `![Chart Description](URL)`
+   - Check for any error messages in the tool response
+
+2. **Configuration Errors**
+   - Verify your Chart.js configuration is valid JSON
+   - Check for missing required fields
+
+3. **Self-hosting Issues**
+   - Confirm your QUICKCHART_BASE_URL points to a running instance
+   - Verify network connectivity between LibreChat and your QuickChart instance
+
+## Support
+
+For issues with the plugin:
+- Open an issue at [LibreChat Issues](https://github.com/danny-avila/LibreChat/issues)
+- For jmaddington fork issues: [jmaddington/quickchart](https://github.com/jmaddington/quickchart/issues)
+- Review the [QuickChart documentation](https://quickchart.io/documentation/)