// app/layout.tsx
import { ServiceAgentProvider } from '@serviceagent/nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ServiceAgentProvider>{children}</ServiceAgentProvider>
      </body>
    </html>
  );
}

This adds the chat widget to every page. Set environment variables:

NEXT_PUBLIC_SERVICEAGENT_WIDGET_KEY=wid_xxxxx
NEXT_PUBLIC_SERVICEAGENT_API_URL=https://process.serviceagent.ai
SERVICEAGENT_API_KEY=your_api_key

2. Server-side SDK

// In server components or API routes
import { createServiceAgentClient } from '@serviceagent/nextjs/server';

const sa = createServiceAgentClient();
const results = await sa.searchKnowledgeBase('How to reset password?');

3. Webhook Handler

// app/api/serviceagent/webhooks/route.ts
import { handleWebhook } from '@serviceagent/nextjs/server';

export const POST = handleWebhook({
  'contact.created': async (event) => {
    console.log('New contact:', event.data);
  },
  'appointment.created': async (event) => {
    console.log('New booking:', event.data);
  },
});

4. Calendar Booking

import { CalendarBooking } from '@serviceagent/nextjs';

export default function BookingPage() {
  return <CalendarBooking bookingKey="your_booking_key" />;
}

5. Voice Agent

import { VoiceAgent } from '@serviceagent/nextjs';

export default function CallPage() {
  return <VoiceAgent token="session_token" orgId="org_id" />;
}