{"id":64220,"date":"2024-05-29T16:54:28","date_gmt":"2024-05-29T13:24:28","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/"},"modified":"2024-05-29T16:54:28","modified_gmt":"2024-05-29T13:24:28","slug":"%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0647\u0633\u062a\u0646\u062f (Next.js\u060c GPT4 \u0648 CopilotKit)"},"content":{"rendered":"<p><\/p>\n<div data-article-id=\"1867709\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_81 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#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\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#CopilotKit_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%DA%A9%D9%88%D9%BE%DB%8C%D9%84%D9%88%D8%AA_%D9%87%D8%A7%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%DB%8C\" >CopilotKit: \u0686\u0627\u0631\u0686\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06a9\u0648\u067e\u06cc\u0644\u0648\u062a \u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%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\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%88_%D9%86%D8%B5%D8%A8_%D8%A8%D8%B3%D8%AA%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u0646\u0635\u0628 \u0628\u0633\u062a\u0647<\/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\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AC%D8%A8%D9%87%D9%87_%D8%AA%D9%88%D9%84%DB%8C%D8%AF_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1%D9%87%D8%A7\" >\u0633\u0627\u062e\u062a \u062c\u0628\u0647\u0647 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627<\/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\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF%D9%87%D8%A7%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%A8%D9%87_%DA%98%D9%86%D8%B1%D8%A7%D8%AA%D9%88%D8%B1_%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_CopilotKit\" >\u0627\u062f\u063a\u0627\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0698\u0646\u0631\u0627\u062a\u0648\u0631 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CopilotKit<\/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\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_CopilotKit_%D8%A8%D9%87_Frontend_Generator_List_To-Do\" >\u0627\u0641\u0632\u0648\u062f\u0646 CopilotKit \u0628\u0647 Frontend Generator List To-Do<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_CopilotKit_Backend_%D8%A8%D9%87_%D9%88%D8%A8%D9%84%D8%A7%DA%AF\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 CopilotKit Backend \u0628\u0647 \u0648\u0628\u0644\u0627\u06af<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D9%86%D8%AD%D9%88%D9%87_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%D9%84%DB%8C%D8%B3%D8%AA_Todo\" >\u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0644\u06cc\u0633\u062a Todo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%d9%84%db%8c%d8%b3%d8%aa-%da%a9%d8%a7%d8%b1%d9%87%d8%a7%db%8c%db%8c-%da%a9%d9%87-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d9%87%d9%88%d8%b4\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"TL_DR\"><\/span>\n<p>  <strong>TL; DR<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0627\u0645\u0631\u0648\u0632\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 \u062f\u0627\u0634\u062a\u0646 \u0686\u0646\u062f \u067e\u0631\u0648\u0698\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u062e\u0648\u062f \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. <\/p>\n<p>\u0627\u0645\u0631\u0648\u0632\u060c \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a\u0646 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u06a9\u0645\u06a9 \u062e\u0644\u0628\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062a\u0639\u0628\u06cc\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062c\u0627\u062f\u0648\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0634\u0631\u062d \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnw0jituk3y5tosz6f34u.gif\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"1000\" height=\"944\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0646\u062d\u0648\u0647 \u0627\u0646\u062c\u0627\u0645 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0648\u0634\u0634 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f:<\/p>\n<ul>\n<li>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Next.js\u060c TypeScript \u0648 Tailwind CSS\u060c \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0628\u0633\u0627\u0632\u06cc\u062f.<\/li>\n<li>\u0627\u0632 CopilotKit \u0628\u0631\u0627\u06cc \u0627\u062f\u063a\u0627\u0645 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<li>\u0627\u0632 \u0631\u0628\u0627\u062a \u0686\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0644\u06cc\u0633\u062a \u0647\u0627\u060c \u0627\u062e\u062a\u0635\u0627\u0635 \u0644\u06cc\u0633\u062a \u0647\u0627 \u0628\u0647 \u0634\u062e\u0635\u06cc\u060c \u0639\u0644\u0627\u0645\u062a \u06af\u0630\u0627\u0631\u06cc \u0644\u06cc\u0633\u062a \u0647\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644 \u0634\u062f\u0647 \u0648 \u062d\u0630\u0641 \u0644\u06cc\u0633\u062a \u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fguf0l2fiq1g1jv86o7bg.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"402\" title=\"\"><\/p>\n<hr\/>\n<h2><span class=\"ez-toc-section\" id=\"CopilotKit_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8%DB%8C_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B3%D8%A7%D8%AE%D8%AA%D9%86_%DA%A9%D9%88%D9%BE%DB%8C%D9%84%D9%88%D8%AA_%D9%87%D8%A7%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%AF%D8%B1%D9%88%D9%86_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%A7%DB%8C\"><\/span>\n<p>  CopilotKit: \u0686\u0627\u0631\u0686\u0648\u0628\u06cc \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u06a9\u0648\u067e\u06cc\u0644\u0648\u062a \u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CopilotKit \u06cc\u06a9 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 AI Copilot \u0627\u0633\u062a.  \u0645\u0627 \u0627\u062f\u063a\u0627\u0645 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0631\u0627 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc React \u0634\u0645\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0633\u0627\u062e\u062a\u0646:<\/p>\n<ul>\n<li>ChatBot: \u0686\u062a\u200c\u0631\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u062f\u0631\u0648\u0646\u200c\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0622\u06af\u0627\u0647 \u0627\u0632 \u0632\u0645\u06cc\u0646\u0647 \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0646\u062f.<\/li>\n<li>CopilotTextArea: \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0645\u062a\u0646\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0627 \u062a\u06a9\u0645\u06cc\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 \u062f\u0631\u062c\u200c\u0647\u0627\u06cc \u0645\u062a\u0646\u06cc \ud83d\udcdd<\/li>\n<li>Co-Agents: \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 \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0634\u0645\u0627 \u062a\u0639\u0627\u0645\u0644 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmyp7zashy99m33ya8kaf.gif\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"436\" data-animated=\"true\" title=\"\"><\/p>\n<p>Star CopilotKit \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>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0645\u0648\u0644\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<ul>\n<li>\n<p>Nanoid &#8211; \u06cc\u06a9 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0634\u0646\u0627\u0633\u0647 \u0631\u0634\u062a\u0647 \u0627\u06cc \u06a9\u0648\u0686\u06a9\u060c \u0627\u06cc\u0645\u0646\u060c \u0633\u0627\u0632\u06af\u0627\u0631 \u0628\u0627 URL \u0648 \u0645\u0646\u062d\u0635\u0631 \u0628\u0647 \u0641\u0631\u062f \u0628\u0631\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.<\/li>\n<li>\n<p>OpenAI API &#8211; \u06cc\u06a9 \u06a9\u0644\u06cc\u062f API \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648\u0638\u0627\u06cc\u0641 \u0645\u062e\u062a\u0644\u0641\u06cc \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u062f\u0644 \u0647\u0627\u06cc ChatGPT \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\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<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D9%88_%D9%86%D8%B5%D8%A8_%D8%A8%D8%B3%D8%AA%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u067e\u0631\u0648\u0698\u0647 \u0648 \u0646\u0635\u0628 \u0628\u0633\u062a\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627 \u0627\u062c\u0631\u0627\u06cc \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f\u060c \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"nx\">npx<\/span> <span class=\"nx\">create<\/span><span class=\"o\">-<\/span><span class=\"nx\">next<\/span><span class=\"o\">-<\/span><span class=\"nx\">app<\/span><span class=\"p\">@<\/span><span class=\"nd\">latest<\/span> <span class=\"nx\">todolistgenerator<\/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>\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062f\u0644\u062e\u0648\u0627\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f.  \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634\u060c \u0627\u0632 TypeScript \u0648 Next.js App Router \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0tc6he9eivkt3hhxnj3p.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"708\" height=\"257\" title=\"\"><\/p>\n<p>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f \u067e\u06a9\u06cc\u062c Nanoid \u0648 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"nx\">npm<\/span> <span class=\"nx\">i<\/span> <span class=\"nx\">nanoid<\/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 \u0646\u0647\u0627\u06cc\u062a \u0628\u0633\u062a\u0647 \u0647\u0627\u06cc CopilotKit \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f.  \u0627\u06cc\u0646 \u0628\u0633\u062a\u0647\u200c\u0647\u0627 \u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc\u200c\u0633\u0627\u0632\u0646\u062f \u062a\u0627 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u062d\u0627\u0644\u062a React \u0628\u0627\u0632\u06cc\u0627\u0628\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u0648\u067e\u0627\u06cc\u0644\u0648\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code> <span class=\"nx\">npm<\/span> <span class=\"nx\">install<\/span> <span class=\"p\">@<\/span><span class=\"nd\">copilotkit<\/span><span class=\"sr\">\/react-ui @copilotkit\/<\/span><span class=\"nx\">react<\/span><span class=\"o\">-<\/span><span class=\"nx\">textarea<\/span> <span class=\"p\">@<\/span><span class=\"nd\">copilotkit<\/span><span class=\"sr\">\/react-core @copilotkit\/<\/span><span class=\"nx\">backend<\/span> <span class=\"p\">@<\/span><span class=\"nd\">copilotkit<\/span><span class=\"sr\">\/share<\/span><span class=\"err\">d\n<\/span><\/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>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0634\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u0622\u0645\u0627\u062f\u0647 \u0633\u0627\u062e\u062a\u0646 \u06cc\u06a9 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0644\u06cc\u0633\u062a \u0648\u0638\u0627\u06cc\u0641 \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0647\u0633\u062a\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%AC%D8%A8%D9%87%D9%87_%D8%AA%D9%88%D9%84%DB%8C%D8%AF_%DA%A9%D9%86%D9%86%D8%AF%D9%87_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1%D9%87%D8%A7\"><\/span>\n<p>  <strong>\u0633\u0627\u062e\u062a \u062c\u0628\u0647\u0647 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0628\u062e\u0634\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u0646\u0645\u0627\u06cc\u0647 \u0645\u0648\u0644\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u062b\u0627\u0628\u062a \u0628\u0631\u0627\u06cc \u062a\u0639\u0631\u06cc\u0641 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u0648\u0644\u062f \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u062e\u0648\u0627\u0647\u0645 \u06a9\u0631\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0628\u0647 <code>\/[root]\/src\/app<\/code> \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u062e\u0648\u062f \u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>types<\/code>.  \u062f\u0631 \u067e\u0648\u0634\u0647 Type \u0647\u0627\u060c \u0641\u0627\u06cc\u0644\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>todo.ts<\/code> \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u0631\u0627\u0628\u0637 TypeScript \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <strong><code>Todo<\/code>.<\/strong> <\/p>\n<p>\u0627\u06cc\u0646 <strong><code>Todo<\/code><\/strong>  \u0627\u06cc\u0646\u062a\u0631\u0641\u06cc\u0633 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u0634\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0647\u0631 \u0645\u0648\u0631\u062f \u0628\u0627\u06cc\u062f \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0627\u0634\u062f <strong><code>id<\/code><\/strong>\u060c <strong><code>text<\/code><\/strong>\u060c \u0648 <strong><code>isCompleted<\/code><\/strong>  \u0648\u0636\u0639\u06cc\u062a\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 <strong><code>assignedTo<\/code><\/strong>  \u0648\u06cc\u0698\u06af\u06cc.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">Todo<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isCompleted<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">assignedTo<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n<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>\u0633\u067e\u0633 \u0628\u0631\u0648 \u0628\u0647 <code>\/[root]\/src\/app<\/code> \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06a9\u062f \u062e\u0648\u062f \u0648 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0628\u0647 \u0646\u0627\u0645 <code>components<\/code>.  \u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a\u060c \u0633\u0647 \u0641\u0627\u06cc\u0644 \u0628\u0627 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Header.tsx<\/code>\u060c <code>TodoList.tsx<\/code> \u0648 <code>TodoItem.tsx<\/code> .<\/p>\n<p>\u062f\u0631 <code>Header.tsx<\/code> \u0641\u0627\u06cc\u0644\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>Header<\/code> \u06a9\u0647 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0698\u0646\u0631\u0627\u062a\u0648\u0631 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Link<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">next\/link<\/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\">Header<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">header<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 \"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">nav<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8\"<\/span>\n          <span class=\"na\">aria-label<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Global\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex items-center justify-between\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Link<\/span>\n              <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-full flex-none text-xl text-white font-semibold p-6\"<\/span>\n              <span class=\"na\">href<\/span><span class=\"p\">=<\/span><span class=\"s\">\"https:\/\/dev.to\/\"<\/span>\n              <span class=\"na\">aria-label<\/span><span class=\"p\">=<\/span><span class=\"s\">\"Brand\"<\/span><span class=\"p\">&gt;<\/span>\n              To-Do List Generator\n            <span class=\"p\"\/><span class=\"nc\">Link<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">nav<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">header<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<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>\u062f\u0631 <code>TodoItem.tsx<\/code> \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u0627\u0628\u0639\u06cc React \u0628\u0647 \u0646\u0627\u0645 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <strong><code>TodoItem<\/code><\/strong>.  \u0627\u0632 TypeScript \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0645\u0646\u06cc \u0646\u0648\u0639 \u0648 \u062a\u0639\u0631\u06cc\u0641 \u0644\u0648\u0627\u0632\u0645\u06cc \u06a9\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u06cc \u067e\u0630\u06cc\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Todo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/types\/todo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Importing the Todo type from a types file<\/span>\n\n<span class=\"c1\">\/\/ Defining the interface for the props that the TodoItem component will receive<\/span>\n<span class=\"kr\">interface<\/span> <span class=\"nx\">TodoItemProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">todo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Todo<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ A single todo item<\/span>\n  <span class=\"nl\">toggleComplete<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/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> <span class=\"c1\">\/\/ Function to toggle the completion status of a todo<\/span>\n  <span class=\"nl\">deleteTodo<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/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> <span class=\"c1\">\/\/ Function to delete a todo<\/span>\n  <span class=\"nl\">assignPerson<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">person<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"k\">void<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Function to assign a person to a todo<\/span>\n  <span class=\"nl\">hasBorder<\/span><span class=\"p\">?:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Optional prop to determine if the item should have a border<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Defining the TodoItem component as a functional component with the specified props<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">TodoItem<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">TodoItemProps<\/span><span class=\"o\">&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"p\">({<\/span>\n  <span class=\"nx\">todo<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">toggleComplete<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">deleteTodo<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">assignPerson<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">hasBorder<\/span><span class=\"p\">,<\/span>\n<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=\"p\">&lt;<\/span><span class=\"nt\">div<\/span>\n      <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span>\n        <span class=\"dl\">\"<\/span><span class=\"s2\">flex items-center justify-between px-4 py-2 group<\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span>\n        <span class=\"p\">(<\/span><span class=\"nx\">hasBorder<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\"> border-b<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"c1\">\/\/ Conditionally adding a border class if hasBorder is true<\/span>\n      <span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex items-center\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"h-5 w-5 text-blue-500\"<\/span>\n          <span class=\"na\">type<\/span><span class=\"p\">=<\/span><span class=\"s\">\"checkbox\"<\/span>\n          <span class=\"na\">checked<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">isCompleted<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Checkbox is checked if the todo is completed<\/span>\n          <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">toggleComplete<\/span><span class=\"p\">(<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Toggle completion status on change<\/span>\n        <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"s2\">`ml-2 text-sm text-white <\/span><span class=\"p\">${<\/span>\n            <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">isCompleted<\/span> <span class=\"p\">?<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-500 line-through<\/span><span class=\"dl\">\"<\/span> <span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">text-gray-900<\/span><span class=\"dl\">\"<\/span> <span class=\"c1\">\/\/ Apply different styles if the todo is completed<\/span>\n          <span class=\"p\">}<\/span><span class=\"s2\">`<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">assignedTo<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border rounded-md text-xs py-[2px] px-1 mr-2  border-purple-700 uppercase bg-purple-400 text-black font-medium\"<\/span><span class=\"p\">&gt;<\/span>\n              <span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">assignedTo<\/span><span class=\"si\">}<\/span> <span class=\"si\">{<\/span><span class=\"cm\">\/* Display the assigned person's name if available *\/<\/span><span class=\"si\">}<\/span>\n            <span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"si\">}<\/span> <span class=\"si\">{<\/span><span class=\"cm\">\/* Display the todo text *\/<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n          <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">deleteTodo<\/span><span class=\"p\">(<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Delete the todo on button click<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-red-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">svg<\/span>\n            <span class=\"na\">xmlns<\/span><span class=\"p\">=<\/span><span class=\"s\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span>\n            <span class=\"na\">fill<\/span><span class=\"p\">=<\/span><span class=\"s\">\"none\"<\/span>\n            <span class=\"na\">viewBox<\/span><span class=\"p\">=<\/span><span class=\"s\">\"0 0 24 24\"<\/span>\n            <span class=\"na\">strokeWidth<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mf\">1.5<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">stroke<\/span><span class=\"p\">=<\/span><span class=\"s\">\"currentColor\"<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-5 h-5\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">path<\/span>\n              <span class=\"na\">strokeLinecap<\/span><span class=\"p\">=<\/span><span class=\"s\">\"round\"<\/span>\n              <span class=\"na\">strokeLinejoin<\/span><span class=\"p\">=<\/span><span class=\"s\">\"round\"<\/span>\n              <span class=\"na\">d<\/span><span class=\"p\">=<\/span><span class=\"s\">\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\"<\/span>\n            <span class=\"p\">\/&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">svg<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n          <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n            <span class=\"kd\">const<\/span> <span class=\"nx\">name<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">prompt<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Assign person to this task:<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n            <span class=\"nf\">assignPerson<\/span><span class=\"p\">(<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">,<\/span> <span class=\"nx\">name<\/span><span class=\"p\">);<\/span>\n          <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"ml-2 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nt\">svg<\/span>\n            <span class=\"na\">xmlns<\/span><span class=\"p\">=<\/span><span class=\"s\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span>\n            <span class=\"na\">fill<\/span><span class=\"p\">=<\/span><span class=\"s\">\"none\"<\/span>\n            <span class=\"na\">viewBox<\/span><span class=\"p\">=<\/span><span class=\"s\">\"0 0 24 24\"<\/span>\n            <span class=\"na\">strokeWidth<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"mf\">1.5<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">stroke<\/span><span class=\"p\">=<\/span><span class=\"s\">\"currentColor\"<\/span>\n            <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-5 h-5\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nt\">path<\/span>\n              <span class=\"na\">strokeLinecap<\/span><span class=\"p\">=<\/span><span class=\"s\">\"round\"<\/span>\n              <span class=\"na\">strokeLinejoin<\/span><span class=\"p\">=<\/span><span class=\"s\">\"round\"<\/span>\n              <span class=\"na\">d<\/span><span class=\"p\">=<\/span><span class=\"s\">\"M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z\"<\/span>\n            <span class=\"p\">\/&gt;<\/span>\n          <span class=\"p\"\/><span class=\"nt\">svg<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<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>\u062f\u0631 <code>TodoList.tsx<\/code> \u0641\u0627\u06cc\u0644\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u06cc\u06a9 \u062c\u0632\u0621 \u062a\u0627\u0628\u0639\u06cc React \u0631\u0627 \u0628\u0627 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <strong><code>TodoList<\/code><\/strong>.  \u0627\u06cc\u0646 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0646\u0645\u0627\u06cc\u0634 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u06a9\u0627\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><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\">TodoItem<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/TodoItem<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Importing the TodoItem component<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">nanoid<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">nanoid<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Importing the nanoid library for generating unique IDs<\/span>\n<span class=\"k\">import<\/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> <span class=\"c1\">\/\/ Importing the useState hook from React<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Todo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/types\/todo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ Importing the Todo type<\/span>\n\n<span class=\"c1\">\/\/ Defining the TodoList component as a functional component<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">TodoList<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n   <span class=\"c1\">\/\/ State to hold the list of todos<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">todos<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setTodos<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">useState<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Todo<\/span><span class=\"p\">[]<\/span><span class=\"o\">&gt;<\/span><span class=\"p\">([]);<\/span>\n  <span class=\"c1\">\/\/ State to hold the current input value<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"p\">[<\/span><span class=\"nx\">input<\/span><span class=\"p\">,<\/span> <span class=\"nx\">setInput<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">useState<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span>\n\n\n   <span class=\"c1\">\/\/ Function to add a new todo<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">addTodo<\/span> <span class=\"o\">=<\/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\">input<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">()<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">\"\"<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Check if the input is not empty<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"na\">newTodo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Todo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nf\">nanoid<\/span><span class=\"p\">(),<\/span> <span class=\"c1\">\/\/ Generate a unique ID for the new todo<\/span>\n        <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"nx\">input<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">(),<\/span> <span class=\"c1\">\/\/ Trim the input text<\/span>\n        <span class=\"na\">isCompleted<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ Set the initial completion status to false<\/span>\n      <span class=\"p\">};<\/span>\n      <span class=\"nf\">setTodos<\/span><span class=\"p\">([...<\/span><span class=\"nx\">todos<\/span><span class=\"p\">,<\/span> <span class=\"nx\">newTodo<\/span><span class=\"p\">]);<\/span> <span class=\"c1\">\/\/ Add the new todo to the list<\/span>\n      <span class=\"nf\">setInput<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"\"<\/span><span class=\"p\">);<\/span> <span class=\"c1\">\/\/ Clear the input field<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ Function to handle key press events<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">handleKeyPress<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">KeyboardEvent<\/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=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Check if the Enter key was pressed<\/span>\n      <span class=\"nf\">addTodo<\/span><span class=\"p\">();<\/span> <span class=\"c1\">\/\/ Add the todo<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"c1\">\/\/ Function to toggle the completion status of a todo<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">toggleComplete<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">id<\/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\">setTodos<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">?<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">todo<\/span><span class=\"p\">,<\/span> <span class=\"na\">isCompleted<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">isCompleted<\/span> <span class=\"p\">}<\/span> <span class=\"p\">:<\/span> <span class=\"nx\">todo<\/span>\n      <span class=\"p\">)<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n    <span class=\"c1\">\/\/ Function to delete a todo<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">deleteTodo<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">id<\/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\">setTodos<\/span><span class=\"p\">(<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">id<\/span><span class=\"p\">));<\/span>\n  <span class=\"p\">};<\/span>\n\n    <span class=\"c1\">\/\/ Function to assign a person to a todo<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">assignPerson<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">,<\/span> <span class=\"na\">person<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">|<\/span> <span class=\"kc\">null<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nf\">setTodos<\/span><span class=\"p\">(<\/span>\n      <span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span>\n        <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span>\n          <span class=\"p\">?<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">todo<\/span><span class=\"p\">,<\/span> <span class=\"na\">assignedTo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">person<\/span> <span class=\"p\">?<\/span> <span class=\"nx\">person<\/span> <span class=\"p\">:<\/span> <span class=\"kc\">undefined<\/span> <span class=\"p\">}<\/span>\n          <span class=\"p\">:<\/span> <span class=\"nx\">todo<\/span>\n      <span class=\"p\">)<\/span>\n    <span class=\"p\">);<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex mb-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">input<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border rounded-md p-2 flex-1 mr-2\"<\/span>\n          <span class=\"na\">value<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">input<\/span><span class=\"si\">}<\/span>\n          <span class=\"na\">onChange<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nf\">setInput<\/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><span class=\"si\">}<\/span>\n          <span class=\"na\">onKeyDown<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">handleKeyPress<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Add this to handle the Enter key press<\/span>\n        <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">button<\/span>\n          <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bg-blue-500 rounded-md p-2 text-white\"<\/span>\n          <span class=\"na\">onClick<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">addTodo<\/span><span class=\"si\">}<\/span><span class=\"p\">&gt;<\/span>\n          Add Todo\n        <span class=\"p\"\/><span class=\"nt\">button<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"si\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">&gt;<\/span> <span class=\"mi\">0<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span> <span class=\"c1\">\/\/ Check if there are any todos<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border rounded-lg\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"si\">{<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">TodoItem<\/span>\n              <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Unique key for each todo item<\/span>\n              <span class=\"na\">todo<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">todo<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Pass the todo object as a prop<\/span>\n              <span class=\"na\">toggleComplete<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">toggleComplete<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Pass the toggleComplete function as a prop<\/span>\n              <span class=\"na\">deleteTodo<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">deleteTodo<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Pass the deleteTodo function as a prop<\/span>\n              <span class=\"na\">assignPerson<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">assignPerson<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Pass the assignPerson function as a prop<\/span>\n              <span class=\"na\">hasBorder<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">index<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nx\">length<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">1<\/span><span class=\"si\">}<\/span> <span class=\"c1\">\/\/ Conditionally add a border to all but the last item<\/span>\n            <span class=\"p\">\/&gt;<\/span>\n          <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n        <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n     <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<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>\u0628\u0639\u062f\u060c \u0628\u0647 <code>\/[root]\/src\/page.tsx<\/code> \u0641\u0627\u06cc\u0644\u060c \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u06a9\u0647 \u0648\u0627\u0631\u062f \u0645\u06cc \u06a9\u0646\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>TodoList<\/code> \u0648 <code>Header<\/code> \u0627\u062c\u0632\u0627\u0621 \u0648 \u06cc\u06a9 \u062c\u0632\u0621 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0628\u0647 \u0646\u0627\u0645 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u062f <code>Home<\/code>.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"nx\">Header<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/components\/Header<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TodoList<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">.\/components\/TodoList<\/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\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border rounded-md max-w-2xl mx-auto p-4 mt-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-2xl text-white font-bold mb-4\"<\/span><span class=\"p\">&gt;<\/span>\n          Create a to-do list\n        <span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">TodoList<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&gt;<\/span>\n  <span class=\"p\">);<\/span>\n<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>\u062f\u0631 \u0645\u0631\u062d\u0644\u0647 \u0628\u0639\u062f\u060c \u06a9\u062f CSS \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f <code>globals.css<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u06a9\u062f CSS \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"k\">@tailwind<\/span> <span class=\"n\">base<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">components<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">@tailwind<\/span> <span class=\"n\">utilities<\/span><span class=\"p\">;<\/span>\n\n<span class=\"nt\">body<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">100vh<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"nb\">rgb<\/span><span class=\"p\">(<\/span><span class=\"m\">16<\/span><span class=\"p\">,<\/span> <span class=\"m\">23<\/span><span class=\"p\">,<\/span> <span class=\"m\">42<\/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 \u0646\u0647\u0627\u06cc\u062a \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f <code>npm run dev<\/code> \u062f\u0631 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0648 \u0633\u067e\u0633 \u0628\u0647 http:\/\/localhost:3000\/ \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0627\u06cc\u062f \u0646\u0645\u0627\u06cc\u0647 \u0645\u0648\u0644\u062f To-Do List \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwmd8j3brrtiqackalul1.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"403\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AF%D8%BA%D8%A7%D9%85_%D8%B9%D9%85%D9%84%DA%A9%D8%B1%D8%AF%D9%87%D8%A7%DB%8C_%D9%87%D9%88%D8%B4_%D9%85%D8%B5%D9%86%D9%88%D8%B9%DB%8C_%D8%A8%D9%87_%DA%98%D9%86%D8%B1%D8%A7%D8%AA%D9%88%D8%B1_%D9%81%D9%87%D8%B1%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1_%D8%A8%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_CopilotKit\"><\/span>\n<p>  <strong>\u0627\u062f\u063a\u0627\u0645 \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0628\u0647 \u0698\u0646\u0631\u0627\u062a\u0648\u0631 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CopilotKit<\/strong><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 \u06cc\u06a9 \u06a9\u0648\u067e\u0627\u06cc\u0644\u0648\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0627 \u0628\u0647 \u0698\u0646\u0631\u0627\u062a\u0648\u0631 To-Do List \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CopilotKit \u0644\u06cc\u0633\u062a \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>CopilotKit \u0647\u0631 \u062f\u0648 \u0628\u0633\u062a\u0647 frontend \u0648 backend \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.  \u0622\u0646\u0647\u0627 \u0634\u0645\u0627 \u0631\u0627 \u0642\u0627\u062f\u0631 \u0645\u06cc \u0633\u0627\u0632\u0646\u062f \u062a\u0627 \u0628\u0647 \u062d\u0627\u0644\u062a \u0647\u0627\u06cc React \u0645\u062a\u0635\u0644 \u0634\u0648\u06cc\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u062f\u0631 backend \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0639\u0648\u0627\u0645\u0644 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc CopilotKit React \u0631\u0627 \u0628\u0647 \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u0648\u0644\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_CopilotKit_%D8%A8%D9%87_Frontend_Generator_List_To-Do\"><\/span>\n<p>  <strong>\u0627\u0641\u0632\u0648\u062f\u0646 CopilotKit \u0628\u0647 Frontend Generator List To-Do<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0645\u0648\u0644\u062f To-Do List \u0628\u0627 CopilotKit frontend \u0628\u0631\u0627\u06cc \u062a\u0633\u0647\u06cc\u0644 \u062a\u0648\u0644\u06cc\u062f \u0644\u06cc\u0633\u062a \u0647\u0627 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u0627\u0632 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>useCopilotReadable<\/code>\u060c \u0648 <code>useCopilotAction<\/code>\u060c \u0642\u0644\u0627\u0628 \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u062f\u0631 \u0628\u0627\u0644\u0627\u06cc <code>\/[root]\/src\/app\/components\/TodoList.tsx<\/code> \u0641\u0627\u06cc\u0644.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">useCopilotAction<\/span><span class=\"p\">,<\/span> <span class=\"nx\">useCopilotReadable<\/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<\/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\u0648\u0646 <code>TodoList<\/code> \u062a\u0627\u0628\u0639\u060c \u0632\u06cc\u0631 \u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc \u062d\u0627\u0644\u062a\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useCopilotReadable<\/code> \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0686\u062a \u0631\u0628\u0627\u062a \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u0642\u0644\u0627\u0628 \u06a9\u0646\u06cc\u062f.  \u0642\u0644\u0627\u0628 \u0628\u0627\u0639\u062b \u0645\u06cc\u200c\u0634\u0648\u062f \u0641\u0647\u0631\u0633\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0647\u0627 \u0628\u0631\u0627\u06cc \u062e\u0644\u0628\u0627\u0646 \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0628\u0627\u0634\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"nf\">useCopilotReadable<\/span><span class=\"p\">({<\/span>\n    <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">The user's todo list.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">value<\/span><span class=\"p\">:<\/span> <span class=\"nx\">todos<\/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 \u0632\u06cc\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u06a9\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useCopilotAction<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u0639\u0645\u0644 \u0628\u0647 \u0646\u0627\u0645 <code>updateTodoList<\/code> \u06a9\u0647 \u062a\u0648\u0644\u06cc\u062f \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0639\u0645\u0644 \u06cc\u06a9 \u067e\u0627\u0631\u0627\u0645\u062a\u0631 \u0628\u0647 \u0646\u0627\u0645 \u0622\u06cc\u062a\u0645 \u0647\u0627 \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u06a9\u0647 \u062a\u0648\u0644\u06cc\u062f \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0645\u06a9\u0627\u0646 \u067e\u0630\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u06cc\u06a9 \u0627\u0639\u0644\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u062f\u0627\u062e\u0644 \u062a\u0627\u0628\u0639 \u0647\u0646\u062f\u0644\u0631\u060c <code>todos<\/code> \u0648\u0636\u0639\u06cc\u062a \u0628\u0627 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u062f\u0647\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/ Define the \"updateTodoList\" action using the useCopilotAction function<\/span>\n  <span class=\"nf\">useCopilotAction<\/span><span class=\"p\">({<\/span>\n    <span class=\"c1\">\/\/ Name of the action<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">updateTodoList<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Description of what the action does<\/span>\n    <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Update the users todo list<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Define the parameters that the action accepts<\/span>\n    <span class=\"na\">parameters<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ The name of the parameter<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">items<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"c1\">\/\/ The type of the parameter, an array of objects<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">object[]<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"c1\">\/\/ Description of the parameter<\/span>\n        <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">The new and updated todo list items.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"c1\">\/\/ Define the attributes of each object in the items array<\/span>\n        <span class=\"na\">attributes<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n          <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ The id of the todo item<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">description<\/span><span class=\"p\">:<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">The id of the todo item. When creating a new todo item, just make up a new id.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ The text of the todo item<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">text<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">The text of the todo item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ The completion status of the todo item<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">isCompleted<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">boolean<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">The completion status of the todo item.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n          <span class=\"p\">{<\/span>\n            <span class=\"c1\">\/\/ The person assigned to the todo item<\/span>\n            <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">assignedTo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"na\">description<\/span><span class=\"p\">:<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">The person assigned to the todo item. If you don't know, assign it to 'YOU'.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n            <span class=\"c1\">\/\/ This attribute is required<\/span>\n            <span class=\"na\">required<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n          <span class=\"p\">},<\/span>\n        <span class=\"p\">],<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">],<\/span>\n\n    <span class=\"c1\">\/\/ Define the handler function that executes when the action is invoked<\/span>\n    <span class=\"na\">handler<\/span><span class=\"p\">:<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">items<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Log the items to the console for debugging purposes<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">items<\/span><span class=\"p\">);<\/span>\n\n      <span class=\"c1\">\/\/ Create a copy of the existing todos array<\/span>\n      <span class=\"kd\">const<\/span> <span class=\"nx\">newTodos<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[...<\/span><span class=\"nx\">todos<\/span><span class=\"p\">];<\/span>\n\n      <span class=\"c1\">\/\/ Iterate over each item in the items array<\/span>\n      <span class=\"k\">for <\/span><span class=\"p\">(<\/span><span class=\"kd\">const<\/span> <span class=\"nx\">item<\/span> <span class=\"k\">of<\/span> <span class=\"nx\">items<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ Find the index of the existing todo item with the same id<\/span>\n        <span class=\"kd\">const<\/span> <span class=\"nx\">existingItemIndex<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">newTodos<\/span><span class=\"p\">.<\/span><span class=\"nf\">findIndex<\/span><span class=\"p\">(<\/span>\n          <span class=\"p\">(<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span>\n        <span class=\"p\">);<\/span>\n\n        <span class=\"c1\">\/\/ If an existing item is found, update it<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">existingItemIndex<\/span> <span class=\"o\">!==<\/span> <span class=\"o\">-<\/span><span class=\"mi\">1<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">newTodos<\/span><span class=\"p\">[<\/span><span class=\"nx\">existingItemIndex<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">item<\/span><span class=\"p\">;<\/span>\n        <span class=\"p\">}<\/span>\n        <span class=\"c1\">\/\/ If no existing item is found, add the new item to the newTodos array<\/span>\n        <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n          <span class=\"nx\">newTodos<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">);<\/span>\n        <span class=\"p\">}<\/span>\n      <span class=\"p\">}<\/span>\n\n      <span class=\"c1\">\/\/ Update the state with the new todos array<\/span>\n      <span class=\"nf\">setTodos<\/span><span class=\"p\">(<\/span><span class=\"nx\">newTodos<\/span><span class=\"p\">);<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"c1\">\/\/ Provide feedback or a message while the action is processing<\/span>\n    <span class=\"na\">render<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Updating the todo list...<\/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>\u062f\u0631 \u0632\u06cc\u0631 \u06a9\u062f \u0628\u0627\u0644\u0627\u060c \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u0632 \u06a9\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f <code>useCopilotAction<\/code> \u0642\u0644\u0627\u0628 \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06cc\u06a9 \u0639\u0645\u0644 \u0628\u0647 \u0646\u0627\u0645 <code>deleteTodo<\/code> \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0645\u0648\u0631\u062f \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0627\u06a9\u0634\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u06cc \u0628\u0647 \u0646\u0627\u0645 id \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06cc\u06a9 \u0645\u0648\u0631\u062f todo \u0631\u0627 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f \u0648 \u062d\u0627\u0648\u06cc \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u06a9\u0646\u062a\u0631\u0644 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u062a\u0645 todo \u062d\u0630\u0641 \u0634\u062f\u0647 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647\u060c \u0648\u0636\u0639\u06cc\u062a todos \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/ Define the \"deleteTodo\" action using the useCopilotAction function<\/span>\n  <span class=\"nf\">useCopilotAction<\/span><span class=\"p\">({<\/span>\n    <span class=\"c1\">\/\/ Name of the action<\/span>\n    <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">deleteTodo<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Description of what the action does<\/span>\n    <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Delete a todo item<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n    <span class=\"c1\">\/\/ Define the parameters that the action accepts<\/span>\n    <span class=\"na\">parameters<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n      <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ The name of the parameter<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">id<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"c1\">\/\/ The type of the parameter, a string<\/span>\n        <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">string<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n\n        <span class=\"c1\">\/\/ Description of the parameter<\/span>\n        <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">The id of the todo item to delete.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n      <span class=\"p\">},<\/span>\n    <span class=\"p\">],<\/span>\n\n    <span class=\"c1\">\/\/ Define the handler function that executes when the action is invoked<\/span>\n    <span class=\"na\">handler<\/span><span class=\"p\">:<\/span> <span class=\"p\">({<\/span> <span class=\"nx\">id<\/span> <span class=\"p\">})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"c1\">\/\/ Update the state by filtering out the todo item with the given id<\/span>\n      <span class=\"nf\">setTodos<\/span><span class=\"p\">(<\/span><span class=\"nx\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">((<\/span><span class=\"nx\">todo<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">todo<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">id<\/span><span class=\"p\">));<\/span>\n    <span class=\"p\">},<\/span>\n\n    <span class=\"c1\">\/\/ Provide feedback or a message while the action is processing<\/span>\n    <span class=\"na\">render<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Deleting a todo item...<\/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>\u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0628\u0647 <code>\/[root]\/src\/app\/page.tsx<\/code> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f \u0632\u06cc\u0631\u060c \u0628\u0633\u062a\u0647\u200c\u0647\u0627 \u0648 \u0633\u0628\u06a9\u200c\u0647\u0627\u06cc \u0638\u0627\u0647\u0631\u06cc CopilotKit \u0631\u0627 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><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=\"p\">{<\/span> <span class=\"nx\">CopilotPopup<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/react-ui<\/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<\/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>\u0633\u067e\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f <code>CopilotKit<\/code> \u0628\u0631\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0646 <code>CopilotPopup<\/code> \u0648 <code>TodoList<\/code> \u0627\u062c\u0632\u0627\u0621\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0627\u06cc\u0646 <code>CopilotKit<\/code> \u0645\u0624\u0644\u0641\u0647 URL \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc CopilotKit \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f (<code>\/api\/copilotkit\/<\/code>) \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 <code>CopilotPopup<\/code> \u0631\u0628\u0627\u062a \u0686\u062a \u062f\u0631\u0648\u0646\u200c\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0641\u0647\u0631\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0648\u0631 \u0628\u062f\u0647\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">Home<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n    <span class=\"p\">&lt;&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Header<\/span> <span class=\"p\">\/&gt;<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border rounded-md max-w-2xl mx-auto p-4 mt-4\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-2xl text-white font-bold mb-4\"<\/span><span class=\"p\">&gt;<\/span>\n          Create a to-do list\n        <span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">CopilotKit<\/span> <span class=\"na\">runtimeUrl<\/span><span class=\"p\">=<\/span><span class=\"s\">\"\/api\/copilotkit\"<\/span><span class=\"p\">&gt;<\/span>\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">TodoList<\/span> <span class=\"p\">\/&gt;<\/span>\n\n          <span class=\"p\">&lt;<\/span><span class=\"nc\">CopilotPopup<\/span>\n            <span class=\"na\">instructions<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">Help the user manage a todo list. If the user provides a high level goal, <\/span><span class=\"dl\">\"<\/span> <span class=\"o\">+<\/span>\n              <span class=\"dl\">\"<\/span><span class=\"s2\">break it down into a few specific tasks and add them to the list<\/span><span class=\"dl\">\"<\/span>\n            <span class=\"si\">}<\/span>\n            <span class=\"na\">defaultOpen<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"kc\">true<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">labels<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n              <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Todo List Copilot<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n              <span class=\"na\">initial<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Hi you! \ud83d\udc4b I can help you manage your todo list.<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n            <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n            <span class=\"na\">clickOutsideToClose<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"kc\">false<\/span><span class=\"si\">}<\/span>\n          <span class=\"p\">\/&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">CopilotKit<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">&gt;<\/span>\n  <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>\u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 http:\/\/localhost:3000 \u0628\u0631\u0648\u06cc\u062f.  \u0628\u0627\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f \u06a9\u0647 \u0686\u062a \u0631\u0628\u0627\u062a \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f\u06a9\u0646\u0646\u062f\u0647 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0627\u062f\u063a\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fryeqnymp5lm397thpn5f.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"404\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_CopilotKit_Backend_%D8%A8%D9%87_%D9%88%D8%A8%D9%84%D8%A7%DA%AF\"><\/span>\n<p>  <strong>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 CopilotKit Backend \u0628\u0647 \u0648\u0628\u0644\u0627\u06af<\/strong><br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0645\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u062f\u063a\u0627\u0645 \u0645\u0648\u0644\u062f \u0644\u06cc\u0633\u062a\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0628\u0627\u0637\u0646 CopilotKit \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0631\u0627 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u062a\u0627\u0628\u0639 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 LLM \u0645\u0627\u0646\u0646\u062f GPT \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0631\u0627\u0647\u0646\u0645\u0627\u06cc\u06cc \u0645\u06cc\u200c\u06a9\u0646\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>.env.local<\/code> \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u06cc\u0634\u0647  \u0633\u067e\u0633 \u0645\u062a\u063a\u06cc\u0631 \u0645\u062d\u06cc\u0637\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0641\u0627\u06cc\u0644\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>ChatGPT<\/code>  \u06a9\u0644\u06cc\u062f\u0647\u0627\u06cc API<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jsx\"><code><span class=\"nx\">OPENAI_API_KEY<\/span><span class=\"o\">=<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">Your ChatGPT API key\u201d\n<\/span><\/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\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0644\u06cc\u062f ChatGPT API\u060c \u0628\u0647 https:\/\/platform.openai.com\/api-keys \u0628\u0631\u0648\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx0bibiuouk5wvrxcuy2g.jpeg\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"405\" title=\"\"><\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0628\u0647 <code>\/[root]\/src\/app<\/code> \u0648 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>api<\/code>.  \u062f\u0631 <code>api<\/code> \u067e\u0648\u0634\u0647\u060c \u067e\u0648\u0634\u0647 \u0627\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>copilotkit<\/code>.<\/p>\n<p>\u062f\u0631 <code>copilotkit<\/code> \u067e\u0648\u0634\u0647\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>route.ts<\/code> \u06a9\u0647 \u062d\u0627\u0648\u06cc \u06a9\u062f\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u06cc POST \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/ Import the necessary modules from the \"@copilotkit\/backend\" package<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">CopilotRuntime<\/span><span class=\"p\">,<\/span> <span class=\"nx\">OpenAIAdapter<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@copilotkit\/backend<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n\n<span class=\"c1\">\/\/ Define an asynchronous function to handle POST requests<\/span>\n<span class=\"k\">export<\/span> <span class=\"k\">async<\/span> <span class=\"kd\">function<\/span> <span class=\"nf\">POST<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Request<\/span><span class=\"p\">):<\/span> <span class=\"nb\">Promise<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">Response<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"c1\">\/\/ Create a new instance of CopilotRuntime<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">copilotKit<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">CopilotRuntime<\/span><span class=\"p\">({});<\/span>\n\n  <span class=\"c1\">\/\/ Use the copilotKit to generate a response using the OpenAIAdapter<\/span>\n  <span class=\"c1\">\/\/ Pass the incoming request (req) and a new instance of OpenAIAdapter to the response method<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">copilotKit<\/span><span class=\"p\">.<\/span><span class=\"nf\">response<\/span><span class=\"p\">(<\/span><span class=\"nx\">req<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">OpenAIAdapter<\/span><span class=\"p\">());<\/span>\n<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<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_%D9%84%DB%8C%D8%B3%D8%AA_Todo\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0627\u06cc\u062c\u0627\u062f \u0644\u06cc\u0633\u062a Todo<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0686\u062a \u0631\u0628\u0627\u062a \u062f\u0631\u0648\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u0627\u062f\u063a\u0627\u0645 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u0628\u0647 \u0622\u0646 \u0627\u0639\u0644\u0627\u0646 \u06a9\u0646\u06cc\u062f: \u00ab\u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u0645 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u06cc\u06a9 \u062a\u0645\u0631\u06cc\u0646 \u06a9\u0627\u0645\u0644 \u0628\u062f\u0646 \u0628\u0647 \u0628\u0627\u0634\u06af\u0627\u0647 \u0628\u0631\u0648\u0645.  \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0645\u0631\u06cc\u0646\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0645 \u0628\u0647 \u0644\u06cc\u0633\u062a \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645<\/p>\n<p>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u067e\u0633 \u0627\u0632 \u0627\u062a\u0645\u0627\u0645 \u06a9\u0627\u0631\u060c \u0628\u0627\u06cc\u062f \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u0645\u0631\u06cc\u0646\u06cc \u062a\u0645\u0627\u0645 \u0628\u062f\u0646 \u0631\u0627 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f\u060c \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F48n9ssymxhm5i2yv0pdf.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"402\" title=\"\"><\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062f\u0627\u062f\u0646 \u0627\u0639\u0644\u0627\u0646 \u0628\u0647 \u0686\u062a\u200c\u0628\u0627\u062a\u060c \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0634\u062e\u0635\u06cc \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f\u060c \u0645\u0627\u0646\u0646\u062f \u00ab\u062a\u062e\u0635\u06cc\u0635 \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0628\u0647 Doe\u00bb.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6r1f816c1o8da5z0t1kk.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"406\" title=\"\"><\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062f\u0627\u062f\u0646 \u0627\u0639\u0644\u0627\u0646 \u0628\u0647 \u0686\u062a\u200c\u0628\u0627\u062a \u0645\u0627\u0646\u0646\u062f \u00ab\u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644\u200c\u0634\u062f\u0647 \u0639\u0644\u0627\u0645\u062a\u200c\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f\u00bb\u060c \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u062a\u06a9\u0645\u06cc\u0644\u200c\u0634\u062f\u0647 \u0639\u0644\u0627\u0645\u062a\u200c\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqx2wpg6ee7hswjl68t4q.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"405\" title=\"\"><\/p>\n<p>\u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062f\u0627\u062f\u0646 \u0627\u0639\u0644\u0627\u0646 \u0628\u0647 \u0686\u062a\u200c\u0628\u0627\u062a \u0645\u0627\u0646\u0646\u062f \u00ab\u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f\u00bb\u060c \u0641\u0647\u0631\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fksoj6mtlxt8ag8opsocs.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"405\" 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.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>CopilotKit \u0627\u0628\u0632\u0627\u0631\u06cc \u0628\u0627\u0648\u0631\u0646\u06a9\u0631\u062f\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0638\u0631\u0641 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0628\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062e\u0648\u062f AI Copilot \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0686\u0647 \u0628\u0647 \u0686\u062a \u0631\u0628\u0627\u062a \u0647\u0627 \u0648 \u062f\u0633\u062a\u06cc\u0627\u0631\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f \u0628\u0627\u0634\u06cc\u062f \u0648 \u0686\u0647 \u0628\u0647 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0648\u0638\u0627\u06cc\u0641 \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c CopilotKit \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\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 \u0627\u0628\u0632\u0627\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631\u06cc \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>\u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627 \u062f\u0631 GitHub \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f: https:\/\/github.com\/TheGreatBonnie\/AIpoweredToDoListGenerator<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>TL; DR \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u06a9\u0644\u0627\u0633\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0633\u062a. \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0627\u0645\u0631\u0648\u0632\u060c \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0627 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0648 \u062f\u0627\u0634\u062a\u0646 \u0686\u0646\u062f \u067e\u0631\u0648\u0698\u0647 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 \u062e\u0648\u062f \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u0627\u0633\u062a. \u0627\u0645\u0631\u0648\u0632\u060c \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a\u0646 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0627 \u06a9\u0645\u06a9 \u062e\u0644\u0628\u0627\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062a\u0639\u0628\u06cc\u0647 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062c\u0627\u062f\u0648\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0634\u0631\u062d \u062e\u0648\u0627\u0647\u0645 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":64221,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media.dev.to\/cdn-cgi\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj5ha1ty5cu203to1ma04.gif","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-64220","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\/64220","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=64220"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/64220\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/64221"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=64220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=64220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=64220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}