💬
Unified Components
Full-featured chat with built-in state management - SidekickChat and SidekickChatPlugin
SidekickResponsive Chat Components
A Vue 3 plugin providing beautiful chat interfaces with shared state management
Skip to content
Quick Start
Install the plugin:
bash
npm install @sprout_ai_labs/sidekickUse in your Vue app:
typescript
import { createApp } from 'vue'
import SproutSidekick from '@sprout_ai_labs/sidekick'
import '@sprout_ai_labs/sidekick/dist/sprout-sidekick.css'
const app = createApp(App)
app.use(SproutSidekick, {
mode: 'PROD', // Required: 'QA' or 'PROD'
appName: 'My Application', // Required: Your application name (used for analytics)
skipDesignSystem: false, // Optional: Skip installing the design system if already installed
})Already using Sprout Design System?
typescript
import { createApp } from 'vue'
import SproutSidekick from '@sprout_ai_labs/sidekick'
import '@sprout_ai_labs/sidekick/dist/sprout-sidekick.css'
const app = createApp(App)
app.use(SproutSidekick, {
mode: 'PROD', // Required: 'QA' or 'PROD'
appName: 'My Application', // Required: Your application name (used for analytics)
skipDesignSystem: true, // Optional: Skip installing the design system if already installed
})Add components to your templates:
vue
<template>
<!-- Full chat interface -->
<ClientOnly>
<SidekickChat />
</ClientOnly>
<!-- Floating chat widget -->
<ClientOnly>
<SidekickChatPlugin />
</ClientOnly>
</template>
<script>
import { useChatStore } from '@sprout_ai_labs/sidekick'
const chatStore = useChatStore()
onMounted(() => {
// Set the token
chatStore.setToken(newToken)
})
</script>Two Ways to Use Sidekick
🔄 Unified Components - Quick Setup
Perfect for standard chat implementations with built-in state management.
vue
<template>
<SidekickChat />
<SidekickChatPlugin />
</template>Learn more about Unified Components →
🎯 Standalone Components - Maximum Flexibility
Perfect for custom state management and integration into existing applications.
vue
<template>
<SidekickMessages :messages="messages" :is-typing="isTyping" />
<SidekickChatInput @submit="handleSubmit" />
<SidekickCollapsibleThought :steps="thoughts" :duration="5" />
</template>Learn more about Standalone Components →
Features
🎯 Easy Integration
Drop-in components that work out of the box with any Vue 3 application.
🌐 Flexible State Management
Choose between built-in Pinia store (unified) or custom state management (standalone).
🎨 Customizable
Clean styling makes it easy to customize the appearance to match your brand.
📱 Mobile First
Responsive design ensures great user experience on all devices.
🔒 Secure
Built-in authentication token system for secure chat sessions.