Getting Started with the Vue AI AssistView Component in Vue 2

22 Jul 202610 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue AI AssistView component.

Prerequisites

Requirement Version
Vue 2.6 or higher
Node.js 16.0.0 or above

Vue supported versions

Vue version Minimum Syncfusion Vue AI AssistView version
Vue v2.7 20.3.47 and above
Vue v3.0 19.2.44 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Setup the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Adding Vue AI AssistView packages

To install the AI AssistView package, use the following command:

npm install @syncfusion/ej2-vue-interactive-chat --save

or

yarn add @syncfusion/ej2-vue-interactive-chat

Adding CSS reference

Themes for Syncfusion® Vue components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
    @import "../node_modules/@syncfusion/ej2-material3-theme/styles/ai-assistview/index.css";
</style>

Adding AI AssistView component

The AI AssistView code should be added in the src/App.vue file.

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView'></ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data () {
    return {
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css";
</style>

Run the application

npm run serve

or

yarn run serve

Registering Your Syncfusion License

Generate a license key from the Syncfusion License Dashboard and register it before rendering your Vue 2 application:

```javascript
import { registerLicense } from '@syncfusion/ej2-base';

registerLicense('YOUR_LICENSE_KEY');
```

Note: A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.

Configure suggestions and responses

Use the promptSuggestions property to display a list of predefined suggestion chips. To provide custom responses, handle the promptRequest event, which is triggered when a user query is sent.

<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest"></ejs-aiassistview>
  </div>
</template>

<script setup>
import { AIAssistViewComponent as EjsAiassistview } from "@syncfusion/ej2-vue-interactive-chat";
import { ref } from "vue";

let aiassist = ref(null);

const promptSuggestions = [
  "How do I prioritize my tasks?",
  "How can I improve my time management skills?"
];

const prompts = [
  {
    prompt: "How do I prioritize my tasks?",
    response: "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
  },
  {
    prompt: "How can I improve my time management skills?",
    response: "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
  }
];

const onPromptRequest = (args) => {
  setTimeout(() => {
    let foundPrompt = prompts.find((promptObj) => promptObj.prompt === args.prompt);
    let defaultResponse = 'For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
    
    aiassist.value.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);

  }, 2000);
}
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
</style>
<template>
  <div id='container' style="height: 350px; width: 650px; margin: 0 auto;">
    <br>
    <ejs-aiassistview id='aiAssistView' ref="aiassist" :prompt-suggestions="promptSuggestions" :prompt-request="onPromptRequest"></ejs-aiassistview>
  </div>
</template>
<script>
import { AIAssistViewComponent } from "@syncfusion/ej2-vue-interactive-chat";

export default {
  components: {
    'ejs-aiassistview': AIAssistViewComponent
  },
  data: function () {
    return {
      promptSuggestions: [
        "How do I prioritize my tasks?",
        "How can I improve my time management skills?"
      ],
      prompts: [
        {
          prompt: "How do I prioritize my tasks?",
          response: "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
        },
        {
          prompt: "How can I improve my time management skills?",
          response: "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency."
        }
      ]
    }
  },
  methods: {
    onPromptRequest: function (args) {
      setTimeout(() => {
        let defaultAiassist = this.$refs.aiassist.ej2Instances;
        let foundPrompt = this.prompts.find((promptObj) => promptObj.prompt === args.prompt);
        let defaultResponse = 'For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
        defaultAiassist.addPromptResponse(foundPrompt ? foundPrompt.response : defaultResponse);
      }, 2000);
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
</style>

Troubleshooting

  • AI AssistView not rendering styles: Ensure the theme CSS is imported in src/App.vue and that any default Vue CLI starter styles are not overriding the AI AssistView styles.
  • Trial license warning banner: Register a license key via registerLicense() from @syncfusion/ej2-base.