설정 예시

개요

이 페이지는 AgentProvider 컴포넌트를 사용하는 다양한 사용 사례에 대한 완전한 복사-붙여넣기 가능한 설정 예시를 제공합니다.

최소 설정

가장 간단한 시작 설정:

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>

모든 대시보드 기본값을 사용합니다. 빠른 테스트나 대시보드 설정이 요구 사항을 충족하는 경우에 적합합니다.

파워 유저 설정

포괄적인 지원이 필요한 사용자를 위한 전체 기능 설정:

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

  // 모든 기능 활성화
  useVision: true,
  enableSessionRecording: true,
  enableScreenHistoryRecording: true,
  language: 'ko',

  // 프리미엄 사용자를 위한 확장된 세션
  sessionConfig: {
    inactivityTimeout: 60,
    maxSessionAge: 4,
    showNotification: true,
  },
}}>
  <AssistantButton />
</AgentProvider>

개발자 / 디버그 설정

개발 및 디버깅에 최적화된 설정:

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

  // 디버그 설정
  debugMode: true,
  logLevel: 'DEBUG',

  // 빠른 테스트를 위한 최소 안정성 검사
  stability: {
    layers: {
      networkIdle: false,
      browserIdle: false,
    },
  },

  // 더 빠른 테스트를 위한 뷰포트 스크린샷
  screenshotMode: 'viewport',
}}>
  <AssistantButton />
</AgentProvider>

더 나은 성능을 위해 프로덕션에서는 디버그 설정을 비활성화하는 것을 잊지 마세요.

개인정보 중심 설정

개인정보에 민감한 사용자를 위한 최소 데이터 수집:

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

  // 최소 데이터 수집
  enableSessionRecording: false,
  enableScreenHistoryRecording: false,
  useVision: true,  // 여전히 유용하지만 저장되는 데이터 감소

  // 짧은 세션
  sessionConfig: {
    inactivityTimeout: 15,
    maxSessionAge: 1,
  },
}}>
  <AssistantButton />
</AgentProvider>

다중 등급 구독 설정

구독 수준에 따른 다양한 설정:

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

Next.js 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 });
}

커스텀 브랜딩 설정

어시스턴트의 비주얼 외관을 브랜드에 맞게 사용자 정의합니다:

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

또는 프리셋 테마를 사용합니다:

<AgentProvider config={{
  apiUrl: 'https://moss-api.viamoss.ai',
  applicationId: 'YOUR_APP_ID',
  userId: currentUser.id,
  getJwt: () => fetchMossToken(),
  appearance: 'blue',  // 블루 프리셋 사용
}}>
  <AssistantButton />
</AgentProvider>

부분 외관 객체는 기본 테마와 깊은 병합(deep-merge)되므로 사용자 정의하려는 속성만 지정하면 됩니다.

고성능 설정

최소 오버헤드에 최적화:

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

  // 스크린샷 처리 감소
  screenshotMode: 'viewport',

  // 최소 로깅
  logLevel: 'ERROR',
  debugMode: false,

  // 빠른 안정성 검사
  stability: {
    maxTotalWaitMs: 5000,
    layers: {
      networkIdle: true,
      domMutations: true,
      loadingIndicators: false,
      layoutShift: false,
      browserIdle: false,
      finalFrame: true,
    },
  },
}}>
  <AssistantButton />
</AgentProvider>

모범 사례 요약

대시보드 vs SDK 설정

대시보드 설정 사용 시기:

애플리케이션 전체 기본값 설정
보안 정책 구성 (허용 도메인, API 키)
모든 사용자에게 적용되는 AI 지침 관리
거의 변경되지 않는 설정

SDK 설정 사용 시기:

사용자별 사용자 정의가 필요한 경우
환경에 따른 설정 (개발/스테이징/프로덕션)
다른 사용자 등급에 다른 설정이 필요한 경우
기존 사용자 기본 설정과 통합

성능 팁

스크린샷 모드: 긴 페이지에는 viewport 사용
안정성 레이어: 필요하지 않은 경우 loadingIndicators 및 layoutShift 비활성화
세션 녹화: 개인정보에 민감한 페이지에서는 비활성화
로그 레벨: 프로덕션에서는 WARN 또는 ERROR 사용

보안 팁

클라이언트 측 코드에 API 키를 노출하지 마세요
대시보드에서 도메인 제한 사용
세션 녹화에 대한 사용자 동의 구현
해시된/익명화된 사용자 ID 사용

도움이 필요하신가요?

SDK 참조

전체 SDK 옵션 참조

고급 설정

안정성 튜닝 및 고급 기능

시작하기

SDK

대시보드

설정

보안

가이드

리소스

개요

최소 설정

파워 유저 설정

개발자 / 디버그 설정

개인정보 중심 설정

다중 등급 구독 설정

Next.js App Router

커스텀 브랜딩 설정

고성능 설정

모범 사례 요약

대시보드 vs SDK 설정

성능 팁

보안 팁

도움이 필요하신가요?

SDK 참조

고급 설정

​개요

​최소 설정

​파워 유저 설정

​개발자 / 디버그 설정

​개인정보 중심 설정

​다중 등급 구독 설정

​Next.js App Router

​커스텀 브랜딩 설정

​고성능 설정

​모범 사례 요약

​대시보드 vs SDK 설정

​성능 팁

​보안 팁

​도움이 필요하신가요?

SDK 참조

고급 설정

개요

최소 설정

파워 유저 설정

개발자 / 디버그 설정

개인정보 중심 설정

다중 등급 구독 설정

Next.js App Router

커스텀 브랜딩 설정

고성능 설정

모범 사례 요약

대시보드 vs SDK 설정

성능 팁

보안 팁

도움이 필요하신가요?