통합
Vercel AI SDK
Thunderbit를 streamText / generateText 에이전트용 TypeScript Tool로 래핑
Vercel AI SDK 의 tool() 헬퍼는 임의의 TypeScript 함수를 LLM 이 호출 가능한 Tool 로 바꿔줍니다. /distill 을 감싸면 모델이 대화 중간에 실시간 웹 페이지를 읽을 수 있습니다.
설치
npm install ai @ai-sdk/openai zodTool 정의
import { tool } from 'ai';
import { z } from 'zod';
const API = 'https://openapi.thunderbit.com/openapi/v1';
const H = { Authorization: `Bearer ${process.env.THUNDERBIT_API_KEY}` };
export const readUrl = tool({
description:
'Fetch a URL and return clean Markdown. Use for any web research task: docs, articles, product pages.',
parameters: z.object({
url: z.string().url(),
renderMode: z.enum(['basic', 'advanced']).default('basic'),
}),
execute: async ({ url, renderMode }) => {
const res = await fetch(`${API}/distill`, {
method: 'POST',
headers: { ...H, 'Content-Type': 'application/json' },
body: JSON.stringify({ url, renderMode }),
});
const json = await res.json();
return json.data.markdown;
},
});streamText 와 함께 사용
import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
const result = streamText({
model: openai('gpt-4o'),
tools: { readUrl },
maxSteps: 5,
prompt: 'Summarize the latest post on https://vercel.com/blog',
});
for await (const chunk of result.textStream) process.stdout.write(chunk);팁
execute에서 반환하기 전에 Markdown 을 ~8k 토큰 이내로 자르세요 —— 컨텍스트 비대화 방지- 다중 URL fan-out 이 필요하면
/batch/distill을 백엔드로 하는 두 번째readUrlsTool 을 노출하세요 renderMode: 'advanced'는 페이지가 JS 무거울 때만 ——basic이 3 ~ 5 배 저렴합니다