Inkeep light logo
Schedule a callSee it for my content
Ai apiQuestion answer mode

Using the Question Answer API with the Vercel AI SDK

Copy page

Overview

This guide demonstrates how to use the Vercel AI SDK to integrate the Question Answer API into your application.

We'll cover two main approaches:

  1. Using the useChat hook and a Next.js API route
  2. Using server actions (AI SDK Actions) with React Server Components
Tip
Tip

Log your AI API conversations to the Analytics API to get analytics and reporting, track user feedback, and power features like shared or saved chats — all viewable in the Inkeep Portal.

Using useChat and a route

useChat is cross-platform hook that helps you create a conversational experience with the Vercel AI SDK with React, Svelte, Vue, and Solid frontends.

To use useChat, first create an API route using Next.js. Here's where we'll call Inkeep.

API Route

app/api/chat/route.ts
import { LinksTool } from "@/lib/chat/inkeep-qa-schema";
import { createOpenAI } from "@ai-sdk/openai";
import { streamText } from "ai";

export const runtime = "edge";

const openai = createOpenAI({
  apiKey: process.env.INKEEP_API_KEY,
  baseURL: "https://api.inkeep.com/v1",
});

export async function POST(req: Request) {
  const reqJson = await req.json();

  const result = await streamText({
    model: openai("inkeep-qa-expert"),
    messages: reqJson.messages.map((message: any) => ({
      role: message.role,
      content: message.content,
      name: "inkeep-qa-user-message",
      id: message.id,
    })),
    tools: {
      // to get the citation information
      provideLinks: {
        ...LinksTool,
      },
    },
    toolChoice: "auto",
  });

  return result.toAIStreamResponse();
}

Client

app/page.tsx
"use client";

import { useChat } from "ai/react";

export default function Page() {
  const { messages, isLoading, input, handleSubmit, handleInputChange } =
    useChat({
      streamMode: "stream-data",
      sendExtraMessageFields: true,
      onResponse(response) {
        if (response.status === 401) {
          console.error(response.statusText);
        }
      },
    });

  return (
    <>
      {messages.map((message) => (
        <div key={message.id}>
          {message.role === "user" ? "User: " : "AI: "}
          {message.content}
        </div>
      ))}

      {isLoading && <div>Loading...</div>}

      <form onSubmit={handleSubmit}>
        <input name="prompt" value={input} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

Using Server Actions (AI SDK Actions)

streamUI is another way to use the Vercel AI SDK, but with React Server Components. This lets you stream entire UI components, not just the text that is then parsed and rendered on the client.

This example illustrates how to render assistant messages and a "sources" list provided by the provideLinks tool.

Server Action

Client

app/components/chat.tsx
"use client";

import { useUIState, useAIState, useActions } from "ai/rsc";
import { Message } from "ai";
import { UIState } from "@/lib/chat/actions";
import { nanoid } from "@/lib/chat/utils";

export interface ChatProps extends React.ComponentProps<"div"> {
  initialMessages?: Message[];
  id?: string;
}

export function Chat({ id, className }: ChatProps) {
  const [messages] = useUIState();

  return (
    <div className="group w-full overflow-auto pl-0 peer-[[data-state=open]]:lg:pl-[250px] peer-[[data-state=open]]:xl:pl-[300px]">
      <div className={"pb-[200px] pt-4 md:pt-10"}>
        <ChatList messages={messages} />
        <div className="w-full h-px" />
      </div>
    </div>
  );
}

export interface ChatList {
  messages: UIState;
}

export function ChatList({ messages }: ChatList) {
  const [messagesUIState, setMessagesUIState] = useUIState();
  const { submitUserMessage } = useActions();

  const handleSubmit = async (e: any) => {
    e.preventDefault();

    const form = e.currentTarget;
    const input = form.elements.namedItem("prompt") as HTMLInputElement;

    const value = input.value.trim();
    if (!value) return;

    input.value = ""; // Clear the input after submission

    const userMessage = {
      id: nanoid(),
      content: value,
      role: "user",
    } as Message;

    // Optimistically add user message UI
    setMessagesUIState((currentMessages) => [
      ...currentMessages,
      {
        id: nanoid(),
        display: <div>{userMessage.content}</div>,
      },
    ]);

    // Submit and get response message
    const responseMessage = await submitUserMessage(value);
    setMessagesUIState((currentMessages) => [
      ...currentMessages,
      responseMessage,
    ]);
  };

  return (
    <>
      <div className="relative mx-auto max-w-2xl px-4">
        {messages.map((message) => (
          <div key={message.id}>{message.display}</div>
        ))}
      </div>

      <form onSubmit={handleSubmit}>
        <input name="prompt" />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}
Question Answer API OverviewUse the Question Answer API with the OpenAI SDK