> ## Documentation Index
> Fetch the complete documentation index at: https://docs.viamoss.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Configuration Examples
> Complete configuration examples for common use cases
## 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:
```tsx theme={null}
import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';
fetchMossToken(),
}}>
```
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:
```tsx theme={null}
fetchMossToken(),
// Enable all features
useVision: true,
enableSessionRecording: true,
enableScreenHistoryRecording: true,
language: 'en',
// Extended sessions for premium users
sessionConfig: {
inactivityTimeout: 60,
maxSessionAge: 4,
showNotification: true,
},
}}>
```
***
## Developer / Debug Setup
Configuration optimized for development and debugging:
```tsx theme={null}
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',
}}>
```
Remember to disable debug settings in production for better performance.
***
## Privacy-Focused Setup
Minimal data collection for privacy-conscious users:
```tsx theme={null}
fetchMossToken(),
// Minimal data collection
enableSessionRecording: false,
enableScreenHistoryRecording: false,
useVision: true, // Still helpful but less data stored
// Short sessions
sessionConfig: {
inactivityTimeout: 15,
maxSessionAge: 1,
},
}}>
```
***
## Multi-Tier Subscription Setup
Different configurations based on subscription level:
```tsx theme={null}
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 (
fetchMossToken(),
...tierConfig,
}}>
);
}
```
***
## Next.js App Router
Complete setup for Next.js with App Router:
```tsx app/layout.tsx theme={null}
import { MossAssistant } from '@/components/moss-assistant';
import { auth } from '@/lib/auth';
export default async function RootLayout({ children }) {
const session = await auth();
return (
{children}
{session?.user && }
);
}
```
```tsx components/moss-assistant.tsx theme={null}
'use client';
import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';
export function MossAssistant({ userId }: { userId: string }) {
return (
{
const res = await fetch('/api/moss-token');
const data = await res.json();
return data.token;
},
}}>
);
}
```
```typescript app/api/moss-token/route.ts theme={null}
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:
```tsx theme={null}
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',
},
},
}}>
```
Or use a preset theme:
```tsx theme={null}
fetchMossToken(),
appearance: 'blue', // Use the blue preset
}}>
```
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:
```tsx theme={null}
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,
},
},
}}>
```
***
## 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
1. **Screenshot Mode**: Use `viewport` for long pages
2. **Stability Layers**: Disable `loadingIndicators` and `layoutShift` unless needed
3. **Session Recording**: Disable for privacy-sensitive pages
4. **Log Level**: Use `WARN` or `ERROR` in production
### Security Tips
1. Never expose API keys in client-side code
2. Use domain restrictions in Dashboard
3. Implement user consent for session recording
4. Use hashed/anonymized user IDs
***
## Need Help?
Complete SDK options reference
Stability tuning and advanced features