Configuration Examples

Overview

This page provides complete, copy-paste ready configuration examples for different use cases using the AgentProvider component.

Minimal Setup

The simplest configuration to get started:

import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: currentUser.id,
  getJwt: () => fetchMossToken(),
}}>
  <AssistantButton />
</AgentProvider>

This uses all Dashboard defaults. Perfect for quick testing or when Dashboard settings meet your needs.

Power User Setup

Full-featured configuration for users who need comprehensive assistance:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: 'premium-user-123',
  getJwt: () => fetchMossToken(),

  // Enable all features
  useVision: true,
  enableSessionRecording: true,
  enableScreenHistoryRecording: true,
  language: 'en',

  // Extended sessions for premium users
  sessionConfig: {
    inactivityTimeout: 60,
    maxSessionAge: 4,
    showNotification: true,
  },
}}>
  <AssistantButton />
</AgentProvider>

Developer / Debug Setup

Configuration optimized for development and debugging:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: 'dev-user',
  getJwt: () => fetchMossToken(),

  // Debug settings
  debugMode: true,
  logLevel: 'DEBUG',

  // Minimal stability checks for fast testing
  stability: {
    layers: {
      networkIdle: false,
      browserIdle: false,
    },
  },

  // Viewport screenshots for faster testing
  screenshotMode: 'viewport',
}}>
  <AssistantButton />
</AgentProvider>

Remember to disable debug settings in production for better performance.

Privacy-Focused Setup

Minimal data collection for privacy-conscious users:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: 'privacy-user-456',
  getJwt: () => fetchMossToken(),

  // Minimal data collection
  enableSessionRecording: false,
  enableScreenHistoryRecording: false,
  useVision: true,  // Still helpful but less data stored

  // Short sessions
  sessionConfig: {
    inactivityTimeout: 15,
    maxSessionAge: 1,
  },
}}>
  <AssistantButton />
</AgentProvider>

Multi-Tier Subscription Setup

Different configurations based on subscription level:

import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';

const subscriptionConfigs = {
  free: {
    sessionConfig: {
      inactivityTimeout: 15,
      maxSessionAge: 1,
    },
  },
  pro: {
    sessionConfig: {
      inactivityTimeout: 30,
      maxSessionAge: 2,
    },
  },
  enterprise: {
    sessionConfig: {
      inactivityTimeout: 60,
      maxSessionAge: 8,
    },
  },
};

function MossAssistant({ user }) {
  const tierConfig = subscriptionConfigs[user.tier] || subscriptionConfigs.free;

  return (
    <AgentProvider config={{
      apiUrl: 'https://moss-api.viamoss.ai',
      applicationId: 'YOUR_APP_ID',
      userId: user.id,
      getJwt: () => fetchMossToken(),
      ...tierConfig,
    }}>
      <AssistantButton />
    </AgentProvider>
  );
}

Next.js App Router

Complete setup for Next.js with App Router:

app/layout.tsx

import { MossAssistant } from '@/components/moss-assistant';
import { auth } from '@/lib/auth';

export default async function RootLayout({ children }) {
  const session = await auth();

  return (
    <html>
      <body>
        {children}
        {session?.user && <MossAssistant userId={session.user.id} />}
      </body>
    </html>
  );
}

components/moss-assistant.tsx

'use client';

import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';

export function MossAssistant({ userId }: { userId: string }) {
  return (
    <AgentProvider config={{
      apiUrl: 'https://moss-api.viamoss.ai',
      applicationId: process.env.NEXT_PUBLIC_MOSS_APP_ID!,
      userId,
      getJwt: async () => {
        const res = await fetch('/api/moss-token');
        const data = await res.json();
        return data.token;
      },
    }}>
      <AssistantButton />
    </AgentProvider>
  );
}

app/api/moss-token/route.ts

import jwt from 'jsonwebtoken';
import { auth } from '@/lib/auth';

