use-assistant-instructions

useAssistantInstructions is a React hook that allows you to set system instructions for your assistant-ui components.

Usage#

import { useAssistantInstructions } from "@assistant-ui/react";

function MyComponent() {
  // Simple string usage
  useAssistantInstructions("You are a helpful form assistant...");

  // With configuration object
  useAssistantInstructions({
    instruction: "You are a helpful form assistant...",
    disabled: false, // Optional: disable the instructions
  });

  return <div>My Component</div>;
}

API Reference#

Parameters#

The hook accepts either:

A string containing the system instructions
A configuration object with:
- instruction: The system instructions
- disabled: Optional boolean to disable the instructions

Behavior#

The hook will:

Register the provided instructions as system instructions in the model context
Automatically clean up when the component unmounts
Update when the instructions change
Do nothing if disabled is set to true

Example#

function SmartForm() {
  useAssistantInstructions({
    instruction: `
      You are a form assistant that:
      - Validates user input
      - Provides helpful suggestions
      - Explains any errors
      - Guides users through complex fields
    `,
  });

  return <form>{/* Your form fields here */}</form>;
}