You're viewing an archived version of our docs. Check out our current documentation →
Guides / Algolia AI / Agent Studio

Integrate Agent Studio

On this page

Agent Studio is a beta feature according to the Algolia Terms of Service (“Beta Services”).

Integration overview

Integrate the Agent Studio with your application to deliver generative AI experiences powered by Algolia and large language models (LLMs). You can interact with your published agents using HTTP API or use the AI SDK UI for a seamless integration.

Step-by-step: Integrate Agent Studio

  1. Prepare your agent
    • Ensure your agent is created and configured in the Algolia dashboard.
    • Only Published agents can be used for integration.
    • See dashboard setup guide
  2. Get your agent ID
  3. Choose your integration method
    • HTTP API: Directly interact with your agent using HTTP requests.
    • AI SDK UI: Use the React-based SDK for a ready-to-use conversational UI.

API integration

Interact with your GenAI agent directly using the Agent Studio API.

Example curl request:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

curl 'https://{{YourApplicationID}}.algolia.net/agent-studio/1/agents/{{agentId}}/completions?stream=false&compatibilityMode=ai-sdk-5' \
  -X POST \
  -H 'Content-Type: application/json' \
  -H 'x-algolia-application-id: YourApplicationID' \
  -H 'X-Algolia-API-Key: YourSearchOnlyApiKey' \
  --data-raw '{
  "messages": [
        {
            "role": "user",
            "parts": [
                {
                    "text": "What is 1+1 ?"
                }
            ]
        }
    ]
}'

And the response would look like the following:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

{
    "role": "assistant",
    "parts": [
        {
            "type": "step-start"
        },
        {
            "type": "text",
            "text": "1 + 1 = 2"
        }
    ]
}

To continue the conversation, you should include the previous messages in the request:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

{
    "messages": [
        {
            "role": "user",
            "parts": [
                {
                    "text": "What is 1+1 ?"
                }
            ]
        },
        {
            "role": "assistant",
            "parts": [
                {
                    "type": "step-start"
                },
                {
                    "type": "text",
                    "text": "1 + 1 = 2"
                }
            ]
        },
+       {
+           "role": "user",
+           "parts": [
+               {
+                   "text": "What is the sum of the previous value + 3"
+               }
+           ]
+       }
    ]
}

Notes:

  • Replace {{YourApplicationID}} with your Algolia application ID.
  • Replace {{agentId}} with your published agent ID.
  • Use your application’s search-only API key for authentication.
  • The endpoint supports streaming responses and is compatible with ai-sdk v5/v4.
  • For streaming responses, set stream=true in the query parameters.
  • For production, secure your API keys and restrict usage as needed.

AI SDK UI integration

The Agent Studio is compatible with AI SDK UI, a React-based UI integration for building conversational interfaces.

Agent Studio supports both ai-sdk v5 and v4 versions.

Installation

Copy 
1

npm install ai @ai-sdk/react

Example React integration

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

import { useState } from 'react';
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai';

const App = () => {
  const [input, setInput] = useState('');
  
  const { messages, sendMessage } = useChat({
      transport: new DefaultChatTransport({
      api: `https://${YourApplicationID}.algolia.net/agent-studio/1/agents/${agentId}/completions?streaming=true&compatibilityMode=ai-sdk-5`,
      headers: {
        'x-algolia-application-id': 'YourApplicationID',
        'x-algolia-api-key': 'YourSearchOnlyApiKey',
      },
    }),
  })

  const handleSubmit = e => {
    e.preventDefault();
    sendMessage({ text: input });
    setInput('');
  };

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role}:{message.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={e => setInput(e.target.value)} />
        <button type="submit">Submit</button>
      </form>
    </>
  )
}

Why use AI SDK UI?

  • Abstracts low-level HTTP calls.
  • Built-in error handling, retries, and extensibility using middleware/plugins.
  • Fast setup for conversational frontends.

You can fully use Agent Studio without AI SDK UI, but it simplifies the integration process and handles common tasks like state management and UI rendering.

Advanced use cases: