ساخت ربات چت React.dev RAG با استفاده از Vercel AI SDK

مقدمه

در این پست وبلاگ، من سفر خود را در ساختن یک دستیار هوش مصنوعی React.dev به اشتراک خواهم گذاشت که اطلاعات را از وب سایت react.dev بازیابی می کند و به درخواست ارائه شده توسط کاربر پاسخ می دهد. هدف اصلی استفاده از اطلاعات موجود در وب سایت react.dev به عنوان پایگاه دانش دستیار است.

پشته فناوری

• Next.js: یک چارچوب مبتنی بر React برای رندر و مسیریابی سمت سرور.
• ChatGPT: یک AI LLM مولد محبوب که برای دستیار استفاده می شود
• Vercel AI SDK: AI SDK کیت ابزار TypeScript است که برای کمک به توسعه دهندگان در ساخت برنامه های کاربردی مبتنی بر هوش مصنوعی طراحی شده است، اطلاعات بیشتری را از مستندات آنها در اینجا دنبال کنید.
• سوپا بیس: پایگاه داده Postgres برای ذخیره جاسازی های برداری با پسوند pgvector.
• Tailwind CSS: یک فریم ورک CSS برای اولین بار که انعطاف پذیری را فراهم می کند و در عین حال رابط کاربری را تمیز و قابل تنظیم نگه می دارد.
• ORM را نم نم باران کنید: این کتابخانه ابزارهایی را برای تعامل با DB و اجرای جستجوی شباهت برداری در برابر بردار db فراهم می کند.

پیش نیازها:

این پروژه برای راه اندازی به پیش نیازهای زیر نیاز دارد.

• پایگاه داده Supabase با پسوند Pgvector فعال – این برای ذخیره جاسازی های برداری محتوای وب سایت استفاده می شود.
• کلید AI API را باز کنید – اگر کلید OpenAI API ندارید – از اینجا دریافت کنید

لطفاً این پیوند را دنبال کنید تا پسوند pgvector را برای پایگاه داده ارائه شده در supabase فعال کنید.

راه اندازی پروژه

این پروژه شامل Next.js، سوپا بیس، و Tailwind CSS به عنوان رابط کاربری frontend، Vercel ai به عنوان یکپارچه سازی چت باطن با OpenAI API. استفاده می کند cheerio برای حذف صفحات وب و ذخیره سازی جاسازی ها در پایگاه داده pgvector supabase.

ایجاد پروژه NextJS

