Skip to main content
Wikitopia
Get API Key

Vercel AI SDK Integration

← Docs

Add real-time AI knowledge graph data to Next.js chatbots with the Vercel AI SDK.

Tool Definition

Define Wikitopia as a tool using ai SDK's tool() helper.

import { tool } from "ai";
import { z } from "zod";

const API_URL = "https://api.wikitopia.org";

export const wikitopiaSearch = tool({
  description: "Search Wikitopia for verified facts about AI tools, models, and companies",
  parameters: z.object({
    query: z.string().describe("Search query"),
  }),
  execute: async ({ query }) => {
    const res = await fetch(
      `${API_URL}/v1/search?q=${encodeURIComponent(query)}&mode=hybrid&limit=5`
    );
    const data = await res.json();
    return data.results?.map((r: any) => ({
      name: r.canonical_name,
      type: r.entity_type,
      description: r.description?.slice(0, 150),
      claims: r.claim_count,
    })) ?? [];
  },
});

export const wikitopiaEntity = tool({
  description: "Get detailed profile of a specific AI entity from Wikitopia",
  parameters: z.object({
    name: z.string().describe("Entity name like 'LangChain' or 'OpenAI'"),
  }),
  execute: async ({ name }) => {
    const res = await fetch(
      `${API_URL}/v1/entities/${encodeURIComponent(name)}`
    );
    if (!res.ok) return { error: "Entity not found" };
    const e = await res.json();
    return {
      name: e.canonical_name,
      type: e.entity_type,
      description: e.description,
      properties: e.properties,
      claim_count: e.claim_count,
    };
  },
});

Route Handler

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";
import { wikitopiaSearch, wikitopiaEntity } from "@/lib/wikitopia-tools";

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

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "You are an AI assistant with access to Wikitopia, "
          + "a knowledge graph of AI tools, models, and companies. "
          + "Use the tools to look up verified facts before answering.",
    messages,
    tools: { wikitopiaSearch, wikitopiaEntity },
    maxSteps: 5,
  });

  return result.toDataStreamResponse();
}

Frontend Component

"use client";
import { useChat } from "ai/react";

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange}
          placeholder="Ask about AI tools..." />
      </form>
    </div>
  );
}

See also