export async function GET() {
  const session = await auth();
  if (!session?.user) {
    return Response.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const token = jwt.sign(
    { sub: session.user.id, app: process.env.MOSS_APP_ID },
    process.env.MOSS_JWT_SECRET!,
    { expiresIn: '1h', header: { kid: process.env.MOSS_KEY_ID! } }
  );

  return Response.json({ token });
}

Custom Branding Setup

Customize the assistant’s visual appearance to match your brand:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: currentUser.id,
  getJwt: () => fetchMossToken(),

  // Custom appearance
  appearance: {
    colors: {
      primary: '#3b82f6',
      primaryLight: '#60a5fa',
      primaryLighter: '#dbeafe',
    },
    modal: {
      defaultPosition: { right: 24, bottom: 24 },
      defaultSize: { width: 420, height: 650 },
    },
    effects: {
      glassmorphism: true,
      glassOpacity: 0.15,
    },
    radius: {
      lg: '16px',
      xl: '20px',
    },
  },
}}>
  <AssistantButton />
</AgentProvider>

Or use a preset theme:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: currentUser.id,
  getJwt: () => fetchMossToken(),
  appearance: 'blue',  // Use the blue preset
}}>
  <AssistantButton />
</AgentProvider>

Partial appearance objects are deep-merged with the base theme, so you only need to specify the properties you want to customize.

High-Performance Setup

Optimized for minimal overhead:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: currentUser.id,
  getJwt: () => fetchMossToken(),

  // Reduce screenshot processing
  screenshotMode: 'viewport',

  // Minimal logging
  logLevel: 'ERROR',
  debugMode: false,

  // Fast stability checks
  stability: {
    maxTotalWaitMs: 5000,
    layers: {
      networkIdle: true,
      domMutations: true,
      loadingIndicators: false,
      layoutShift: false,
      browserIdle: false,
      finalFrame: true,
    },
  },
}}>
  <AssistantButton />
</AgentProvider>

Best Practices Summary

Dashboard vs SDK Configuration

Use Dashboard Settings When:

Setting application-wide defaults
Configuring security policies (allowed domains, API keys)
Managing AI instructions that apply to all users
Settings that rarely change

Use SDK Configuration When:

Per-user customization is needed
Configuration depends on environment (dev/staging/prod)
Different user tiers need different settings
Integrating with existing user preferences

Performance Tips

Screenshot Mode: Use viewport for long pages
Stability Layers: Disable loadingIndicators and layoutShift unless needed
Session Recording: Disable for privacy-sensitive pages
Log Level: Use WARN or ERROR in production

Security Tips

Never expose API keys in client-side code
Use domain restrictions in Dashboard
Implement user consent for session recording
Use hashed/anonymized user IDs

Need Help?

SDK Reference

Complete SDK options reference

Advanced Configuration

Stability tuning and advanced features

Getting Started

SDK

Dashboard

Configuration

Security

Guides

Resources

Overview

Minimal Setup

Power User Setup

Developer / Debug Setup

Privacy-Focused Setup

Multi-Tier Subscription Setup

Next.js App Router

Custom Branding Setup

High-Performance Setup

Best Practices Summary

Dashboard vs SDK Configuration

Performance Tips

Security Tips

Need Help?

SDK Reference

Advanced Configuration

​Overview

​Minimal Setup

​Power User Setup

​Developer / Debug Setup

​Privacy-Focused Setup

​Multi-Tier Subscription Setup

​Next.js App Router

​Custom Branding Setup

​High-Performance Setup

​Best Practices Summary

​Dashboard vs SDK Configuration

​Performance Tips

​Security Tips

​Need Help?

SDK Reference

Advanced Configuration

Overview

Minimal Setup

Power User Setup

Developer / Debug Setup

Privacy-Focused Setup

Multi-Tier Subscription Setup

Next.js App Router

Custom Branding Setup

High-Performance Setup

Best Practices Summary

Dashboard vs SDK Configuration

Performance Tips

Security Tips

Need Help?