Chart Explainer and Conversations

This plugin is currently experimental.

Important

• This tutorial requires the Chart Explainer and Conversations plugin as well as the CLI plugin.
• By default, this plugin connects to an LLM service provided by FinTech Studios. Instructions for setting up with your own server will be included in a future release.
• If you will be connecting to the default LLM service, please contact your Account Manager to obtain apiKey and apiToken credentials.

Introduction

An AI-powered plugin that combines Chart Explainer and Conversational capabilities. Users can manipulate charts using natural language commands and query for explanations, news, and analysis. The conversational interface operates independently or alongside the existing Chart Explainer feature, which generates AI-powered summaries of market events for selected dates or date ranges on the ticker. See the Core Settings section below for instructions on enabling or disabling either.

ChartIQ CLI Integration

The plugin integrates with the ChartIQ CLI plugin, allowing the LLM to execute CLI commands as part of the conversation. This means the AI can dynamically modify the chart by changing its type, adjusting periodicity or range, adding or editing studies and series, extracting chart data for analysis, resetting the chart, and more, all based on the conversation context.

For more details on the CLI and available commands, see the CLI Tutorial.

Getting Started

Import both the CLI and Chart Explainer plugins into your application:

import "./plugins/cli/cli.js"; // @@ COMMAND_LINE
import "./plugins/chartexplainer/plugin.js"; // @@ FTS_CHART_EXPLAINER

Connecting to the Default Server

To use the default server, add your API credentials in the configuration. You can add the configuration manually in plugins.ftsChartExplainer.ftsConfig or use the provided addPluginConfig export.

Important: Set the useCLIRegistry property to true in your configuration. This allows the plugin to access the CLI command registry and pass commands to the executor function.

Configure in defaultConfiguration.js:

ftsConfig: {
  useCLIRegistry: true,
  aiResponseGeneratorConfig: {
    model: "gpt4omini",
  },
  apiClientConfig: {
    baseUrl: "https://global-api.fintechstudios.com",
    endpointsMap: {
      generate: "/generative/generate"
    },
    apiKey: 'your-api-key', // Replace with your API key
    apiToken: 'your-api-token', // Replace with your API token
  }
}

Configure with addPluginConfig:

import { addPluginConfig } from './chartiq/plugins/chartexplainer/plugin.js';

addPluginConfig(yourChartIqConfig, {
  useCLIRegistry: true,
  aiResponseGeneratorConfig: {
    model: 'gpt4omini',
  },
  apiClientConfig: {
    baseUrl: "https://global-api.fintechstudios.com",
    endpointsMap: {
    generate: "/generative/generate"
    },
    apiKey: 'your-api-key', // Replace with your API key
    apiToken: 'your-api-token', // Replace with your API token
  },
});

Configuration Options

You will find most of the following settings are pre-configured in defaultConfiguration.js at plugins.ftsChartExplainer.ftsConfig. Some configurations are available but not configured out of the box.

Core Settings

• hasNewsPackage (boolean)
  • Enables the Chart Explainer feature introduced in v9.6.0, which generates AI-driven news summaries for selected date ranges. When enabled, users can select a date or date range on the chart, and the plugin aggregates news stories from tokened sources into a bulleted summary with source attributions.
• useCLIRegistry (boolean) — Default: true
  • Enables the conversational interface with CLI tool integration. When set to true, users can interact with the plugin through natural language commands that manipulate the chart dynamically.
• disclaimerMessage (string) — Custom disclaimer text displayed to users

Example:

ftsConfig: {
  hasNewsPackage: false,
  useCLIRegistry: true,
}

AI Response Generator

Configure the AI model behavior. This is where you can override the default prompt with your own custom prompt, or modify how the AI processes requests if you're connecting to your own server.

