Qrvey Sidekick Widget

Embed the Qrvey Sidekick Widget to enable users to interact with their data using natural language.

Embed the Qrvey Sidekick Widget

If the Qrvey Smart Analyzer or Qrvey Chart Builder agents have been enabled, they are automatically displayed in a modal in embedded mode.

1. Generate a JWT token for the user session (recommended). The userId should be passed in the JWT.

2. Add the Qrvey Sidekick Widget (qrvey-ai-mcp-client) to your application using one of the following embed options:

   Global variable name:

   <qrvey-ai-mcp-client
     settings="mySettingsConfig"
     context="myContextConfig"
     agents="myAgentsList"
   />
   
   <script>
     var mySettingsConfig = {
       "domain": "https://demo.qrvey.com",
       "qvToken": "<YOUR_PRIVATE_TOKEN>"
     };
   
     var myContextConfig = {
       "appId": "...",
       "datasetId": "..."
     };
   
     var myAgentsList = ['master-ai-agent', 'chart-builder'];
   </script>
   
   <!-- Launcher -->
   <script type="module" src="https://demo.qrvey.com/ai-widgets/ai-widgets/ai-widgets.esm.js"></script>

   JSON string:

   <qrvey-ai-mcp-client
     settings='{"domain":"https://demo.qrvey.com","qvToken":"<YOUR_PRIVATE_TOKEN>"}'
     context='{"appId":"...","datasetId":"..."}'
     agents='["master-ai-agent","chart-builder"]'
   />
   
   <!-- Launcher -->
   <script type="module" src="https://demo.qrvey.com/ai-widgets/ai-widgets/ai-widgets.esm.js"></script>

   Object using JavaScript:

   <script>
     const el = document.querySelector('qrvey-ai-mcp-client');
   
     el.settings = { domain: 'https://demo.qrvey.com', qvToken: '<YOUR_PRIVATE_TOKEN>', };
     el.context = { appId: '...', datasetId: '...' };
     el.agents = ['master-ai-agent', 'chart-builder'];
   </script>
   
   <!-- Launcher -->
   <script type="module" src="https://demo.qrvey.com/ai-widgets/ai-widgets/ai-widgets.esm.js"></script>

3. Configure the widget settings to match your application requirements.

4. Deploy and test the integration.

Configuration Object

Settings Properties

Settings properties include API credentials and endpoint configuration displayed as a JSON object or JSON string.

Property	Value	Required	Description
domain	string	Y	Base URL of your Qrvey instance.
qvToken	string	Y	Encrypted token used for secure authentication. Includes userID when used as the authentication method to access the Qrvey platform.

Context Properties

Context properties enable the Qrvey Sidekick to work with specific assets. If a context property is not provided, the Qrvey Sidekick uses a general context, which can add steps when responding to a prompt.

Property	Value	Required	Description
appId	string	N	ID of the Qrvey application that contains the asset to embed. Required when using a context property.
datasetId	string	N	ID of a specific dataset to display. Required when using Qrvey Chart Builder.
chartId	string	N	ID of a specific chart to display. Required when using Qrvey Smart Analyzer.
dashboardId	string	N	ID of a specific dashboard to display.
workflowId	string	N	ID of a single flow to display.

Additional Properties

The qrvey-ai-mcp-client component includes the following optional properties.

Property	Value	Required	Description
type	string	N	Defines how the chat component is rendered. Supported values: - modal - Renders as an overlay. - embedded (default) - Renders inside a container.
agents	array	N	Restricts the agent dropdown to a list of agent IDs.
activeAgentId	string	N	ID of the AI agent to select as active for the conversation. If none is provided, the first available agent is selected.

Additional References

• Set Up Qrvey Sidekick