Overview

Access and control the AskAI state from any component inside AskAI, including surfaces like AskAI.Dialog or AskAI.Chat.

Demo

This demo uses useAskAI to open AskAI.Dialog and send a predefined question when the button is clicked.

Example

import { AskAI, useAskAI } from 'peam/client';

function UseAskAIButton() {
  const { sendMessage } = useAskAI();

  return (
    <button
      type="button"
      onClick={() => {
        sendMessage({ text: 'How can I install Peam?' });
      }}
    >
      Ask how to install Peam
    </button>
  );
}

export default function Page() {
  return (
    <AskAI>
      <AskAI.Trigger />
      <AskAI.Dialog />
      <UseAskAIButton />
    </AskAI>
  );
}

Example with `AskAIProvider`

Use AskAIProvider in a layout and call useAskAI from a page or nested component, then render AskAI to provide the surfaces (like AskAI.Trigger and AskAI.Dialog).

// app/layout.tsx
import { AskAIProvider, AskAI } from 'peam/client';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AskAIProvider>
          {children}
          <AskAI />
        </AskAIProvider>
      </body>
    </html>
  );
}

// app/page.tsx
import { useAskAI } from 'peam/client';

function AskAICTA() {
  const { sendMessage } = useAskAI();

  return (
    <button
      type="button"
      onClick={() => {
        sendMessage({ text: 'Summarize this page' });
      }}
    >
      Ask AI about this page
    </button>
  );
}

export default function Page() {
  return (
    <main>
      <AskAICTA />
    </main>
  );
}

Returns

Value	Type	Description
`open`	`boolean`	Current open state.
`setOpen`	`(open: boolean) => void`	Set open state.
`toggleOpen`	`() => void`	Toggle open state.
`input`	`string`	Current input text.
`setInput`	`(value: string, options?: { open?: boolean }) => void`	Update input text and optionally open the surface.
`messages`	`UIMessage[]`	Current chat messages.
`status`	`ChatStatus`	Streaming status.
`error`	`Error \| undefined`	Transport or streaming error.
`isLoading`	`boolean`	Loading persisted history.
`sendMessage`	`({ text: string }, options?: { open?: boolean }) => void`	Send a message and optionally open the surface.
`handleSubmit`	`(message: PromptInputMessage) => void`	Submit handler used by `AskAI.Input`.
`regenerate`	`(options?: { messageId?: string }) => void`	Regenerate a response.
`clearMessages`	`() => void \| Promise<void>`	Clear message history.

useAskAI

Overview

Demo

Example

Example with AskAIProvider

Returns

On this page

Example with `AskAIProvider`