• model (string) — The AI model identifier to use for generating responses
• prompt (string) — Custom prompt template; omit to use the default prompt
• baseFilters (array) — Optional filters to apply to news queries
• modifyPromptFn (function) — Optional callback to dynamically modify the prompt and its parameters at runtime
  • Parameters:
    • prompt (string) — The original prompt template containing placeholders (e.g., 'my {type} prompt')
    • params (object) — Object containing key-value pairs used as placeholders in the prompt. All values are converted to strings using JSON.stringify() before injection
      • type — The type classification of the symbol object (e.g., 'company', 'marketindex')
      • symbolObject — The full symbol object being processed
• modifyNewsContextFn (function) — Optional callback to dynamically modify the news context at runtime
  • Parameters:
    • context (object) — Object containing parameters that control how articles are used for response generation
      • start (number) — Start limit of article publish date (Unix time)
      • end (number) — End limit of article publish date (Unix time)
      • count (number) — The number of articles to use
      • stages (array) — Filters or criteria applied to select relevant articles
      • sorting (string) — The sorting method for the articles (e.g., 'trending')
      • useFullText (boolean) — Whether to include the full text of articles in the results

Example:

aiResponseGeneratorConfig: {
  model: "gpt4omini",
  // prompt: 'your-custom-prompt', // (optional) override the default prompt template
  // baseFilters: [], // (optional) add filters to news queries
},

API Client

Configure server communication. This is where you provide authentication credentials and endpoint information for the server handling AI requests. Use the default configuration if using the default LLM service, or override the baseUrl and endpointsMap with your own server details if connecting to your own server.

• apiKey (string) — Authentication key for API access
• apiToken (string) — Authentication token for API access
• baseUrl (string) — Server base URL; defaults to the default LLM service
• endpointsMap (object) — API endpoint paths; defaults to the default LLM service endpoints
• fetchClient (object) — Optional custom fetch client implementation
• modifyFetchOptionsFn (function) — Optional callback to dynamically modify the fetch request options at runtime
  • Parameters:
    • options (object) — The original fetch request options
      • body (string) — The request payload
      • headers (Headers) — HTTP headers to include in the request

Example:

apiClientConfig: {
  baseUrl: "https://global-api.fintechstudios.com",
  endpointsMap: {
    generate: "/generative/generate"
  },
  apiKey: 'your-api-key',
  apiToken: 'your-api-token',
  // fetchClient: myFetchClient, // (optional) custom fetch client implementation
}

Model Dropdown

• showModelDropdown (boolean) — Displays or hides the model selection dropdown in the UI
• availableModels (array) — Array of model objects with the following properties:
  • label (string) — Display name shown in the dropdown to users
  • value (string) — Model identifier sent to your API
  • description (string) — Optional text describing the model's capabilities or behavior

Example:

modelDropdownConfig: {
  showModelDropdown: true,
  availableModels: [
    { label: 'GPT-4o Mini', value: 'gpt4omini', description: 'Answers immediately.' },
    { label: 'GPT-5 Nano', value: 'gpt5nano', description: 'Thinks longer for better answers.' }
  ],
}

Suggestions

• showSuggestions (boolean) — Displays or hides suggestion prompts in the UI
• availableSuggestions (array) — Array of predefined prompt strings that appear as quick-start suggestions for users to interact with the plugin

Example:

suggestionsConfig: {
  showSuggestions: true,
  availableSuggestions: [
    'Change the chart symbol to Microsoft Inc',
    'Update the chart to show the last 3 months',
    'Add a moving average study to the chart',
  ],
}

Conversation History

• showConversationHistory (boolean) — Displays or hides the conversation history panel in the UI

Example:

conversationHistoryConfig: {
  showConversationHistory: false,
},

Event Listeners

The plugin dispatches custom events that you can listen to:

Examples:

// Define callbacks
function onDateRangeChange(data) {
  console.log('Date range:', data.start, data.end);
}

function onVisibilityChange(data) {
  console.log('Plugin panel is', data.isOpened ? 'opened' : 'closed');
}

// Add listeners
stxx.addEventListener('ftsChartExplainerDateRangeChange', onDateRangeChange);
stxx.addEventListener('ftsChartExplainerVisibilityChange', onVisibilityChange);

Next Steps

For more information on building custom AI solutions, see the AI Ready Charts tutorial.