Sprout Sidekick

Appearance

SidekickResponsive Chat Components

A Vue 3 plugin providing beautiful chat interfaces with shared state management

Get Started
View on GitHub
Sidekick
💬

Chat Components

SidekickChat for full interfaces and SidekickChatPlugin for floating widgets

🔄

Shared State

Both components share the same chat state automatically

🎨

Beautiful Design

Modern, responsive design with clean styling

🔐

Authentication Ready

Built-in token-based authentication support

📱

Responsive Design

Works perfectly on desktop, tablet, and mobile devices

⚡

TypeScript Support

Full TypeScript support with comprehensive type definitions

Quick Start ​

Install the plugin:

bash
npm install @sprout_lbjocson/sprout-sidekick

Use in your Vue app:

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

const app = createApp(App)
app.use(SproutSidekick)

Already using Sprout Design System?

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

const app = createApp(App)
app.use(SproutSidekick, {
  skipDesignSystem: true, // 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_lbjocson/sprout-sidekick'

const chatStore = useChatStore()

onMounted(() => {
  // Set the token
  chatStore.setToken(newToken)
})
</script>

Features ​

🎯 Easy Integration ​

Drop-in components that work out of the box with any Vue 3 application.

🌐 Shared State ​

Chat messages and state are synchronized between all components automatically.

🎨 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.