> ## 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.
# 설정 예시
> 일반적인 사용 사례를 위한 전체 설정 예시
## 개요
이 페이지는 `AgentProvider` 컴포넌트를 사용하는 다양한 사용 사례에 대한 완전한 복사-붙여넣기 가능한 설정 예시를 제공합니다.
***
## 최소 설정
가장 간단한 시작 설정:
```tsx theme={null}
import { AgentProvider, AssistantButton } from '@viamoss/moss-sdk';
fetchMossToken(),
}}>
```
모든 대시보드 기본값을 사용합니다. 빠른 테스트나 대시보드 설정이 요구 사항을 충족하는 경우에 적합합니다.
***
## 파워 유저 설정
포괄적인 지원이 필요한 사용자를 위한 전체 기능 설정:
```tsx theme={null}
fetchMossToken(),
// 모든 기능 활성화
useVision: true,
enableSessionRecording: true,
enableScreenHistoryRecording: true,
language: 'ko',
// 프리미엄 사용자를 위한 확장된 세션
sessionConfig: {
inactivityTimeout: 60,
maxSessionAge: 4,
showNotification: true,
},
}}>
```
***
## 개발자 / 디버그 설정
개발 및 디버깅에 최적화된 설정:
```tsx theme={null}
fetchMossToken(),
// 디버그 설정
debugMode: true,
logLevel: 'DEBUG',
// 빠른 테스트를 위한 최소 안정성 검사
stability: {
layers: {
networkIdle: false,
browserIdle: false,
},
},
// 더 빠른 테스트를 위한 뷰포트 스크린샷
screenshotMode: 'viewport',
}}>
```
더 나은 성능을 위해 프로덕션에서는 디버그 설정을 비활성화하는 것을
잊지 마세요.
***
## 개인정보 중심 설정
개인정보에 민감한 사용자를 위한 최소 데이터 수집:
```tsx theme={null}
fetchMossToken(),
// 최소 데이터 수집
enableSessionRecording: false,
enableScreenHistoryRecording: false,
useVision: true, // 여전히 유용하지만 저장되는 데이터 감소
// 짧은 세션
sessionConfig: {
inactivityTimeout: 15,
maxSessionAge: 1,
},
}}>
```
***
## 다중 등급 구독 설정
구독 수준에 따른 다양한 설정:
```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
Next.js 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 });
}
```
***
## 커스텀 브랜딩 설정
어시스턴트의 비주얼 외관을 브랜드에 맞게 사용자 정의합니다:
```tsx theme={null}
fetchMossToken(),
// 커스텀 외관
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',
},
},
}}>
```
또는 프리셋 테마를 사용합니다:
```tsx theme={null}
fetchMossToken(),
appearance: 'blue', // 블루 프리셋 사용
}}>
```
부분 외관 객체는 기본 테마와 깊은 병합(deep-merge)되므로 사용자 정의하려는 속성만 지정하면 됩니다.
***
## 고성능 설정
최소 오버헤드에 최적화:
```tsx theme={null}
fetchMossToken(),
// 스크린샷 처리 감소
screenshotMode: 'viewport',
// 최소 로깅
logLevel: 'ERROR',
debugMode: false,
// 빠른 안정성 검사
stability: {
maxTotalWaitMs: 5000,
layers: {
networkIdle: true,
domMutations: true,
loadingIndicators: false,
layoutShift: false,
browserIdle: false,
finalFrame: true,
},
},
}}>
```
***
## 모범 사례 요약
### 대시보드 vs SDK 설정
**대시보드 설정 사용 시기:**
* 애플리케이션 전체 기본값 설정
* 보안 정책 구성 (허용 도메인, API 키)
* 모든 사용자에게 적용되는 AI 지침 관리
* 거의 변경되지 않는 설정
**SDK 설정 사용 시기:**
* 사용자별 사용자 정의가 필요한 경우
* 환경에 따른 설정 (개발/스테이징/프로덕션)
* 다른 사용자 등급에 다른 설정이 필요한 경우
* 기존 사용자 기본 설정과 통합
### 성능 팁
1. **스크린샷 모드**: 긴 페이지에는 `viewport` 사용
2. **안정성 레이어**: 필요하지 않은 경우 `loadingIndicators` 및 `layoutShift` 비활성화
3. **세션 녹화**: 개인정보에 민감한 페이지에서는 비활성화
4. **로그 레벨**: 프로덕션에서는 `WARN` 또는 `ERROR` 사용
### 보안 팁
1. 클라이언트 측 코드에 API 키를 노출하지 마세요
2. 대시보드에서 도메인 제한 사용
3. 세션 녹화에 대한 사용자 동의 구현
4. 해시된/익명화된 사용자 ID 사용
***
## 도움이 필요하신가요?
전체 SDK 옵션 참조
안정성 튜닝 및 고급 기능