Skip to main content

Integration with useChat

The useChat hook from Vercel’s AI SDK is the recommended way to integrate the assistant API into your application.
The Mintlify assistant API is compatible with AI SDK v4. If you use AI SDK v5 or later, you must configure a custom transport.
1

Install AI SDK v4

npm i ai@^4.1.15
2

Use the hook

import { useChat } from 'ai/react';

function MyComponent({ domain }) {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: `https://api-dsc.mintlify.com/v1/assistant/${domain}/message`,
    headers: {
      'Authorization': `Bearer ${process.env.MINTLIFY_TOKEN}`,
    },
    body: {
      fp: 'anonymous',
      retrievalPageSize: 5,
    },
    streamProtocol: 'data',
    sendExtraMessageFields: true,
  });

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'Assistant: '}
          {message.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}
Required configuration for Mintlify:
  • streamProtocol: 'data' - Required for streaming responses.
  • sendExtraMessageFields: true - Required to send message metadata.
  • body.fp - Fingerprint identifier (use ‘anonymous’ or a user identifier).
  • body.retrievalPageSize - Number of search results to use (recommended: 5).
See useChat in the AI SDK documentation for more details.

Rate limits

The assistant API has the following limits:
  • 10,000 uses per key per month
  • 10,000 requests per Mintlify organization per hour
  • 10,000 requests per IP per day