Sprout Sidekick

Appearance

Installation ​

Prerequisites ​

  • Vue 3.0+
  • Node.js 16+

Package Installation ​

Install the package using your preferred package manager:

bash
npm install @sprout_lbjocson/sprout-sidekick
bash
yarn add @sprout_lbjocson/sprout-sidekick
bash
pnpm add @sprout_lbjocson/sprout-sidekick

Plugin Setup ​

Install the plugin globally in your main application file:

typescript
// main.ts
import { createApp } from 'vue'
import SproutSidekick from '@sprout_lbjocson/sprout-sidekick'
import '@sprout_lbjocson/sprout-sidekick/dist/sprout-sidekick.css'
import App from './App.vue'

const app = createApp(App)

// Install the plugin
app.use(SproutSidekick, {
  skipDesignSystem: true, // Skip installing the design system if already installed
})

app.mount('#app')

CSS Import ​

Don't forget to import the CSS file for proper styling:

typescript
import '@sprout_lbjocson/sprout-sidekick/dist/sprout-sidekick.css'

Or in your CSS file:

css
@import '@sprout_lbjocson/sprout-sidekick/dist/sprout-sidekick.css';

State Management ​

The plugin includes built-in state management for chat functionality. No additional setup is required.

TypeScript Support ​

The plugin includes comprehensive TypeScript definitions. No additional setup is required for TypeScript projects.

Environment Variables ​

Create a .env file in your project root with the following environment variables:

env
VITE_CHAT_BE_QA=https://agent-center-be-qa.sprout.ph
VITE_CHAT_BE_PROD=https://agent-center-be.sprout.ph

These environment variables are required for the plugin to connect to the appropriate backend services. The plugin will select the backend based on the mode configuration option (defaults to QA).

Configuration ​

The plugin can be configured with various options:

typescript
app.use(SproutSidekickPlugin, {
  mode: 'QA', // 'QA' or 'PROD' (default: 'QA')
  baseUrl: 'https://custom-backend.com', // Optional: custom URL (takes precedence over mode)
  skipDesignSystem: true, // Skip installing the design system if already installed
})

Configuration Options ​

Mode Option ​

  • mode: Specifies which backend environment to use ('QA' or 'PROD')
    • Default: 'QA'
    • Case-insensitive (accepts 'QA', 'qa', 'PROD', 'prod')
    • Uses VITE_CHAT_BE_QA when mode is 'QA'
    • Uses VITE_CHAT_BE_PROD when mode is 'PROD'

Base URL Option ​

  • baseUrl: Optional custom backend URL (string)
    • Takes precedence over mode when provided
    • Allows you to specify any backend URL directly
    • Useful when you need to connect to a custom backend or override the environment-based selection

Priority Order:

  1. baseUrl (if provided) - highest priority
  2. mode (if provided) - uses corresponding environment variable
  3. Default to QA mode (VITE_CHAT_BE_QA)

Configuration Examples ​

Using mode only:

typescript
app.use(SproutSidekickPlugin, {
  mode: 'PROD', // Uses VITE_CHAT_BE_PROD
})

Using custom baseUrl:

typescript
app.use(SproutSidekickPlugin, {
  baseUrl: 'https://my-custom-backend.com', // Uses this URL directly
})

Using both (baseUrl takes precedence):

typescript
app.use(SproutSidekickPlugin, {
  mode: 'PROD',
  baseUrl: 'https://custom-backend.com', // This will be used, mode is ignored
})

Default (uses QA mode):

typescript
app.use(SproutSidekickPlugin) // Uses VITE_CHAT_BE_QA

The plugin works out of the box without additional configuration. All chat state and functionality is managed automatically.

Next Steps ​

Now that you have the plugin installed, learn how to use it in the Usage Guide.