> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a legal notice to the chat widget

> Add or replace a legal notice in the React InstantSearch chat widget.

<Note>
  This is the **React InstantSearch v7** documentation.
  If you're upgrading from v6, see the [upgrade guide](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-v6-to-react-instantsearch-v7).
  If you were using React InstantSearch Hooks,
  this v7 documentation applies—just check for [necessary changes](/doc/guides/building-search-ui/upgrade-guides/react/#migrate-from-react-instantsearch-hooks-to-react-instantsearch-v7).
  To continue using v6, you can find the [archived documentation](https://algolia.com/old-docs/deprecated/instantsearch/react/v6/api-reference/instantsearch/).
</Note>

Use the [`Chat`](/doc/api-reference/widgets/chat/react) widget's prompt to add a legal notice, replace the default disclaimer, or show a warning above the prompt.

If you only need to change the text in the prompt footer, use `translations.prompt.disclaimer`.
If you need richer content such as a link, use `promptFooterComponent` instead.

## Change the prompt disclaimer text

Use `translations.prompt.disclaimer` to replace the default prompt disclaimer without changing the footer layout.

```jsx React icon=code theme={"system"}
<Chat
  agentId="YOUR_AGENT_ID"
  translations={{
    prompt: {
      disclaimer: "Responses are generated by AI. Verify important details.",
    },
  }}
/>
```

## Replace the prompt footer

Use `promptFooterComponent` when you need more than plain text.
For example, you can add a link to your AI policy or legal terms.

```jsx React icon=code theme={"system"}
function LegalNotice() {
  return (
    <p className="ChatLegalNotice">
      Responses are generated by AI.
      {" "}
      <a href="/legal/ai-policy">Read the AI policy</a>.
    </p>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  promptFooterComponent={LegalNotice}
/>
```

<Note>
  `promptFooterComponent` replaces the default prompt footer content.
  Use `promptHeaderComponent` to show content above the textarea instead.
</Note>

## Add message footers

Use `assistantMessageFooterComponent` or `userMessageFooterComponent` to display content below each message bubble.

```jsx React icon=code theme={"system"}
function AssistantNotice() {
  return (
    <small>
      Verify important details before acting on this response.
    </small>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  assistantMessageFooterComponent={AssistantNotice}
/>
```

Use `userMessageFooterComponent` to show a footer below user messages.

## Show a warning above the prompt

Use `promptHeaderComponent` to display a warning above the prompt input instead of below it.

```jsx React icon=code theme={"system"}
function WarningBanner() {
  return (
    <div className="ChatPromptWarning">
      Don't share personal or sensitive information in the chat.
    </div>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  promptHeaderComponent={WarningBanner}
/>
```

For more information, see the [Chat API reference](/doc/api-reference/widgets/chat/react).