Skip to main content
Use this example when you want to use or style Akapulu’s prebuilt conversation UI with a post-call review screen.

​
What this example shows

  • AkapuluProvider from @akapulu/react and AkapuluConversation from @akapulu/react-ui.
  • Local route handlers use @akapulu/server to call Akapulu (API key stays on the server).
  • Two pages — /default and /styled — for a minimal reference vs a styled / extended setup.

​
/default

​
What it includes

  • Default AkapuluProvider with AkapuluConversation
  • No custom styles or render props
  • Minimal reference: fastest path to a working call with default prebuilt chrome

​
Routes

  • Provider endpoints: /api/default/akapulu/connect and /api/default/akapulu/updates

​
/styled

​
What it includes

  • AkapuluProvider + AkapuluConversation, with extra props for customization
  • styles — slot-level theming (dark layout in the example).
  • renderTranscriptEntry / renderToolEvent — custom transcript rows and tool UI (see app/styled/customization.tsx).
  • connectBody — sample JSON the browser sends to your local connect route.

​
Route-specific behavior

  • useAkapuluEvents — logs the full event stream to the console (dev aid).
  • /api/styled/akapulu/* — same connect/update pattern as /default, but its own URLs.

​
After the call ends

  • Opens a post-call review UI in the example app.
  • Conversation data comes from getConversationDetail (metadata + transcript rows) and getConversationRecording (redirect / JSON / binary).

​
View on GitHub