Docs/Use it in your stack

Next.js

App Router or Pages Router. The SDK runs in the browser, in a client component.

Load the script in your root layout with next/script, then use it from a client component. There is nothing to add to API routes or server components.

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.chargemy.ai/v1/charge.js" strategy="afterInteractive" />
      </body>
    </html>
  )
}

app/ask.tsx

'use client'
import { useState } from 'react'

export default function Ask() {
  const [answer, setAnswer] = useState('')
  async function ask(q: string) {
    const reply = await window.charge.ai.chat(q)
    setAnswer(reply.text)
  }
  return <button onClick={() => ask('Write a welcome line for my store')}>Write it</button>
}

Only call charge.ai.chat() in the browser (event handlers, useEffect). It does not run on the server.

Next.js

Read next