{"id":91916,"date":"2025-01-08T18:44:03","date_gmt":"2025-01-08T15:14:03","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/"},"modified":"2025-01-08T18:44:03","modified_gmt":"2025-01-08T15:14:03","slug":"%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/","title":{"rendered":"\u0628\u0627 LangGraph\u060c CopilotKit\u060c Tavily \u0648 Next.js \u06cc\u06a9 \u06a9\u0644\u0648\u0646 \u0627\u0632 Perplexity \u0628\u0633\u0627\u0632\u06cc\u062f."},"content":{"rendered":"<div data-article-id=\"2029305\" id=\"article-body\">\n<p>\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 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0645\u0633\u062a\u0642\u0644\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u0646\u062f. \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062c\u062f\u06cc\u062f \u0634\u0627\u0645\u0644 Human-in-the-Loop \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u060c \u0646\u062a\u0627\u06cc\u062c \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062a\u0635\u0645\u06cc\u0645 \u0628\u06af\u06cc\u0631\u0646\u062f. \u0627\u06cc\u0646 \u0639\u0648\u0627\u0645\u0644 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 CoAgents \u0634\u0646\u0627\u062e\u062a\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\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=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><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%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#TL_DR\" >TL; DR<\/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%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%D8%AE%D9%84%D8%A8%D8%A7%D9%86_%D8%B9%D8%A7%D9%85%D9%84_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\" >\u062e\u0644\u0628\u0627\u0646 \u0639\u0627\u0645\u0644 \u0686\u06cc\u0633\u062a\u061f<\/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%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%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%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B9%D9%88%D8%A7%D9%85%D9%84_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%A8%D8%A7_LangGraph_%D9%88_CopilotKit\" >\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 LangGraph \u0648 CopilotKit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%D8%A7_Nextjs\" >\u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 Next.js<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%DA%86%DA%AF%D9%88%D9%86%D9%87_CoAgent_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A8%D9%87_%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D9%85%D8%AA%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D9%85\" >\u0686\u06af\u0648\u0646\u0647 CoAgent \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%d8%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%D9%BE%D8%B0%DB%8C%D8%B1%D8%B4_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7_%D9%88_%D9%BE%D8%A7%D8%B3%D8%AE_%D9%87%D8%A7%DB%8C_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86%DB%8C_%D8%A8%D9%87_%D9%81%D8%B1%D8%A7%D9%86%D8%AA_%D8%A7%D9%86%D8%AF\" >\u067e\u0630\u06cc\u0631\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u062c\u0631\u06cc\u0627\u0646\u06cc \u0628\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f<\/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%a8%d8%a7-langgraph%d8%8c-copilotkit%d8%8c-tavily-%d9%88-next-js-%db%8c%da%a9-%da%a9%d9%84%d9%88%d9%86-%d8%a7%d8%b2-perplexity-%d8%a8%d8%b3%d8%a7%d8%b2%db%8c%d8%af\/#%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%86_%D8%A2%D9%86\" >\u067e\u06cc\u0686\u06cc\u062f\u0646 \u0622\u0646<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"TL_DR\"><\/span>\n<p>  TL; DR<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u06a9\u0644\u0648\u0646 Perplexity \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 LangGraph\u060c CopilotKit \u0648 Tavily \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a. <\/p>\n<p>\u0632\u0645\u0627\u0646 \u0634\u0631\u0648\u0639 \u0633\u0627\u062e\u062a \u0648 \u0633\u0627\u0632 <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D9%84%D8%A8%D8%A7%D9%86_%D8%B9%D8%A7%D9%85%D9%84_%DA%86%DB%8C%D8%B3%D8%AA%D8%9F\"><\/span>\n<p>  \u062e\u0644\u0628\u0627\u0646 \u0639\u0627\u0645\u0644 \u0686\u06cc\u0633\u062a\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CopilotKit \u0686\u06af\u0648\u0646\u0647 \u0639\u0648\u0627\u0645\u0644 LangGraph \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0645\u06cc \u0622\u0648\u0631\u062f.  <\/p>\n<p>CoAgents \u0631\u0648\u06cc\u06a9\u0631\u062f CopilotKit \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062a\u062c\u0631\u0628\u06cc\u0627\u062a \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc \u0627\u0633\u062a! <\/p>\n<p>\u0628\u0647\u200c\u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647\u060c \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0686\u0646\u062f\u06cc\u0646 \u067e\u0631\u0633\u200c\u0648\u200c\u062c\u0648\u06cc \u062c\u0633\u062a\u062c\u0648 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc\u200c\u062f\u0647\u062f \u0648 \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0627 \u0648\u0636\u0639\u06cc\u062a \u0648 \u0646\u062a\u0627\u06cc\u062c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>CopilotKit \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u2b50\ufe0f\n<\/p>\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>\u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0628\u0627\u06cc\u062f \u062f\u0631\u06a9 \u0627\u0648\u0644\u06cc\u0647 \u0627\u06cc \u0627\u0632 React \u06cc\u0627 Next.js \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p>\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<ul>\n<li>\n<p>Python &#8211; \u06cc\u06a9 \u0632\u0628\u0627\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u062d\u0628\u0648\u0628 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 LangGraph. \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0631\u0648\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0634\u0645\u0627 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/li>\n<li>\n<p>LangGraph &#8211; \u0686\u0627\u0631\u0686\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0648 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0647 \u062a\u0639\u0631\u06cc\u0641 \u062c\u0631\u06cc\u0627\u0646 \u0647\u0627\u06cc \u06a9\u0646\u062a\u0631\u0644\u06cc \u0648 \u0627\u0642\u062f\u0627\u0645\u0627\u062a\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062a\u0648\u0633\u0637 \u0639\u0627\u0645\u0644 \u0627\u0646\u062c\u0627\u0645 \u0634\u0648\u062f \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<p>\u06a9\u0644\u06cc\u062f OpenAI API &#8211; \u0628\u0647 \u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 \u0647\u0627\u06cc GPT \u0648\u0638\u0627\u06cc\u0641 \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0628\u0647 \u0645\u062f\u0644 GPT-4 \u062f\u0633\u062a\u0631\u0633\u06cc \u062f\u0627\u0631\u06cc\u062f.<\/li>\n<li>\n<p>Tavily AI &#8211; \u06cc\u06a9 \u0645\u0648\u062a\u0648\u0631 \u062c\u0633\u062a\u062c\u0648 \u06a9\u0647 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u062d\u0642\u06cc\u0642\u0627\u062a \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f \u0648 \u0628\u0647 \u062f\u0627\u0646\u0634 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/li>\n<li>\n<p>CopilotKit &#8211; \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u06a9\u0645\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0686\u062a \u0631\u0628\u0627\u062a \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0648 \u0645\u0646\u0627\u0637\u0642 \u0645\u062a\u0646\u06cc.<\/li>\n<li>\n<p>Shad Cn UI &#8211; \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u0627\u062c\u0632\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/li>\n<\/ul>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D8%B9%D9%88%D8%A7%D9%85%D9%84_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%A8%D8%A7_LangGraph_%D9%88_CopilotKit\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 LangGraph \u0648 CopilotKit<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 LangGraph \u0648 CopilotKit \u0631\u0627 \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0645\u062e\u0632\u0646 \u0627\u0633\u062a\u0627\u0631\u062a\u0631 CopilotKit CoAgents \u0631\u0627 \u06a9\u0644\u0648\u0646 \u06a9\u0646\u06cc\u062f. \u0627\u06cc\u0646 <strong><code>ui<\/code><\/strong>  \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0634\u0627\u0645\u0644 frontend \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0648 <strong><code>agent<\/code><\/strong>  \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc CoAgent \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u062f\u0627\u062e\u0644 <strong><code>agent<\/code><\/strong>  \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u060c \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Poetry \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>agent\npoetry <span class=\"nb\">install<\/span>\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>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <strong><code>.env<\/code><\/strong>  \u062f\u0631 \u067e\u0648\u0634\u0647 agent \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc OpenAI \u0648 Tavily AI API \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>OPENAI_API_KEY=\nTAVILY_API_KEY=\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><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%2Ffz7ghxb8ted02d6z404r.jpg\" alt=\"\u06a9\u0644\u06cc\u062f OpenAI API \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"373\" title=\"\"><\/p>\n<p>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>agent.py<\/code><\/strong>  \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight python\"><code><span class=\"sh\">\"\"\"<\/span><span class=\"s\">\nThis is the main entry point for the AI.\nIt defines the workflow graph and the entry point for the agent.\n<\/span><span class=\"sh\">\"\"\"<\/span>\n<span class=\"c1\"># pylint: disable=line-too-long, unused-import\n<\/span><span class=\"kn\">from<\/span> <span class=\"n\">langgraph.graph<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">StateGraph<\/span><span class=\"p\">,<\/span> <span class=\"n\">END<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">langgraph.checkpoint.memory<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">MemorySaver<\/span>\n\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.state<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">AgentState<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.steps<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">steps_node<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.search<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">search_node<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.summarize<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">summarize_node<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.extract<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">extract_node<\/span>\n\n<span class=\"k\">def<\/span> <span class=\"nf\">route<\/span><span class=\"p\">(<\/span><span class=\"n\">state<\/span><span class=\"p\">):<\/span>\n    <span class=\"sh\">\"\"\"<\/span><span class=\"s\">Route to research nodes.<\/span><span class=\"sh\">\"\"\"<\/span>\n    <span class=\"k\">if<\/span> <span class=\"ow\">not<\/span> <span class=\"n\">state<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">steps<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"bp\">None<\/span><span class=\"p\">):<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">END<\/span>\n\n    <span class=\"n\">current_step<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">next<\/span><span class=\"p\">((<\/span><span class=\"n\">step<\/span> <span class=\"k\">for<\/span> <span class=\"n\">step<\/span> <span class=\"ow\">in<\/span> <span class=\"n\">state<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">steps<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span> <span class=\"k\">if<\/span> <span class=\"n\">step<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">status<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">pending<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span> <span class=\"bp\">None<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"ow\">not<\/span> <span class=\"n\">current_step<\/span><span class=\"p\">:<\/span>\n        <span class=\"k\">return<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">summarize_node<\/span><span class=\"sh\">\"<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"n\">current_step<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">type<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">==<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">search<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span>\n        <span class=\"k\">return<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">search_node<\/span><span class=\"sh\">\"<\/span>\n\n    <span class=\"k\">raise<\/span> <span class=\"nc\">ValueError<\/span><span class=\"p\">(<\/span><span class=\"sa\">f<\/span><span class=\"sh\">\"<\/span><span class=\"s\">Unknown step type: <\/span><span class=\"si\">{<\/span><span class=\"n\">current_step<\/span><span class=\"p\">[<\/span><span class=\"sh\">'<\/span><span class=\"s\">type<\/span><span class=\"sh\">'<\/span><span class=\"p\">]<\/span><span class=\"si\">}<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n\n<span class=\"c1\"># Define a new graph\n<\/span><span class=\"n\">workflow<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">StateGraph<\/span><span class=\"p\">(<\/span><span class=\"n\">AgentState<\/span><span class=\"p\">)<\/span>\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_node<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">steps_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">steps_node<\/span><span class=\"p\">)<\/span>\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_node<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">search_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">search_node<\/span><span class=\"p\">)<\/span>\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_node<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">summarize_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">summarize_node<\/span><span class=\"p\">)<\/span>\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_node<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">extract_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">extract_node<\/span><span class=\"p\">)<\/span>\n<span class=\"c1\"># Chatbot\n<\/span><span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">set_entry_point<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">steps_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_conditional_edges<\/span><span class=\"p\">(<\/span>\n    <span class=\"sh\">\"<\/span><span class=\"s\">steps_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> \n    <span class=\"n\">route<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">summarize_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">search_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">END<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_edge<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">search_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">extract_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_conditional_edges<\/span><span class=\"p\">(<\/span>\n    <span class=\"sh\">\"<\/span><span class=\"s\">extract_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"n\">route<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">summarize_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">search_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">add_edge<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">summarize_node<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">END<\/span><span class=\"p\">)<\/span>\n\n<span class=\"n\">memory<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">MemorySaver<\/span><span class=\"p\">()<\/span>\n<span class=\"n\">graph<\/span> <span class=\"o\">=<\/span> <span class=\"n\">workflow<\/span><span class=\"p\">.<\/span><span class=\"nf\">compile<\/span><span class=\"p\">(<\/span><span class=\"n\">checkpointer<\/span><span class=\"o\">=<\/span><span class=\"n\">memory<\/span><span class=\"p\">)<\/span>\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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0639\u0627\u0645\u0644 LangGraph \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0632 \u0622\u0646 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f <strong><code>steps_node<\/code><\/strong>\u060c \u0646\u062a\u0627\u06cc\u062c \u0631\u0627 \u062c\u0633\u062a\u062c\u0648 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u062e\u0644\u0627\u0635\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0646\u06a9\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u06cc \u06a9\u0646\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%2Fopg6iptt67wzbh4p27tf.gif\" alt=\"\u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0646\u0645\u0627\u06cc\u0646\u062f\u0647\" loading=\"lazy\" width=\"480\" height=\"390\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0628\u0639\u062f \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <strong><code>demo.py<\/code><\/strong>  \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight python\"><code>\n<span class=\"sh\">\"\"\"<\/span><span class=\"s\">Demo<\/span><span class=\"sh\">\"\"\"<\/span>\n\n<span class=\"kn\">import<\/span> <span class=\"n\">os<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">dotenv<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">load_dotenv<\/span>\n<span class=\"nf\">load_dotenv<\/span><span class=\"p\">()<\/span>\n\n<span class=\"kn\">from<\/span> <span class=\"n\">fastapi<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">FastAPI<\/span>\n<span class=\"kn\">import<\/span> <span class=\"n\">uvicorn<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">copilotkit.integrations.fastapi<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">add_fastapi_endpoint<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">copilotkit<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">CopilotKitSDK<\/span><span class=\"p\">,<\/span> <span class=\"n\">LangGraphAgent<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">ai_researcher.agent<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">graph<\/span>\n\n<span class=\"n\">app<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">FastAPI<\/span><span class=\"p\">()<\/span>\n<span class=\"n\">sdk<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">CopilotKitSDK<\/span><span class=\"p\">(<\/span>\n    <span class=\"n\">agents<\/span><span class=\"o\">=<\/span><span class=\"p\">[<\/span>\n        <span class=\"nc\">LangGraphAgent<\/span><span class=\"p\">(<\/span>\n            <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">ai_researcher<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"n\">description<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">Search agent.<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"n\">graph<\/span><span class=\"o\">=<\/span><span class=\"n\">graph<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">)<\/span>\n    <span class=\"p\">],<\/span>\n<span class=\"p\">)<\/span>\n\n<span class=\"nf\">add_fastapi_endpoint<\/span><span class=\"p\">(<\/span><span class=\"n\">app<\/span><span class=\"p\">,<\/span> <span class=\"n\">sdk<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">\/copilotkit<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n\n<span class=\"c1\"># add new route for health check\n<\/span><span class=\"nd\">@app.get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">\/health<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n<span class=\"k\">def<\/span> <span class=\"nf\">health<\/span><span class=\"p\">():<\/span>\n    <span class=\"sh\">\"\"\"<\/span><span class=\"s\">Health check.<\/span><span class=\"sh\">\"\"\"<\/span>\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span><span class=\"sh\">\"<\/span><span class=\"s\">status<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">ok<\/span><span class=\"sh\">\"<\/span><span class=\"p\">}<\/span>\n\n<span class=\"k\">def<\/span> <span class=\"nf\">main<\/span><span class=\"p\">():<\/span>\n    <span class=\"sh\">\"\"\"<\/span><span class=\"s\">Run the uvicorn server.<\/span><span class=\"sh\">\"\"\"<\/span>\n    <span class=\"n\">port<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">int<\/span><span class=\"p\">(<\/span><span class=\"n\">os<\/span><span class=\"p\">.<\/span><span class=\"nf\">getenv<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">PORT<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">8000<\/span><span class=\"sh\">\"<\/span><span class=\"p\">))<\/span>\n    <span class=\"n\">uvicorn<\/span><span class=\"p\">.<\/span><span class=\"nf\">run<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">ai_researcher.demo:app<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">host<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">0.0.0.0<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">port<\/span><span class=\"o\">=<\/span><span class=\"n\">port<\/span><span class=\"p\">,<\/span> <span class=\"nb\">reload<\/span><span class=\"o\">=<\/span><span class=\"bp\">True<\/span><span class=\"p\">)<\/span>\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>\u06a9\u062f \u0628\u0627\u0644\u0627 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc FastAPI \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0639\u0627\u0645\u0644 LangGraph \u0631\u0627 \u0645\u06cc\u0632\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 CopilotKit SDK \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f CoAgent \u0631\u0627 \u0627\u0632 \u0645\u062e\u0632\u0646 GitHub \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc\u060c \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0648\u0646 Perplexity \u0648 \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CopilotKit \u0631\u0627 \u062e\u0648\u0627\u0647\u06cc\u062f \u0622\u0645\u0648\u062e\u062a.<\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%B1%D8%A7%D8%A8%D8%B7_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A8%D8%A7_Nextjs\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 Next.js<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js Typescript \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># \ud83d\udc49\ud83c\udffb Navigate into the ui folder<\/span>\nnpx create-next-app .\/\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><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%2Fuxqqhy7yxa39eoksn671.png\" alt=\"\u0646\u0635\u0628 Next.js\" loading=\"lazy\" width=\"800\" height=\"166\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 ShadCn UI \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx shadcn@latest init\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\u0639\u062f\u060c a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <strong><code>components<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js\u060c \u0633\u067e\u0633 \u0622\u0646 \u0631\u0627 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>ui<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0645\u062e\u0632\u0646 GitHub \u0628\u0647 \u0622\u0646 \u067e\u0648\u0634\u0647. Shadcn \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627 \u0646\u0635\u0628 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0645\u0624\u0644\u0641\u0647\u200c\u0647\u0627\u06cc Shadcn\u060c \u0628\u0627\u06cc\u062f \u0686\u0646\u062f \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0645\u0627\u06cc\u0627\u0646\u06af\u0631 \u0628\u062e\u0634\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0631\u0627\u0628\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627\u0634\u062f. \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <strong><code>components<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0627\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">touch <\/span>ResearchWrapper.tsx ResultsView.tsx HomeView.tsx\n<span class=\"nb\">touch <\/span>AnswerMarkdown.tsx Progress.tsx SkeletonLoader.tsx\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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>app\/page.tsx<\/code><\/strong>  \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ResearchWrapper<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ResearchWrapper<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ModelSelectorProvider<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useModelSelectorContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/model-selector-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ResearchProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/research-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CopilotKit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-ui\/styles.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ModelSelectorWrapper<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">CopilotKit<\/span> <span class=\"nx\">runtimeUrl<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">useLgc<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/copilotkit-lgc<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/copilotkit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"nx\">agent<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">ai_researcher<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchProvider<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchWrapper<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ResearchProvider<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/CopilotKit<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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\u0631 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c <strong><code>ResearchProvider<\/code><\/strong>  \u06cc\u06a9 \u0627\u0631\u0627\u0626\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0632\u0645\u06cc\u0646\u0647 \u0633\u0641\u0627\u0631\u0634\u06cc React \u0627\u0633\u062a \u06a9\u0647 \u067e\u0631\u0633 \u0648 \u062c\u0648 \u0648 \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u062f. \u0627\u06cc\u0646 <strong><code>ResearchWrapper<\/code><\/strong>  \u062c\u0632\u0621 \u0634\u0627\u0645\u0644 \u0639\u0646\u0627\u0635\u0631 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a \u0648 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <strong><code>lib<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 <strong><code>research-provider.tsx<\/code><\/strong>  \u0641\u0627\u06cc\u0644 \u0631\u0627 \u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647 Next.js \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useContext<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">ReactNode<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useEffect<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">ResearchContextType<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">researchQuery<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setResearchQuery<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">researchInput<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setResearchInput<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">input<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isLoading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setIsLoading<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">loading<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">researchResult<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ResearchResult<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">setResearchResult<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">result<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ResearchResult<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"kd\">type<\/span> <span class=\"nx\">ResearchResult<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n  <span class=\"na\">answer<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">sources<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">[];<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">ResearchContext<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">createContext<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchContextType<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">undefined<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">undefined<\/span><span class=\"p\">);<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">ResearchProvider<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">children<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">children<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ReactNode<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">researchQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setResearchQuery<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setResearchInput<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"kr\">string<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">researchResult<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setResearchResult<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchResult<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isLoading<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsLoading<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">boolean<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n\n  <span class=\"nf\">useEffect<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"o\">!<\/span><span class=\"nx\">researchQuery<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nf\">setResearchResult<\/span><span class=\"p\">(<\/span><span class=\"kc\">null<\/span><span class=\"p\">);<\/span>\n      <span class=\"nf\">setResearchInput<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">},<\/span> <span class=\"p\">[<\/span><span class=\"nx\">researchQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">researchResult<\/span><span class=\"p\">]);<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchContext<\/span><span class=\"p\">.<\/span><span class=\"nx\">Provider<\/span>\n      <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span>\n        <span class=\"nx\">researchQuery<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setResearchQuery<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setResearchInput<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">isLoading<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setIsLoading<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">researchResult<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">setResearchResult<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">}}<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"p\">{<\/span><span class=\"nx\">children<\/span><span class=\"p\">}<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ResearchContext.Provider<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">useResearchContext<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">context<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">ResearchContext<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">context<\/span> <span class=\"o\">===<\/span> <span class=\"kc\">undefined<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">throw<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Error<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">useResearchContext must be used within a ResearchProvider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">context<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">};<\/span>\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>\u0627\u06cc\u0627\u0644\u062a \u0647\u0627 \u0627\u0639\u0644\u0627\u0645 \u0634\u062f\u0647 \u0648 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f <strong><code>ResearchContext<\/code><\/strong>  \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u062d\u06cc\u062d \u0622\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647.<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <strong><code>ResearchWrapper<\/code><\/strong>  \u062c\u0632\u0621 \u0645\u0637\u0627\u0628\u0642 \u0634\u06a9\u0644 \u0632\u06cc\u0631:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">HomeView<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/HomeView<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ResultsView<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/ResultsView<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AnimatePresence<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">framer-motion<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useResearchContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/research-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ResearchWrapper<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">researchQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setResearchInput<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useResearchContext<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col items-center justify-center relative z-10<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"p\">{<\/span><span class=\"nx\">researchQuery<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">AnimatePresence<\/span>\n              <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">results<\/span><span class=\"dl\">\"<\/span>\n              <span class=\"nx\">onExitComplete<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n                <span class=\"nf\">setResearchInput<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n              <span class=\"p\">}}<\/span>\n              <span class=\"nx\">mode<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">wait<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">ResultsView<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">results<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/AnimatePresence<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">AnimatePresence<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">home<\/span><span class=\"dl\">\"<\/span> <span class=\"nx\">mode<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">wait<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n              <span class=\"o\">&lt;<\/span><span class=\"nx\">HomeView<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">home<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/AnimatePresence<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"p\">)}<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">footer<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xs p-2<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">a<\/span>\n            <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">https:\/\/copilotkit.ai<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">target<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">_blank<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">rel<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">noopener noreferrer<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-slate-600 font-medium hover:underline<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">Powered<\/span> <span class=\"nx\">by<\/span> <span class=\"nx\">CopilotKit<\/span> <span class=\"err\">\ud83e\ude81<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/a<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/footer<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u0627\u06cc\u0646 <strong><code>ResearchWrapper<\/code><\/strong>  \u062c\u0632\u0621 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f <strong><code>HomeView<\/code><\/strong>  \u062c\u0632\u0621 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0645\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0648 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f <strong><code>ResultView<\/code><\/strong>  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0639\u0628\u0627\u0631\u062a \u062c\u0633\u062a\u062c\u0648 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0627\u06cc\u0646 <strong><code>useResearchContext<\/code><\/strong>  \u0642\u0644\u0627\u0628 \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u062f \u062a\u0627 \u0628\u0647 <strong><code>researchQuery<\/code><\/strong>  \u0628\u0631 \u0627\u0633\u0627\u0633 \u0622\u0646 \u0646\u0645\u0627\u06cc \u0631\u0627 \u0628\u06cc\u0627\u0646 \u0648 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <strong><code>HomeView<\/code><\/strong>  \u062c\u0632\u0621 \u0628\u0631\u0627\u06cc \u0631\u0646\u062f\u0631 \u0631\u0627\u0628\u0637 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useEffect<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Textarea<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/ui\/textarea<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">cn<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/utils<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Button<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/ui\/button<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CornerDownLeftIcon<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">lucide-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useResearchContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/research-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">motion<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">framer-motion<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCoAgent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TextMessage<\/span><span class=\"p\">,<\/span> <span class=\"nx\">MessageRole<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/runtime-client-gql<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"kd\">type<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AgentState<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/lib\/types<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useModelSelectorContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/model-selector-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">MAX_INPUT_LENGTH<\/span> <span class=\"o\">=<\/span> <span class=\"mi\">250<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">HomeView<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">setResearchQuery<\/span><span class=\"p\">,<\/span> <span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setResearchInput<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span>\n    <span class=\"nf\">useResearchContext<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">model<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useModelSelectorContext<\/span><span class=\"p\">();<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">isInputFocused<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setIsInputFocused<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">run<\/span><span class=\"p\">:<\/span> <span class=\"nx\">runResearchAgent<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useCoAgent<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">AgentState<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">ai_researcher<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">initialState<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">model<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleResearch<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setResearchQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">runResearchAgent<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">return<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">TextMessage<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">role<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MessageRole<\/span><span class=\"p\">.<\/span><span class=\"nx\">User<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">content<\/span><span class=\"p\">:<\/span> <span class=\"nx\">query<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">});<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">suggestions<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n    <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Electric cars sold in 2024 vs 2023<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\ud83d\ude99<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Top 10 richest people in the world<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\ud83d\udcb0<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Population of the World<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\ud83c\udf0d <\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">{<\/span> <span class=\"na\">label<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Weather in Seattle VS New York<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">icon<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\u26c5\ufe0f<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">},<\/span>\n  <span class=\"p\">];<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"o\">&lt;<\/span><span class=\"nx\">motion<\/span><span class=\"p\">.<\/span><span class=\"nx\">div<\/span>\n      <span class=\"nx\">initial<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"nx\">animate<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"nx\">exit<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"nx\">transition<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.4<\/span> <span class=\"p\">}}<\/span>\n      <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">h-screen w-full flex flex-col gap-y-2 justify-center items-center p-4 lg:p-0<\/span><span class=\"dl\">\"<\/span>\n    <span class=\"o\">&gt;<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-4xl font-extralight mb-6<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"nx\">What<\/span> <span class=\"nx\">would<\/span> <span class=\"nx\">you<\/span> <span class=\"nx\">like<\/span> <span class=\"nx\">to<\/span> <span class=\"nx\">know<\/span><span class=\"p\">?<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n        <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">cn<\/span><span class=\"p\">(<\/span>\n          <span class=\"dl\">\"<\/span><span class=\"s2\">w-full bg-slate-100\/50 border shadow-sm rounded-md transition-all<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">{<\/span>\n            <span class=\"dl\">\"<\/span><span class=\"s2\">ring-1 ring-slate-300<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">isInputFocused<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">}<\/span>\n        <span class=\"p\">)}<\/span>\n      <span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">Textarea<\/span>\n          <span class=\"nx\">placeholder<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Ask anything...<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">bg-transparent p-4 resize-none focus-visible:ring-0 focus-visible:ring-offset-0 border-0 w-full<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"nx\">onFocus<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setIsInputFocused<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)}<\/span>\n          <span class=\"nx\">onBlur<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setIsInputFocused<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)}<\/span>\n          <span class=\"nx\">value<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">}<\/span>\n          <span class=\"nx\">onChange<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setResearchInput<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">)}<\/span>\n          <span class=\"nx\">onKeyDown<\/span><span class=\"o\">=<\/span><span class=\"p\">{(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">key<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Enter<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"o\">!<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">shiftKey<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n              <span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nf\">preventDefault<\/span><span class=\"p\">();<\/span>\n              <span class=\"nf\">handleResearch<\/span><span class=\"p\">(<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">);<\/span>\n            <span class=\"p\">}<\/span>\n          <span class=\"p\">}}<\/span>\n          <span class=\"nx\">maxLength<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">MAX_INPUT_LENGTH<\/span><span class=\"p\">}<\/span>\n        <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-xs p-4 flex items-center justify-between<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">cn<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">transition-all duration-300 mt-4 text-slate-500<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">opacity-0<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">opacity-100<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">})}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"p\">{<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/ {MAX_INPUT_LENGTH<\/span><span class=\"err\">}\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"nx\">Button<\/span>\n            <span class=\"nx\">size<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">sm<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nf\">cn<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">rounded-full transition-all duration-300<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">opacity-0 pointer-events-none<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">opacity-100<\/span><span class=\"dl\">\"<\/span><span class=\"p\">:<\/span> <span class=\"nx\">researchInput<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">})}<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">handleResearch<\/span><span class=\"p\">(<\/span><span class=\"nx\">researchInput<\/span><span class=\"p\">)}<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"nx\">Research<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">CornerDownLeftIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">w-4 h-4 ml-2<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/Button<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">grid grid-cols-2 w-full gap-2 text-sm<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"p\">{<\/span><span class=\"nx\">suggestions<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">suggestion<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">suggestion<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">}<\/span>\n            <span class=\"nx\">onClick<\/span><span class=\"o\">=<\/span><span class=\"p\">{()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">handleResearch<\/span><span class=\"p\">(<\/span><span class=\"nx\">suggestion<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">)}<\/span>\n            <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">p-2 bg-slate-100\/50 rounded-md border col-span-2 lg:col-span-1 flex cursor-pointer items-center space-x-2 hover:bg-slate-100 transition-all duration-300<\/span><span class=\"dl\">\"<\/span>\n          <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">text-base<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">suggestion<\/span><span class=\"p\">.<\/span><span class=\"nx\">icon<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"nx\">span<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex-1<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">suggestion<\/span><span class=\"p\">.<\/span><span class=\"nx\">label<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/span<\/span><span class=\"err\">&gt;\n<\/span>          <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"p\">))}<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/motion.div<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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><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%2F5xamjt68677gutp64xsa.png\" alt=\"\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\" loading=\"lazy\" width=\"800\" height=\"405\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%DA%AF%D9%88%D9%86%D9%87_CoAgent_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A8%D9%87_%DB%8C%DA%A9_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_Nextjs_%D9%85%D8%AA%D8%B5%D9%84_%DA%A9%D9%86%DB%8C%D9%85\"><\/span>\n<p>  \u0686\u06af\u0648\u0646\u0647 CoAgent \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u06cc\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u062f \u06af\u0631\u0641\u062a \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 CopilotKit CoAgent \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062e\u0648\u062f \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0639\u0645\u0644\u06cc\u0627\u062a \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f.<\/p>\n<p>\u0628\u0633\u062a\u0647 \u0647\u0627\u06cc CopilotKit \u0632\u06cc\u0631 \u0648 OpenAI Node.js SDK \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f. \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc CopilotKit \u0628\u0647 \u0639\u0627\u0645\u0644 \u0645\u0634\u062a\u0631\u06a9 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0627 \u0645\u0642\u0627\u062f\u06cc\u0631 React \u062d\u0627\u0644\u062a \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u0648 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0635\u0645\u06cc\u0645 \u06af\u06cc\u0631\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install<\/span> @copilotkit\/react-core @copilotkit\/react-ui @copilotkit\/runtime @copilotkit\/runtime-client-gql openai\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>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <strong><code>api<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u062f\u0631 Next.js <strong><code>app<\/code><\/strong>  \u067e\u0648\u0634\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 <strong><code>api<\/code><\/strong>  \u067e\u0648\u0634\u0647\u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 <strong><code>copilotkit<\/code><\/strong>  \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u062d\u0627\u0648\u06cc \u0627\u0644\u0641 <strong><code>route.ts<\/code><\/strong>  \u0641\u0627\u06cc\u0644 \u0627\u06cc\u0646 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f (<strong><code>\/api\/copilotkit<\/code><\/strong>) \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 frontend \u0631\u0627 \u0628\u0647 CopilotKit CoAgent \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">cd <\/span>app\n<span class=\"nb\">mkdir <\/span>api <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cd <\/span>api\n<span class=\"nb\">mkdir <\/span>copilotkit <span class=\"o\">&amp;&amp;<\/span> <span class=\"nb\">cd <\/span>copilotkit\n<span class=\"nb\">touch <\/span>route.ts\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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>api\/copilotkit\/route.ts<\/code><\/strong>  \u0641\u0627\u06cc\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NextRequest<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/server<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">CopilotRuntime<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">OpenAIAdapter<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">copilotRuntimeNextJSAppRouterEndpoint<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/runtime<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"nx\">OpenAI<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">openai<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb initializes OpenAI as the adapter<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">openai<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">OpenAI<\/span><span class=\"p\">();<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">serviceAdapter<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">OpenAIAdapter<\/span><span class=\"p\">({<\/span> <span class=\"nx\">openai<\/span> <span class=\"p\">}<\/span> <span class=\"k\">as<\/span> <span class=\"kr\">any<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb connects the CopilotKit runtime to the CoAgent<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">runtime<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">CopilotRuntime<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">remoteEndpoints<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"p\">{<\/span>\n      <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">REMOTE_ACTION_URL<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">http:\/\/localhost:8000\/copilotkit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">},<\/span>\n  <span class=\"p\">],<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">POST<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">NextRequest<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">handleRequest<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">copilotRuntimeNextJSAppRouterEndpoint<\/span><span class=\"p\">({<\/span>\n    <span class=\"nx\">runtime<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">serviceAdapter<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">endpoint<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/copilotkit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">});<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"nf\">handleRequest<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">};<\/span>\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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 CopilotKit \u0631\u0627 \u062f\u0631 <strong><code>\/api\/copilotkit<\/code><\/strong>  \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API\u060c \u0628\u0647 CopilotKit \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0639\u0627\u0645\u0644 \u0645\u0634\u062a\u0631\u06a9 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u06a9\u0646\u062f. <\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f <strong><code>app\/page.tsx<\/code><\/strong>  \u0628\u0627 \u0628\u0633\u062a\u0647 \u0628\u0646\u062f\u06cc \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 \u0645\u0648\u0644\u0641\u0647 CopilotKit \u06a9\u0647 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0645\u06a9\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ModelSelector<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ModelSelector<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ResearchWrapper<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/components\/ResearchWrapper<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ModelSelectorProvider<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useModelSelectorContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/model-selector-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">ResearchProvider<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/research-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CopilotKit<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-ui\/styles.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ModelSelectorWrapper<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">main<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">flex flex-col items-center justify-between<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">ModelSelectorProvider<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Home<\/span><span class=\"o\">\/&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">ModelSelector<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ModelSelectorProvider<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/main<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useLgc<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useModelSelectorContext<\/span><span class=\"p\">();<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"o\">&lt;<\/span><span class=\"nx\">CopilotKit<\/span> <span class=\"nx\">runtimeUrl<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">useLgc<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/copilotkit-lgc<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">\/api\/copilotkit<\/span><span class=\"dl\">\"<\/span><span class=\"p\">}<\/span> <span class=\"nx\">agent<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">ai_researcher<\/span><span class=\"dl\">\"<\/span><span class=\"o\">&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchProvider<\/span><span class=\"o\">&gt;<\/span>\n          <span class=\"o\">&lt;<\/span><span class=\"nx\">ResearchWrapper<\/span> <span class=\"o\">\/&gt;<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ResearchProvider<\/span><span class=\"err\">&gt;\n<\/span>      <span class=\"o\">&lt;<\/span><span class=\"sr\">\/CopilotKit<\/span><span class=\"err\">&gt;\n<\/span>  <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u0645\u0624\u0644\u0641\u0647 CopilotKit \u06a9\u0644 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u067e\u06cc\u0686\u062f \u0648 \u062f\u0648 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0631\u0627 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f &#8211; <strong><code>runtimeUrl<\/code><\/strong>  \u0648 <strong><code>agent<\/code><\/strong>. \u0627\u06cc\u0646 <strong><code>runtimeUrl<\/code><\/strong>  \u0645\u0633\u06cc\u0631 API \u0628\u0627\u0637\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc\u0632\u0628\u0627\u0646 \u0639\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 <strong><code>agent<\/code><\/strong>  \u0646\u0627\u0645 \u0639\u0627\u0645\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0639\u0645\u0644 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B0%DB%8C%D8%B1%D8%B4_%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA_%D9%87%D8%A7_%D9%88_%D9%BE%D8%A7%D8%B3%D8%AE_%D9%87%D8%A7%DB%8C_%D8%AC%D8%B1%DB%8C%D8%A7%D9%86%DB%8C_%D8%A8%D9%87_%D9%81%D8%B1%D8%A7%D9%86%D8%AA_%D8%A7%D9%86%D8%AF\"><\/span>\n<p>  \u067e\u0630\u06cc\u0631\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627 \u0648 \u067e\u0627\u0633\u062e \u0647\u0627\u06cc \u062c\u0631\u06cc\u0627\u0646\u06cc \u0628\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0641\u0639\u0627\u0644 \u06a9\u0631\u062f\u0646 CopilotKit \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0648 \u067e\u0631\u062f\u0627\u0632\u0634 \u0648\u0631\u0648\u062f\u06cc \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u060c \u0622\u0646 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f <strong><code>useCoAgent<\/code><\/strong>  hook\u060c \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0639\u0627\u0645\u0644 \u0631\u0627 \u0627\u0632 \u0647\u0631 \u0646\u0642\u0637\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f <strong><code>useCoAgent<\/code><\/strong>  \u0642\u0644\u0627\u0628 \u0627\u06cc\u0646 <strong><code>state<\/code><\/strong>  \u0645\u062a\u063a\u06cc\u0631 \u0627\u062c\u0627\u0632\u0647 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0648\u0636\u0639\u06cc\u062a \u0641\u0639\u0644\u06cc \u0639\u0627\u0645\u0644 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f\u060c <strong><code>setState<\/code><\/strong>  \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u0632 <strong><code>run<\/code><\/strong>  \u062a\u0627\u0628\u0639 \u062f\u0633\u062a\u0648\u0631\u0627\u062a \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0627\u0645\u0644 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 <strong><code>start<\/code><\/strong>  \u0648 <strong><code>stop<\/code><\/strong>  \u062a\u0648\u0627\u0628\u0639 \u0627\u062c\u0631\u0627\u06cc \u0639\u0627\u0645\u0644 \u0631\u0627 \u0622\u063a\u0627\u0632 \u0648 \u0645\u062a\u0648\u0642\u0641 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">state<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setState<\/span><span class=\"p\">,<\/span> <span class=\"nx\">run<\/span><span class=\"p\">,<\/span> <span class=\"nx\">start<\/span><span class=\"p\">,<\/span> <span class=\"nx\">stop<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCoAgent<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">search_agent<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\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>\u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f <strong><code>HomeView<\/code><\/strong>  \u0645\u0624\u0644\u0641\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0639\u0627\u0645\u0644 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0627\u0631\u0627\u0626\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062c\u0633\u062a\u062c\u0648.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb import useCoAgent hook from CopilotKit<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCoAgent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">run<\/span><span class=\"p\">:<\/span> <span class=\"nx\">runResearchAgent<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCoAgent<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">search_agent<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">handleResearch<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setResearchQuery<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">);<\/span>\n    <span class=\"nf\">runResearchAgent<\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/\ud83d\udc49\ud83c\udffb starts the agent execution<\/span>\n<span class=\"p\">};<\/span>\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\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u067e\u062e\u0634 \u06a9\u0646\u06cc\u062f <strong><code>ResultsView<\/code><\/strong>  \u0628\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0645\u062a\u063a\u06cc\u0631 state \u062f\u0631 \u062f\u0627\u062e\u0644 <strong><code>useCoAgent<\/code><\/strong>  \u0642\u0644\u0627\u0628 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>ResultsView<\/code><\/strong>  \u062c\u0632\u0621<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"dl\">\"<\/span><span class=\"s2\">use client<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useResearchContext<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@\/lib\/research-provider<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">motion<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">framer-motion<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BookOpenIcon<\/span><span class=\"p\">,<\/span> <span class=\"nx\">LoaderCircleIcon<\/span><span class=\"p\">,<\/span> <span class=\"nx\">SparkleIcon<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">lucide-react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">SkeletonLoader<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/SkeletonLoader<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCoAgent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-core<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Progress<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/Progress<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AnswerMarkdown<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/AnswerMarkdown<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">ResultsView<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">researchQuery<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useResearchContext<\/span><span class=\"p\">();<\/span>\n    <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb agent state<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"p\">{<\/span> <span class=\"na\">state<\/span><span class=\"p\">:<\/span> <span class=\"nx\">agentState<\/span> <span class=\"p\">}<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useCoAgent<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">search_agent<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">AGENT_STATE<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"nx\">agentState<\/span><span class=\"p\">);<\/span>\n\n    <span class=\"c1\">\/\/\ud83d\udc47\ud83c\udffb keeps track of the current agent processing state<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">steps<\/span> <span class=\"o\">=<\/span>\n        <span class=\"nx\">agentState<\/span><span class=\"p\">?.<\/span><span class=\"nx\">steps<\/span><span class=\"p\">?.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">step<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n                <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"nx\">step<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">status<\/span><span class=\"p\">:<\/span> <span class=\"nx\">step<\/span><span class=\"p\">.<\/span><span class=\"nx\">status<\/span> <span class=\"o\">||<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">pending<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                <span class=\"na\">updates<\/span><span class=\"p\">:<\/span> <span class=\"nx\">step<\/span><span class=\"p\">.<\/span><span class=\"nx\">updates<\/span> <span class=\"o\">||<\/span> <span class=\"p\">[],<\/span>\n            <span class=\"p\">};<\/span>\n        <span class=\"p\">})<\/span> <span class=\"o\">||<\/span> <span class=\"p\">[];<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">isLoading<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">agentState<\/span><span class=\"p\">?.<\/span><span class=\"nx\">answer<\/span><span class=\"p\">?.<\/span><span class=\"nx\">markdown<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">motion<\/span><span class=\"p\">.<\/span><span class=\"nx\">div<\/span>\n            <span class=\"nx\">initial<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"nx\">animate<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"nx\">exit<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">opacity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"na\">y<\/span><span class=\"p\">:<\/span> <span class=\"o\">-<\/span><span class=\"mi\">50<\/span> <span class=\"p\">}}<\/span>\n            <span class=\"nx\">transition<\/span><span class=\"o\">=<\/span><span class=\"p\">{{<\/span> <span class=\"na\">duration<\/span><span class=\"p\">:<\/span> <span class=\"mf\">0.5<\/span><span class=\"p\">,<\/span> <span class=\"na\">ease<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">easeOut<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">}}<\/span>\n        <span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">max-w-[1000px] p-8 lg:p-4 flex flex-col gap-y-8 mt-4 lg:mt-6 text-sm lg:text-base<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">space-y-4<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">h1<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">text-3xl lg:text-4xl font-extralight<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"p\">{<\/span><span class=\"nx\">researchQuery<\/span><span class=\"p\">}<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h1<\/span><span class=\"err\">&gt;\n<\/span>                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">Progress<\/span> <span class=\"nx\">steps<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">steps<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/<\/span><span class=\"err\">&gt;\n<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">grid grid-cols-12 gap-8<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                    <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">col-span-12 lg:col-span-8 flex flex-col<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flex items-center gap-x-2<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"p\">{<\/span><span class=\"nx\">isLoading<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n                                <span class=\"o\">&lt;<\/span><span class=\"nx\">LoaderCircleIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">animate-spin w-4 h-4 text-slate-500<\/span><span class=\"dl\">'<\/span> <span class=\"o\">\/&gt;<\/span>\n                            <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n                                <span class=\"o\">&lt;<\/span><span class=\"nx\">SparkleIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">w-4 h-4 text-slate-500<\/span><span class=\"dl\">'<\/span> <span class=\"o\">\/&gt;<\/span>\n                            <span class=\"p\">)}<\/span>\n                            <span class=\"nx\">Answer<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">text-slate-500 font-light<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"p\">{<\/span><span class=\"nx\">isLoading<\/span> <span class=\"p\">?<\/span> <span class=\"p\">(<\/span>\n                                <span class=\"o\">&lt;<\/span><span class=\"nx\">SkeletonLoader<\/span> <span class=\"o\">\/&gt;<\/span>\n                            <span class=\"p\">)<\/span> <span class=\"p\">:<\/span> <span class=\"p\">(<\/span>\n                                <span class=\"o\">&lt;<\/span><span class=\"nx\">AnswerMarkdown<\/span> <span class=\"nx\">markdown<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">agentState<\/span><span class=\"p\">?.<\/span><span class=\"nx\">answer<\/span><span class=\"p\">?.<\/span><span class=\"nx\">markdown<\/span><span class=\"p\">}<\/span> <span class=\"sr\">\/&gt; \/<\/span><span class=\"o\">\/<\/span><span class=\"err\">\ud83d\udc48\ud83c\udffc<\/span> <span class=\"nx\">displays<\/span> <span class=\"nx\">search<\/span> <span class=\"nx\">results<\/span>\n                            <span class=\"p\">)}<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                    <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>\n                    <span class=\"p\">{<\/span><span class=\"nx\">agentState<\/span><span class=\"p\">?.<\/span><span class=\"nx\">answer<\/span><span class=\"p\">?.<\/span><span class=\"nx\">references<\/span><span class=\"p\">?.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flex col-span-12 lg:col-span-4 flex-col gap-y-4 w-[200px]<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                            <span class=\"o\">&lt;<\/span><span class=\"nx\">h2<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">flex items-center gap-x-2<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                                <span class=\"o\">&lt;<\/span><span class=\"nx\">BookOpenIcon<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">w-4 h-4 text-slate-500<\/span><span class=\"dl\">'<\/span> <span class=\"o\">\/&gt;<\/span>\n                                <span class=\"nx\">References<\/span>\n                            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/h2<\/span><span class=\"err\">&gt;\n<\/span>                            <span class=\"o\">&lt;<\/span><span class=\"nx\">ul<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">text-slate-900 font-light text-sm flex flex-col gap-y-2<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n                                <span class=\"p\">{<\/span><span class=\"nx\">agentState<\/span><span class=\"p\">?.<\/span><span class=\"nx\">answer<\/span><span class=\"p\">?.<\/span><span class=\"nx\">references<\/span><span class=\"p\">?.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span>\n                                    <span class=\"p\">(<\/span><span class=\"na\">ref<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">,<\/span> <span class=\"na\">idx<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n                                        <span class=\"o\">&lt;<\/span><span class=\"nx\">li<\/span> <span class=\"nx\">key<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">idx<\/span><span class=\"p\">}<\/span><span class=\"o\">&gt;<\/span>\n                                            <span class=\"o\">&lt;<\/span><span class=\"nx\">a<\/span>\n                                                <span class=\"nx\">href<\/span><span class=\"o\">=<\/span><span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">url<\/span><span class=\"p\">}<\/span>\n                                                <span class=\"nx\">target<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">_blank<\/span><span class=\"dl\">'<\/span>\n                                                <span class=\"nx\">rel<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">noopener noreferrer<\/span><span class=\"dl\">'<\/span>\n                                            <span class=\"o\">&gt;<\/span>\n                                                <span class=\"p\">{<\/span><span class=\"nx\">idx<\/span> <span class=\"o\">+<\/span> <span class=\"mi\">1<\/span><span class=\"p\">}.<\/span> <span class=\"p\">{<\/span><span class=\"nx\">ref<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">}<\/span>\n                                            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/a<\/span><span class=\"err\">&gt;\n<\/span>                                        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/li<\/span><span class=\"err\">&gt;\n<\/span>                                    <span class=\"p\">)<\/span>\n                                <span class=\"p\">)}<\/span>\n                            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/ul<\/span><span class=\"err\">&gt;\n<\/span>                        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>                    <span class=\"p\">)}<\/span>\n                <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>            <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/motion.div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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>\u0642\u0637\u0639\u0647 \u06a9\u062f \u0628\u0627\u0644\u0627 \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u0631\u0627 \u0627\u0632 \u0648\u0636\u0639\u06cc\u062a \u0639\u0627\u0645\u0644 \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <strong><code>useCoAgent<\/code><\/strong>  \u0642\u0644\u0627\u0628 \u0646\u062a\u0627\u06cc\u062c \u062c\u0633\u062a\u062c\u0648 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0628\u0647 \u0642\u0633\u0645\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f <strong><code>AnswerMarkdown<\/code><\/strong>  \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p>\u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0633\u0645\u062a \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u062f <strong><code>AnswerMarkdown<\/code><\/strong>  \u062c\u0632\u0621 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 React Markdown\u060c \u0645\u062d\u062a\u0648\u0627\u06cc \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062a\u0646 \u0641\u0631\u0645\u062a \u0634\u062f\u0647 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Markdown<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">react-markdown<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">AnswerMarkdown<\/span><span class=\"p\">({<\/span> <span class=\"nx\">markdown<\/span> <span class=\"p\">}:<\/span> <span class=\"p\">{<\/span> <span class=\"nl\">markdown<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"p\">})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"o\">&lt;<\/span><span class=\"nx\">div<\/span> <span class=\"nx\">className<\/span><span class=\"o\">=<\/span><span class=\"dl\">'<\/span><span class=\"s1\">markdown-wrapper<\/span><span class=\"dl\">'<\/span><span class=\"o\">&gt;<\/span>\n            <span class=\"o\">&lt;<\/span><span class=\"nx\">Markdown<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">{<\/span><span class=\"nx\">markdown<\/span><span class=\"p\">}<\/span><span class=\"o\">&lt;<\/span><span class=\"sr\">\/Markdown<\/span><span class=\"err\">&gt;\n<\/span>        <span class=\"o\">&lt;<\/span><span class=\"sr\">\/div<\/span><span class=\"err\">&gt;\n<\/span>    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\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><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%2Fmky1phzo5q9mhvks0vuc.gif\" alt=\"\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a ResultsView\" loading=\"lazy\" width=\"800\" height=\"427\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645! \u0634\u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u06cc\u0644\u0645 \u0636\u0628\u0637 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<p><em>\u0636\u0628\u0637 \u06a9\u0627\u0645\u0644 \u0648\u0628\u06cc\u0646\u0627\u0631<\/em><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%DA%86%DB%8C%D8%AF%D9%86_%D8%A2%D9%86\"><\/span>\n<p>  \u067e\u06cc\u0686\u06cc\u062f\u0646 \u0622\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0648\u0634 LLM \u0632\u0645\u0627\u0646\u06cc \u0645\u0624\u062b\u0631\u062a\u0631 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0648\u0634 \u0627\u0646\u0633\u0627\u0646\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f \u0648 CopilotKit CoAgents \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u062e\u0644\u0628\u0627\u0646\u0627\u0646 \u0648 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641 \u062f\u0633\u062a\u06cc\u0627\u0631\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \u062e\u0648\u062f \u062a\u0646\u0647\u0627 \u062f\u0631 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06af\u0631 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0645\u062d\u0635\u0648\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u06cc\u0627 \u0627\u062f\u063a\u0627\u0645 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u062f\u0627\u0631\u06cc\u062f\u060c \u0628\u0627\u06cc\u062f CopilotKit \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.<\/p>\n<p>\u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u062f\u0631 GitHub \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a:<\/p>\n<p>https:\/\/github.com\/CopilotKit\/CopilotKit\/tree\/main\/examples\/coagents-ai-researcher<\/p>\n<p>\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\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 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0645\u0633\u062a\u0642\u0644\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u0646\u062f. \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u062c\u062f\u06cc\u062f \u0634\u0627\u0645\u0644 Human-in-the-Loop \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u060c \u0646\u062a\u0627\u06cc\u062c \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u0646\u062f \u0648 \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0631\u0627\u062d\u0644 \u0628\u0639\u062f\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062a\u0635\u0645\u06cc\u0645 \u0628\u06af\u06cc\u0631\u0646\u062f. \u0627\u06cc\u0646 \u0639\u0648\u0627\u0645\u0644 \u0632\u0645\u0627\u0646 \u0627\u062c\u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 CoAgents \u0634\u0646\u0627\u062e\u062a\u0647 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":91918,"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%2Ff54ga3xzvxovla6yn9bk.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-91916","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\/91916","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=91916"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/91916\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/91918"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=91916"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=91916"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=91916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}