می توانید به راحتی پروژه NextJS را با اجرای دستور زیر تنظیم کنید یا دستورالعمل های NextJS را از (لینک) دنبال کنید.[https://nextjs.org/docs/app/getting-started/installation]

npx create-next-app@latest

دستورالعمل های صفحه را دنبال کنید و یک پروژه NextJS با تنظیمات اولیه ایجاد می کند.

نصب کتابخانه های مورد نیاز

npm install @ai-sdk/openai ai drizzle-orm drizzle-zod zod @langchain/community

پیکربندی محیط

برای مدیریت متغیرهای مورد استفاده در پروژه، یک فایل .env در دایرکتوری ریشه پروژه خود ایجاد کنید.

متغیرهای زیر را اضافه کنید، جای جای‌بان‌ها را با کلیدهای واقعی جایگزین کنید.

# .env

OPENAI_API_KEY=YOUR_OPENAI_API_KEY
DATABASE_URL=YOUR_SUPABASE_DATABASE_URL

پیاده سازی RAG

این دستیار مبتنی بر Retrieval-Augmented Generation (RAG) است که از پایگاه دانش بر اساس محتوای وب سایت react.dev استفاده می کند. می توانید اطلاعات بیشتری در مورد RAG بخوانید (اینجا)[https://sdk.vercel.ai/docs/guides/rag-chatbot#what-is-rag]

مرحله 1: با استفاده از محتوای وب سایت حذف کنید cheerio افزونه کد زیر آدرس اینترنتی را به عنوان ورودی نشان می دهد و محتوای سند حذف شده از وب سایت را برمی گرداند.

import 'cheerio';
import { CheerioWebBaseLoader } from '@langchain/community/document_loaders/web/cheerio';
...
const pTagSelector="p";
const cheerioLoader = new CheerioWebBaseLoader(url, {
    selector: pTagSelector,
  });
const docs = await cheerioLoader.load();

مرحله 2: محتوای وب سایت را به چند تکه تقسیم کنید تا بتوان به راحتی با متن کوتاه تر، جاسازی ها را ایجاد کرد.

import { RecursiveCharacterTextSplitter } from '@langchain/textsplitters';
...
const splitter = new RecursiveCharacterTextSplitter({
    chunkSize: 2000,
    chunkOverlap: 100,
  });
const allSplits = await splitter.splitDocuments(docs);
...

مرحله 3: جاسازی‌ها را برای هر یک از قسمت‌ها ایجاد کنید و آنها را در db برداری ذخیره کنید تا بتوان از آن برای پرس‌وجو از api چت استفاده کرد.

const dbResult = await createResources(
    allSplits.map((doc) => ({
      content: doc.pageContent,
      source: doc.metadata.source,
    }))
  );

// actions/resources.ts
import { embed, embedMany } from 'ai';
import { openai } from '@ai-sdk/openai';

const embeddingModel = openai.embedding('text-embedding-ada-002');

export const generateEmbedding = async (value: string): Promise => {
  const input = value.replaceAll('\\n', ' ');
  const { embedding } = await embed({
    model: embeddingModel,
    value: input,
  });
  return embedding;
};

export const createResources = async (values: NewResourceParams[]) => {
  try {
    for (const input of values) {
      const { content, source } = insertResourceSchema.parse(input);

      const embedding = await generateEmbedding(content);
      await db.insert(resources).values({
        content,
        source,
        embedding,
      });
    }

    return 'Resources successfully created and embedded.';
  } catch (error) {
    return error instanceof Error && error.message.length > 0
      ? error.message
      : 'Error, please try again.';
  }
};

اجرای Chat API

هنگامی که پایگاه دانش با پیوندهای وب سایت react.dev ساخته شد، اطلاعات سند در جدول supabase ذخیره می شود. با استفاده از AI SDK، api چت را می توان بر اساس اسناد موجود در اینجا پیاده سازی کرد.

نمونه کد زیر برای پخش متن از سرور است:

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

  const result = streamText({
    model: openai('gpt-4o'),
    messages,
    system: `You are a helpful assistant. Check your knowledge base before answering any questions.
    Only respond to questions using information from tool calls.
    if no relevant information is found in the tool calls, respond, "Sorry, I don't know."`,
    tools: {
      getInformation: tool({
        description: `get information from your knowledge base to answer questions.`,
        parameters: z.object({
          question: z.string().describe('the users question'),
        }),
        execute: async ({ question }) => findRelevantContent(question),
      }),
    },
  });

  return result.toDataStreamResponse();
}

با دستور بالا، مدل همیشه به دنبال پایگاه دانش می‌گردد و ابزار را راه‌اندازی می‌کند getInformation که به نوبه خود تابع را اجرا می کند findRelevantContent. این تابع بردار db را پرس و جو می کند و شباهت کسینوس را برای یافتن مطابقت ها اجرا می کند و زمینه مربوطه را به LLM برمی گرداند. سپس LLM از اطلاعات پایگاه دانش استفاده می کند و سپس به درخواست کاربر پاسخ می دهد.

export const findRelevantContent = async (userQuery: string) => {
  const userQueryEmbedded = await generateEmbedding(userQuery);
  const similarity = sql`1 - (${cosineDistance(
    resources.embedding,
    userQueryEmbedded,
  )})`;
  const similarGuides = await db
    .select({ name: resources.content, similarity })
    .from(resources)
    .where(gt(similarity, similarityThreshold))
    .orderBy(t => desc(t.similarity))
    .limit(4);
  return similarGuides;
};

پیاده سازی رابط کاربری چت

AI SDK دارای رابط کاربری AI SDK است که یک جعبه ابزار آگنوستیک چارچوب است و ادغام عملکردهای پیشرفته هوش مصنوعی را در برنامه های شما ساده می کند. شامل می شود useChat قلابی که به ادغام api چت (ایجاد زودتر) با تلاش کمتر کمک می کند.

// src/app/page.tsx

...
const { messages, input, handleInputChange, handleSubmit, error } = useChat({
    maxSteps: 10,
  });
...

هنگامی که بخش UI پیاده سازی شد، می توان آن را با استفاده از هر یک از سوالات وب سایت react.dev آزمایش کرد.

نتیجه گیری

AI SDK دارای چندین ویژگی برای ادغام LLM به طور مستقیم با هر یک از برنامه های react بدون دردسر زیاد است. دارای ابزارهای کاربردی برای frontend و backend است که ادغام آن را منحصر به فرد و آسان می کند.

در این راهنما، من فرآیند پیاده سازی RAG با استفاده از AI SDK را پوشش داده ام که برای ایجاد یک پایگاه دانش برای هر یک از وب سایت ها مفید خواهد بود.

یک نمونه کاملا کاربردی از این پروژه در انتهای این مقاله آورده شده است.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev