Ask AI API reference

class AskAIChat {
  constructor({ appId, apiKey, indexName, assistantId }) {
    this.appId = appId;
    this.apiKey = apiKey;
    this.indexName = indexName;
    this.assistantId = assistantId;
    this.baseUrl = "https://askai.algolia.com";
  }

  async getToken() {
    const response = await fetch(`${this.baseUrl}/chat/token`, {
      method: "POST",
      headers: {
        "X-Algolia-Assistant-Id": this.assistantId,
      },
    });
    const data = await response.json();
    return data.token;
  }

  async sendMessage(conversationId, messages, searchParameters = {}) {
    const token = await this.getToken();

    const response = await fetch(`${this.baseUrl}/chat`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Algolia-Application-Id": this.appId,
        "X-Algolia-API-Key": this.apiKey,
        "X-Algolia-Index-Name": this.indexName,
        "X-Algolia-Assistant-Id": this.assistantId,
        "X-AI-SDK-Version": "v4",
        Authorization: token,
      },
      body: JSON.stringify({
        id: conversationId,
        messages,
        ...(Object.keys(searchParameters).length > 0 && { searchParameters }),
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    // Return a streaming iterator for real-time response handling
    return {
      async *[Symbol.asyncIterator]() {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();

        try {
          while (true) {
            const { done, value } = await reader.read();
            if (done) break;

            // Decode and yield each chunk as it arrives
            const chunk = decoder.decode(value, { stream: true });
            if (chunk.trim()) {
              yield chunk;
            }
          }
        } finally {
          reader.releaseLock();
        }
      },
    };
  }

  async submitFeedback(messageId, thumbs) {
    const token = await this.getToken();

    const response = await fetch(`${this.baseUrl}/chat/feedback`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Algolia-Assistant-Id": this.assistantId,
        Authorization: token,
      },
      body: JSON.stringify({
        appId: this.appId,
        messageId,
        thumbs,
      }),
    });

    return response.json();
  }
}

// Usage with streaming
const chat = new AskAIChat({
  appId: "ALGOLIA_APPLICATION_ID",
  apiKey: "ALGOLIA_API_KEY",
  indexName: "INDEX_NAME",
  assistantId: "ALGOLIA_ASSISTANT_ID",
});

// Send message and handle streaming response
const stream = await chat.sendMessage(
  "conversation-1",
  [
    {
      role: "user",
      content: "What is Algolia?",
      id: "msg-1",
    },
  ],
  {
    facetFilters: ["language:en", "type:content"],
    filters: "status:published",
    attributesToRetrieve: ["title", "content", "url"],
    restrictSearchableAttributes: ["title", "content"],
    distinct: true,
  }
); // Add search parameters

// Display response as it streams in real-time
let fullResponse = "";
for await (const chunk of stream) {
  fullResponse += chunk;
  console.log("Received chunk:", chunk);
  // Update your UI immediately with each chunk
  // e.g., appendToMessageUI(chunk);
}
console.log("Complete response:", fullResponse);

import { useState, useCallback, useRef } from "react";

function AskAIChat({ appId, apiKey, indexName, assistantId }) {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isStreaming, setIsStreaming] = useState(false);
  const abortControllerRef = useRef(null);
  const baseUrl = "https://askai.algolia.com";

  const getToken = useCallback(async () => {
    const response = await fetch(`${baseUrl}/chat/token`, {
      method: "POST",
      headers: {
        "X-Algolia-Assistant-Id": assistantId,
      },
    });
    const data = await response.json();
    return data.token;
  }, [assistantId]);

  const sendMessage = useCallback(
    async (content) => {
      const newMessage = {
        role: "user",
        content,
        id: `msg-${Date.now()}`,
      };

      setMessages((prev) => [...prev, newMessage]);
      setIsLoading(true);
      setIsStreaming(true);

      // Create abort controller for cancellation
      abortControllerRef.current = new AbortController();

      try {
        const token = await getToken();
        const response = await fetch(`${baseUrl}/chat`, {
          method: "POST",
          signal: abortControllerRef.current.signal,
          headers: {
            "Content-Type": "application/json",
            "X-Algolia-Application-Id": appId,
            "X-Algolia-API-Key": apiKey,
            "X-Algolia-Index-Name": indexName,
            "X-Algolia-Assistant-Id": assistantId,
            "X-AI-SDK-Version": "v4",
            Authorization: token,
          },
          body: JSON.stringify({
            id: "conversation-1",
            messages: [...messages, newMessage],
            searchParameters: {
              facetFilters: ["language:en", "type:content"],
              filters: "status:published",
              attributesToRetrieve: ["title", "content", "url"],
              restrictSearchableAttributes: ["title", "content"],
              distinct: true,
            },
          }),
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // Handle streaming response in real-time
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let assistantMessage = "";
        let assistantMessageId = `assistant-${Date.now()}`;

        // Add initial empty assistant message
        setMessages((prev) => [
          ...prev,
          {
            role: "assistant",
            content: "",
            id: assistantMessageId,
          },
        ]);

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;

          // Decode chunk and add to message
          const chunk = decoder.decode(value, { stream: true });
          if (chunk.trim()) {
            assistantMessage += chunk;

            // Update UI with streaming content immediately
            setMessages((prev) =>
              prev.map((msg) =>
                msg.id === assistantMessageId
                  ? { ...msg, content: assistantMessage }
                  : msg
              )
            );
          }
        }
      } catch (error) {
        if (error.name !== "AbortError") {
          console.error("Streaming error:", error);
          // Add error message to chat
          setMessages((prev) => [
            ...prev,
            {
              role: "assistant",
              content: "Sorry, there was an error processing your request.",
              id: `error-${Date.now()}`,
            },
          ]);
        }
      } finally {
        setIsLoading(false);
        setIsStreaming(false);
        abortControllerRef.current = null;
      }
    },
    [messages, appId, apiKey, indexName, assistantId, getToken]
  );

  const cancelStream = useCallback(() => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
    }
  }, []);

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((message) => (
          <div key={message.id} className={`message ${message.role}`}>
            <strong>{message.role}:</strong>
            <span
              className={
                isStreaming &&
                message.role === "assistant" &&
                message === messages[messages.length - 1]
                  ? "streaming"
                  : ""
              }
            >
              {message.content}
              {isStreaming &&
                message.role === "assistant" &&
                message === messages[messages.length - 1] && (
                  <span className="cursor">▊</span>
                )}
            </span>
          </div>
        ))}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (isLoading) return;

          const input = e.target.elements.message;
          if (input.value.trim()) {
            sendMessage(input.value);
            input.value = "";
          }
        }}
      >
        <input
          name="message"
          type="text"
          placeholder="Ask a question..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? "Sending..." : "Send"}
        </button>
        {isStreaming && (
          <button type="button" onClick={cancelStream}>
            Cancel
          </button>
        )}
      </form>

      <style jsx>{`
        .streaming {
          animation: pulse 1.5s ease-in-out infinite;
        }
        .cursor {
          animation: blink 1s infinite;
        }
        @keyframes pulse {
          0%,
          100% {
            opacity: 1;
          }
          50% {
            opacity: 0.7;
          }
        }
        @keyframes blink {
          0%,
          50% {
            opacity: 1;
          }
          51%,
          100% {
            opacity: 0;
          }
        }
      `}</style>
    </div>
  );
}

export default AskAIChat;