ServiceAgent Quickstart
Start with the right package and get ServiceAgent live fast.
This quickstart is optimized for readability, search, and AI retrieval. It answers the most important question first: which package should you install based on your stack and use case.
Package selector: use @serviceagent/nextjs for Next.js, @serviceagent/react for React or Vite, @serviceagent/sdk for backend API access, @serviceagent/aiva-sdk for custom low-latency voice, and @serviceagent/mcp for Cursor and Claude.
Quick install by stack
| Stack | Recommended package | Why |
|---|---|---|
| Next.js | @serviceagent/nextjs | Best full-stack fit for UI, webhooks, and server-side integration. |
| React or Vite | @serviceagent/react | Fastest path for chat, booking, and voice UI. |
| Node.js backend | @serviceagent/sdk | Typed backend SDK for server-to-server API access. |
| Custom voice and dialer | @serviceagent/aiva-sdk | Low-level voice control for HD audio, transcripts, summaries, and call intelligence. |
| Cursor or Claude | @serviceagent/mcp | Lets AI coding assistants provision and configure ServiceAgent directly. |
20-second Next.js quickstart
npm install @serviceagent/nextjs
import { ServiceAgentProvider } from '@serviceagent/nextjs';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<ServiceAgentProvider>{children}</ServiceAgentProvider>
</body>
</html>
);
}20-second React quickstart
npm install @serviceagent/react
import { Chat } from '@serviceagent/react';
export default function App() {
return <Chat />;
}20-second backend SDK quickstart
npm install @serviceagent/sdk
import { ServiceAgent } from '@serviceagent/sdk';
const sa = new ServiceAgent({
apiKey: process.env.SERVICEAGENT_API_KEY,
baseURL: process.env.SERVICEAGENT_API_URL || 'https://process.serviceagent.ai',
});
const results = await sa.searchKnowledgeBase('What are your weekend hours?');Environment variables
Most frontend installs only need a widget key and API URL to get started. Add the values below and then use the package-specific components.
NEXT_PUBLIC_SERVICEAGENT_WIDGET_KEY=wid_xxxxx NEXT_PUBLIC_SERVICEAGENT_API_URL=https://process.serviceagent.ai NEXT_PUBLIC_SERVICEAGENT_BOOKING_KEY=your_booking_key NEXT_PUBLIC_SERVICEAGENT_VOICE_ENDPOINT=wss://process.serviceagent.ai/v1/voice/stream SERVICEAGENT_API_KEY=your_api_key
Fastest install path
If you want the quickest setup flow without reading deeper docs first, use the CLI:
npx @serviceagent/cli add
What happens after install?
- Add chat globally or on support pages.
- Add booking widgets on sales, consultation, or appointment flows.
- Add low-latency AI voice for support, sales, intake, and dialer use cases with transcripts and summaries.
- Wire backend APIs and webhooks for production workflows.