{"id":91436,"date":"2025-01-05T23:29:43","date_gmt":"2025-01-05T19:59:43","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/"},"modified":"2025-01-05T23:29:43","modified_gmt":"2025-01-05T19:59:43","slug":"%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0631\u0628\u0627\u062a \u0686\u062a React.dev RAG \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Vercel AI SDK"},"content":{"rendered":"<div data-article-id=\"2190229\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%BE%D8%B4%D8%AA%D9%87_%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C\" >\u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%DA%98%D9%87_NextJS\" >\u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 NextJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%86%D8%B5%D8%A8_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%B1%D8%AF_%D9%86%DB%8C%D8%A7%D8%B2\" >\u0646\u0635\u0628 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7\" >\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062d\u06cc\u0637<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_RAG\" >\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc RAG<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_Chat_API\" >\u0627\u062c\u0631\u0627\u06cc Chat API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%DA%86%D8%AA\" >\u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0686\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\" >\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#react_chat_%D8%B1%D8%A8%D8%A7%D8%AA_%D8%A8%D8%A7_RAG_%D8%AF%D8%B1_React_Docs_%D8%A7%D8%B2_%D9%88%D8%A8_%D8%B3%D8%A7%DB%8C%D8%AA_reactdev\" >react chat \u0631\u0628\u0627\u062a \u0628\u0627 RAG \u062f\u0631 React Docs \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D8%B4%D8%B1%D9%88%D8%B9_%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1\" >\u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%d8%b3%d8%a7%d8%ae%d8%aa-%d8%b1%d8%a8%d8%a7%d8%aa-%da%86%d8%aa-react-dev-rag-%d8%a8%d8%a7-%d8%a7%d8%b3%d8%aa%d9%81%d8%a7%d8%af%d9%87-%d8%a7%d8%b2-vercel-ai-sdk\/#%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\" >\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0646 \u0633\u0641\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u062f\u0633\u062a\u06cc\u0627\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc React.dev \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062e\u0648\u0627\u0647\u0645 \u06af\u0630\u0627\u0634\u062a \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0627 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u062f\u0633\u062a\u06cc\u0627\u0631 \u0627\u0633\u062a. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B4%D8%AA%D9%87_%D9%81%D9%86%D8%A7%D9%88%D8%B1%DB%8C\"><\/span>\n<p>  \u067e\u0634\u062a\u0647 \u0641\u0646\u0627\u0648\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\n<strong>Next.js<\/strong>: \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 React \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0648 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631.<\/li>\n<li>\n<strong>ChatGPT<\/strong>: \u06cc\u06a9 AI LLM \u0645\u0648\u0644\u062f \u0645\u062d\u0628\u0648\u0628 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u06cc\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f<\/li>\n<li>\n<strong>Vercel AI SDK<\/strong>: AI SDK \u06a9\u06cc\u062a \u0627\u0628\u0632\u0627\u0631 TypeScript \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0645\u06a9 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u0627\u0632 \u0645\u0633\u062a\u0646\u062f\u0627\u062a \u0622\u0646\u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\n<strong>\u0633\u0648\u067e\u0627 \u0628\u06cc\u0633<\/strong>: \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Postgres \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc \u0628\u0627 \u067e\u0633\u0648\u0646\u062f pgvector.<\/li>\n<li>\n<strong>Tailwind CSS<\/strong>: \u06cc\u06a9 \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 CSS \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u06a9\u0647 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u062a\u0645\u06cc\u0632 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0646\u0638\u06cc\u0645 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/li>\n<li>\n<strong>ORM \u0631\u0627 \u0646\u0645 \u0646\u0645 \u0628\u0627\u0631\u0627\u0646 \u06a9\u0646\u06cc\u062f<\/strong>: \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 DB \u0648 \u0627\u062c\u0631\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06cc \u0634\u0628\u0627\u0647\u062a \u0628\u0631\u062f\u0627\u0631\u06cc \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u0628\u0631\u062f\u0627\u0631 db \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0627\u06cc \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0647 \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.<\/p>\n<ul>\n<li>\u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 Supabase \u0628\u0627 \u067e\u0633\u0648\u0646\u062f Pgvector \u0641\u0639\u0627\u0644 &#8211; \u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u0628\u0631\u062f\u0627\u0631\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u06a9\u0644\u06cc\u062f AI API \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f &#8211; \u0627\u06af\u0631 \u06a9\u0644\u06cc\u062f OpenAI API \u0646\u062f\u0627\u0631\u06cc\u062f &#8211; \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f\n<\/li>\n<\/ul>\n<p>\u0644\u0637\u0641\u0627\u064b \u0627\u06cc\u0646 \u067e\u06cc\u0648\u0646\u062f \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u067e\u0633\u0648\u0646\u062f pgvector \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 supabase \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0634\u0627\u0645\u0644 <strong>Next.js<\/strong>\u060c <strong>\u0633\u0648\u067e\u0627 \u0628\u06cc\u0633<\/strong>\u060c \u0648 <strong>Tailwind CSS<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc frontend\u060c <strong>Vercel ai<\/strong> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0686\u062a \u0628\u0627\u0637\u0646 \u0628\u0627 OpenAI API. \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <strong>cheerio<\/strong> \u0628\u0631\u0627\u06cc \u062d\u0630\u0641 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0648 \u0630\u062e\u06cc\u0631\u0647 \u0633\u0627\u0632\u06cc \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 pgvector supabase.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%BE%D8%B1%D9%88%DA%98%D9%87_NextJS\"><\/span>\n<p>  \u0627\u06cc\u062c\u0627\u062f \u067e\u0631\u0648\u0698\u0647 NextJS<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u067e\u0631\u0648\u0698\u0647 NextJS \u0631\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc NextJS \u0631\u0627 \u0627\u0632 (\u0644\u06cc\u0646\u06a9) \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.[https:\/\/nextjs.org\/docs\/app\/getting-started\/installation]\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npx create-next-app@latest\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 NextJS \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%B5%D8%A8_%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D8%A7%D9%86%D9%87_%D9%87%D8%A7%DB%8C_%D9%85%D9%88%D8%B1%D8%AF_%D9%86%DB%8C%D8%A7%D8%B2\"><\/span>\n<p>  \u0646\u0635\u0628 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install @ai-sdk\/openai ai drizzle-orm drizzle-zod zod @langchain\/community\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%DA%A9%D8%B1%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AD%DB%8C%D8%B7\"><\/span>\n<p>  \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u062d\u06cc\u0637<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 .env \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u062c\u0627\u06cc \u062c\u0627\u06cc\u200c\u0628\u0627\u0646\u200c\u0647\u0627 \u0631\u0627 \u0628\u0627 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code># .env\n\nOPENAI_API_KEY=YOUR_OPENAI_API_KEY\nDATABASE_URL=YOUR_SUPABASE_DATABASE_URL\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_RAG\"><\/span>\n<p>  \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc RAG<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u06cc\u0627\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 Retrieval-Augmented Generation (RAG) \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f RAG \u0628\u062e\u0648\u0627\u0646\u06cc\u062f (\u0627\u06cc\u0646\u062c\u0627)[https:\/\/sdk.vercel.ai\/docs\/guides\/rag-chatbot#what-is-rag]\n<p><strong>\u0645\u0631\u062d\u0644\u0647 1<\/strong>: \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f <code>cheerio<\/code> \u0627\u0641\u0632\u0648\u0646\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0622\u062f\u0631\u0633 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0648\u0631\u0648\u062f\u06cc \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0646\u062f \u062d\u0630\u0641 \u0634\u062f\u0647 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import 'cheerio';\nimport { CheerioWebBaseLoader } from '@langchain\/community\/document_loaders\/web\/cheerio';\n...\nconst pTagSelector=\"p\";\nconst cheerioLoader = new CheerioWebBaseLoader(url, {\n    selector: pTagSelector,\n  });\nconst docs = await cheerioLoader.load();\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 2<\/strong>: \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u0628\u0647 \u0686\u0646\u062f \u062a\u06a9\u0647 \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627 \u0645\u062a\u0646 \u06a9\u0648\u062a\u0627\u0647 \u062a\u0631\u060c \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>import { RecursiveCharacterTextSplitter } from '@langchain\/textsplitters';\n...\nconst splitter = new RecursiveCharacterTextSplitter({\n    chunkSize: 2000,\n    chunkOverlap: 100,\n  });\nconst allSplits = await splitter.splitDocuments(docs);\n...\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 3<\/strong>: \u062c\u0627\u0633\u0627\u0632\u06cc\u200c\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0642\u0633\u0645\u062a\u200c\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 db \u0628\u0631\u062f\u0627\u0631\u06cc \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0631\u0627\u06cc \u067e\u0631\u0633\u200c\u0648\u062c\u0648 \u0627\u0632 api \u0686\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>const dbResult = await createResources(\n    allSplits.map((doc) =&gt; ({\n      content: doc.pageContent,\n      source: doc.metadata.source,\n    }))\n  );\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ actions\/resources.ts\nimport { embed, embedMany } from 'ai';\nimport { openai } from '@ai-sdk\/openai';\n\nconst embeddingModel = openai.embedding('text-embedding-ada-002');\n\nexport const generateEmbedding = async (value: string): Promise<number> =&gt; {\n  const input = value.replaceAll('\\\\n', ' ');\n  const { embedding } = await embed({\n    model: embeddingModel,\n    value: input,\n  });\n  return embedding;\n};\n\nexport const createResources = async (values: NewResourceParams[]) =&gt; {\n  try {\n    for (const input of values) {\n      const { content, source } = insertResourceSchema.parse(input);\n\n      const embedding = await generateEmbedding(content);\n      await db.insert(resources).values({\n        content,\n        source,\n        embedding,\n      });\n    }\n\n    return 'Resources successfully created and embedded.';\n  } catch (error) {\n    return error instanceof Error &amp;&amp; error.message.length &gt; 0\n      ? error.message\n      : 'Error, please try again.';\n  }\n};\n<\/number><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AC%D8%B1%D8%A7%DB%8C_Chat_API\"><\/span>\n<p>  \u0627\u062c\u0631\u0627\u06cc Chat API<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u060c \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0633\u0646\u062f \u062f\u0631 \u062c\u062f\u0648\u0644 supabase \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 AI SDK\u060c api \u0686\u062a \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u0633\u0646\u0627\u062f \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f.<\/p>\n<p>\u0646\u0645\u0648\u0646\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u067e\u062e\u0634 \u0645\u062a\u0646 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>export async function POST(req: Request) {\n  const { messages } = await req.json();\n\n  const result = streamText({\n    model: openai('gpt-4o'),\n    messages,\n    system: `You are a helpful assistant. Check your knowledge base before answering any questions.\n    Only respond to questions using information from tool calls.\n    if no relevant information is found in the tool calls, respond, \"Sorry, I don't know.\"`,\n    tools: {\n      getInformation: tool({\n        description: `get information from your knowledge base to answer questions.`,\n        parameters: z.object({\n          question: z.string().describe('the users question'),\n        }),\n        execute: async ({ question }) =&gt; findRelevantContent(question),\n      }),\n    },\n  });\n\n  return result.toDataStreamResponse();\n}\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u062f\u0633\u062a\u0648\u0631 \u0628\u0627\u0644\u0627\u060c \u0645\u062f\u0644 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0645\u06cc\u200c\u06af\u0631\u062f\u062f \u0648 \u0627\u0628\u0632\u0627\u0631 \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f <code>getInformation<\/code> \u06a9\u0647 \u0628\u0647 \u0646\u0648\u0628\u0647 \u062e\u0648\u062f \u062a\u0627\u0628\u0639 \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f <code>findRelevantContent<\/code>. \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0628\u0631\u062f\u0627\u0631 db \u0631\u0627 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0634\u0628\u0627\u0647\u062a \u06a9\u0633\u06cc\u0646\u0648\u0633 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u0645\u0637\u0627\u0628\u0642\u062a \u0647\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0632\u0645\u06cc\u0646\u0647 \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0628\u0647 LLM \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. \u0633\u067e\u0633 LLM \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u067e\u0633 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>export const findRelevantContent = async (userQuery: string) =&gt; {\n  const userQueryEmbedded = await generateEmbedding(userQuery);\n  const similarity = sql<number>`1 - (${cosineDistance(\n    resources.embedding,\n    userQueryEmbedded,\n  )})`;\n  const similarGuides = await db\n    .select({ name: resources.content, similarity })\n    .from(resources)\n    .where(gt(similarity, similarityThreshold))\n    .orderBy(t =&gt; desc(t.similarity))\n    .limit(4);\n  return similarGuides;\n};\n<\/number><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%B1%D8%A7%D8%A8%D8%B7_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C_%DA%86%D8%AA\"><\/span>\n<p>  \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0686\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AI SDK \u062f\u0627\u0631\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc AI SDK \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u062c\u0639\u0628\u0647 \u0627\u0628\u0632\u0627\u0631 \u0622\u06af\u0646\u0648\u0633\u062a\u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0627\u0633\u062a \u0648 \u0627\u062f\u063a\u0627\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627 \u0633\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0627\u0645\u0644 \u0645\u06cc \u0634\u0648\u062f <code>useChat<\/code> \u0642\u0644\u0627\u0628\u06cc \u06a9\u0647 \u0628\u0647 \u0627\u062f\u063a\u0627\u0645 api \u0686\u062a (\u0627\u06cc\u062c\u0627\u062f \u0632\u0648\u062f\u062a\u0631) \u0628\u0627 \u062a\u0644\u0627\u0634 \u06a9\u0645\u062a\u0631 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ src\/app\/page.tsx\n\n...\nconst { messages, input, handleInputChange, handleSubmit, error } = useChat({\n    maxSteps: 10,\n  });\n...\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u062e\u0634 UI \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0634\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0633\u0648\u0627\u0644\u0627\u062a \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fynt846qo0gsg1aimn4ds.png\" alt=\"React Chatbot\" loading=\"lazy\" width=\"800\" height=\"853\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87_%DA%AF%DB%8C%D8%B1%DB%8C\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>AI SDK \u062f\u0627\u0631\u0627\u06cc \u0686\u0646\u062f\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 LLM \u0628\u0647 \u0637\u0648\u0631 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0627 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc react \u0628\u062f\u0648\u0646 \u062f\u0631\u062f\u0633\u0631 \u0632\u06cc\u0627\u062f \u0627\u0633\u062a. \u062f\u0627\u0631\u0627\u06cc \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0631\u0627\u06cc frontend \u0648 backend \u0627\u0633\u062a \u06a9\u0647 \u0627\u062f\u063a\u0627\u0645 \u0622\u0646 \u0631\u0627 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0648 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc RAG \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 AI SDK \u0631\u0627 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0627 \u0645\u0641\u06cc\u062f \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f.<\/p>\n<p>\u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0645\u0644\u0627 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0622\u0648\u0631\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"ltag-github-readme-tag\">\n<div class=\"readme-overview\">\n<h3><span class=\"ez-toc-section\" id=\"react_chat_%D8%B1%D8%A8%D8%A7%D8%AA_%D8%A8%D8%A7_RAG_%D8%AF%D8%B1_React_Docs_%D8%A7%D8%B2_%D9%88%D8%A8_%D8%B3%D8%A7%DB%8C%D8%AA_reactdev\"><\/span>\n<p>      react chat \u0631\u0628\u0627\u062a \u0628\u0627 RAG \u062f\u0631 React Docs \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev<br \/>\n    <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<\/p><\/div>\n<div class=\"ltag-github-body\">\n<div id=\"readme\" class=\"md\" data-path=\"README.md\">\n<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\">\n<p dir=\"auto\">\u0627\u06cc\u0646 \u0686\u062a \u0628\u0627\u062a \u06cc\u06a9 \u0686\u062a \u0631\u0628\u0627\u062a \u0645\u0648\u0644\u062f \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a React \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062e\u0637 \u0644\u0648\u0644\u0647 RAG (\u062a\u0648\u0644\u06cc\u062f \u062a\u0642\u0648\u06cc\u062a \u0634\u062f\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc) \u067e\u0627\u0633\u062e \u062f\u0647\u062f.<\/p>\n<p dir=\"auto\">\u0627\u06cc\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js ai sdk \u0648 cheerio \u0628\u0631\u0627\u06cc scraping \u0648\u0628 \u0648 langchain \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0627 \u0645\u062a\u0646 \u0631\u0627 \u0628\u0647 \u062c\u0645\u0644\u0627\u062a \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0646\u062f. \u0627\u0632 drizzle ORM \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062e\u0631\u0627\u0634\u06cc\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u062c\u0627\u0633\u0627\u0632\u06cc \u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u067e\u0627\u0633\u062e \u0628\u0647 \u0633\u0624\u0627\u0644\u0627\u062a \u067e\u0631\u0633\u06cc\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p><h2 class=\"heading-element\" dir=\"auto\"><span class=\"ez-toc-section\" id=\"%D8%B4%D8%B1%D9%88%D8%B9_%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1\"><\/span>\u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p>\n<p dir=\"auto\">\u0627\u0628\u062a\u062f\u0627 \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto js-code-highlight\" dir=\"auto\" data-snippet-clipboard-copy-content=\"npm run dev&#10;# or&#10;yarn dev&#10;# or&#10;pnpm dev&#10;# or&#10;bun dev\">\n<pre>npm run dev\n<span class=\"pl-c\"><span class=\"pl-c\">#<\/span> or<\/span>\nyarn dev\n<span class=\"pl-c\"><span class=\"pl-c\">#<\/span> or<\/span>\npnpm dev\n<span class=\"pl-c\"><span class=\"pl-c\">#<\/span> or<\/span>\nbun dev<\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p dir=\"auto\">http:\/\/localhost:3000 \u0631\u0627 \u0628\u0627 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<p dir=\"auto\">\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>next\/font<\/code> \u0628\u0631\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0648 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 Geist\u060c \u06cc\u06a9 \u062e\u0627\u0646\u0648\u0627\u062f\u0647 \u0641\u0648\u0646\u062a \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc Vercel.<\/p>\n<p><h2 class=\"heading-element\" dir=\"auto\"><span class=\"ez-toc-section\" id=\"%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%87%D8%A7\"><\/span>\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<\/p>\n<ul dir=\"auto\">\n<li>\n<p><strong>\u0631\u0628\u0627\u062a \u0686\u062a \u0645\u0648\u0644\u062f \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/strong>: \u0631\u0628\u0627\u062a \u0686\u062a \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 AI SDK Vercel \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a React \u067e\u0627\u0633\u062e \u062f\u0647\u062f.<\/li>\n<li>\n<p><strong>\u062e\u0637 \u0644\u0648\u0644\u0647 RAG (\u062a\u0648\u0644\u06cc\u062f \u062a\u0642\u0648\u06cc\u062a \u0634\u062f\u0647 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc).<\/strong>: \u0631\u0628\u0627\u062a \u0686\u062a \u0627\u0632 cheerio \u0628\u0631\u0627\u06cc\u2026<\/li>\n<\/ul>\n<\/article>\n<\/div>\n<p>\n  <\/div>\n<\/div>\n<p><\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af\u060c \u0645\u0646 \u0633\u0641\u0631 \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u062f\u0633\u062a\u06cc\u0627\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc React.dev \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u062e\u0648\u0627\u0647\u0645 \u06af\u0630\u0627\u0634\u062a \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0631\u0627 \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631\u0628\u0631 \u067e\u0627\u0633\u062e \u0645\u06cc \u062f\u0647\u062f. \u0647\u062f\u0641 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a react.dev \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u0646\u0634 \u062f\u0633\u062a\u06cc\u0627\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":91437,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr91ln4itopbgxp62cjoj.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-91436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/91436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=91436"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/91436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/91437"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=91436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=91436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=91436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}