Transcription
Курсор - это текстовый редактор для кода со встроенными AI фишками. И начинающие могут спросить: "А зачем нужна отдельная программа, если тот же самый генеративный интеллект, в частности чат GPT, может спокойно выдавать код?"
Действительно, как видите, он выдаёт прекрасный код, но чтобы его запустить, нужно пойти опять же куда-нибудь в текстовый редактор, вставить его, там поменять и так далее. И представьте, если у вас будет проект, который содержит, например, 1.000 файлов, такая поддержка будет неудобной.
Поэтому существуют такие вещи, как курсор, где хранится всё в одном месте. Искусственный интеллект, который встроен в эту программу, он всё прекрасно понимает про ваш проект, и с этим намного проще работать.
Поэтому в рамках данного видео мы с вами разберёмся с основами курсора, что здесь есть, как настраиваться, и дальше перейдём к продвинутым темам. Мы затронем большое количество различных практик, включая MCP, различные правила, беспрактисы, где брать правила, как настраивать проекты. И даже в рамках этого видео создадим порядка трёх приложений, которые будут там разные, и вы сможете посмотреть, как в разных ситуациях пользоваться курсором.
И для начала давайте продемонстрирую, как курсор работает в своей основе. Сейчас вы видите абсолютно пустой редактор. Здесь нет никаких файлов. И здесь справа вверху вы можете увидеть такую кнопочку, как toggle AI Pain. Здесь как раз-таки находится окно взаимодействие с искусственным интеллектом. И мы можем ему говорить, что нужно делать. Например, я могу написать ему: "Напиши мне игру тетрис на HTML, CSS, JavaScript". Я просто нажимаю Send. И давайте посмотрим, что будет делать искусственный интеллект на абсолютно пустом проекте.
Он начинает декомпозировать данную задачу на более мелкие задачи. Как видите, он создал нам HTML. Дальше он пытается сгенерировать CSS. После этого он переходит на генерацию Script JS, который будет содержать в себе функционал самой игры. Отписывает, что он в итоге сделал. Обычными человеческими словами, в моём случае даже на русском языке. В идеале нужно постоянно это читать, да? То есть он создал игровую механику, а есть управление, интерфейс, а прогрессия, ну и как запустить?
Смотрите, для того, чтобы применить все эти изменения, мы можем нажать кнопочку keep all. Мы можем посмотреть на код. Как видите, я не написал ни строчки кода, и при этом у меня уже есть там целая кодовая база, а, которую мы можем протестировать, да? Давайте запустим её. Я перехожу в index HTML и нажимаю кнопку Open in Default Browser. И мы видим здесь полноценную игру. Обратите внимание, что я не написал опять же ни строчки кода. Я нажимаю старт. И по сути я получаю рабочий тетрис, не зная программирования. Представьте, как много всего можно реализовать теперь с таким подходом.
Как вы понимаете, вариаций у такого подхода достаточно много, и с этим мы сейчас будем разбираться. Если вы до этого работали с таким текстовым редактором, как VS-код, то вам будет очень знаком и понятен интерфейс курсора, потому что здесь есть все файлы в проекте, есть глобальный поиск, есть вкладка для работы с гитом, то есть здесь мы можем инициализировать репозиторий, делать комиты, полреквесты, работать с командой других разработчиков, паблишить там на GitHub и так далее. Есть вкладка работы с агентами. И что более важно, на мой взгляд, для начинающих, это то, что здесь есть поле Extensions, то есть это расширение дополнительные, которые также присутствуют и в ВС-коде. То, что у вас работало в той программе, будет работать и здесь, например, да, для того, чтобы также запускать HTML в браузере, у меня скачано расширение Open in Browser. И здесь вы можете смотреть большое количество расширений. Например, если вы хотите работать с языком программирования Go, вы можете просто написать здесь GO, и присутствует расширение, поддерживающее данный язык. То есть здесь вы можете настраивать полностью редактор под себя.
Теперь давайте перейдём к созданию нового проекта. Для этого я удалю все файлы. И в данном случае мы поработаем с проектом на React. Для того, чтобы лучше курсор работал с проектами, которые мы генерируем с помощью CLI, лучше CLI генерировать самостоятельно. Для этого я здесь напишу npm create with latest. Теперь мы хотим поработать с этим проектом. И в первую очередь для того, чтобы опять же курсор понимал, что находится в проекте, лучше его проиндексировать. Для этого справа присутствуют настройки. Далее мы переходим в настройку indexing and docs base indexing. Он будет индексировать все существующие файлы, синхронизировать его с собой. Ну и теперь ему будет более понятно, что вообще происходит в проекте.
Далее мы можем обратиться к агенту для того, чтобы он написал первый код. И здесь мы словами описываем задачу, которую нам необходимо сделать. Предположим, я создам такой запрос. То есть из этого шаблонного приложения я хочу создать туду приложение, где каждый элемент будет иметь там свойство title, completed и ID. Ну и нужно добавить возможность добавлять новые элементы и фильтровать их. После этого я беру и отправляю это в агента. Это первое взаимодействие с искусственным интеллектом, которое доступно в курсор.
Очень важное правило при работе с такими агентами заключается в том, чтобы смотреть все дифы, то есть изменения, которые он вносит в файлы, и читать комментарии. Есть вот концепция вайп-кодинга, а есть концепция пкодинга. Вай-кодинг - это когда ты просто полностью делегируешь всё для искусственного интеллекта. А deep кодинг - это когда ты усиливаешь свои навыки программиста с помощью искусственного интеллекта. Давайте почитаем див, который он сделал. Добавил функциональность, добавил, э, интерфейс, как мы и просили, дизайн. Ну и, в принципе, говорит, что всё работает. Мы можем посмотреть на изменения, нажав кнопочку review Changes. Ну и видим действительно, что вот у нас интерфейс есть, какие-то элементы добавил, функционалный React, элементы интерфейса, CSS. В данном случае можем нажать Keпол. Ну и давайте запустим проект.
Итак, мы получаем первое туду приложение. И выглядит оно достаточно круто. Допустим, мы можем отмечать выполненными элементами, можем их фильтровать. Отлично. Ну-ка, давайте удалим какой-нибудь элемент. Супер. И добавим новую задачу, например, тест. Нажимаю добавить. Всё работает. И это был первый способ взаимодействия с курсором, который позволяет таким образом создавать код.
Теперь давайте разберём следующую задачу. И, допустим, я хочу, чтобы у каждого элемента-ду помимо этих полей было ещё отображение даты. И на этом примере я хочу показать, как работает там другой подход при написании кода через автоe. Значит, я просто перехожу в код и дальше начинаю писать. date. Как видите, есть авто, то есть он предлагает, да, как можно продолжить код, но в данном случае мне это не подходит, поэтому я говорю, что это должно быть date. Теперь, так как мы изменили интерфейс, есть проблемы, поэтому я перехожу сюда. Видите, я пока ещё ничего не написал, но он уже предлагает, что можно сделать. Я просто нажимаю Tab, и мне это более чем подходит. Дальше я нажимаю Tab, добавляя все элементы в модели. И смотрите, что интересное дальше получается. Появляется кнопка Tab to next move. Я нажимаю Tab, и он переходит в то место, где необходимо добавить код. То есть он понимает, в принципе, что я хочу сделать дальше. Я нажимаю Tab и сохраняю. Опять же, я понимаю, что этого будет недостаточно, потому что мы сейчас изменили функционал, но не изменили никак шаблон. Для этого нам необходимо найти элемент в шаблоне. Вот он здесь находится, да? И давайте здесь я поставлю Enter. И как видите, он сразу же нам предлагает сделать то, что я и хочу. Нажимаю сохранить. У нас есть название класса. Я его копирую. И давайте куда-нибудь вниз его занесём. Как видели, он тоже нам предложил стилизацию для него. Теперь, если посмотреть в проект, то вот она, получается, у нас дата. То есть в данном случае курсор, он также работает, как условный ваш напарник. При написании кода он, в принципе, может понимать, что вы хотите написать.
Хочу показать следующий способ взаимодействия с курсором. И, предположим, я хочу взять и улучшить отображение этой кнопки. Я просто выделяю её в коде. И дальше я нажимаю кнопочку Quick Edit. Далее я словами описываю, что я хочу здесь делать. Допустим, улучши UI этой кнопки. Нажимаю send. И далее начинает работать искусственный интеллект. Он нам предлагает сразу же изменения. То есть он поменял иконочку на SВG. Я, допустим, нажимаю окей. О'кей. Сохраняю код. И на самом деле есть определённые изменения. Так как я не дал чёткой характеристики того, что нужно изменить, то он сделал это по своему разумению. Разумеется, он не понимает, как это выглядит. Но тем не менее у нас, видите, есть и tйтle. Она изменилась и по анимации, и по самой иконке. Поэтому я считаю, что задача была выполнена. И это был другой способ, когда мы можем точечно, да, обращаться к коду и менять её в зависимости от того, как нам нужно.
Более того, есть ещё одна классная фишка. Вот, допустим, я не знаю, что такое SG, что вообще делает этот код. Я могу нажать другую кнопку, э, чат, и спросить. Здесь очень важно, смотрите, по умолчанию у нас стоит мод при взаимодействии с Иишкой - это агент, но мы можем его поменять на план или ask. в данном случае на ask, потому что я хочу выяснить, а что же это такое, и спросить, что делает этот код. И он показывает, что, о'кей, смотри, это SВG иконка, есть атрибуты, есть красный круг, ну, и так далее, и так далее. То есть мы прямо по ход по коду можем ориентироваться и спрашивать какие-либо элементы.
И, безусловно, мы также можем продолжать работать с агентом, но здесь есть тоже определённое правило. Вот смотрите, здесь мы видим в моём случае 20%. Это означает, что 20% контекста сейчас заполнено. И в случае, если это будет там 100%, то тогда искусственный интеллект, он может делать определённые ошибки. То есть хорошей практикой считается, если а мы работаем с новой задачей, мы просто создаём новый чат таким вот образом. И дальше мы можем помимо того, что создавать новый контекст, можем указывать ещё контекст файла и кода, в котором нужно работать. Например, я хочу сейчас добавить новый функционал в данное приложение, скажем, удаление всех элементов. Пусть будет запрос таким. И дальше я могу указать контекст, в котором всё это работает. Я же понимаю, что это будет находиться в контексте aptsx и app ccss, да? То есть aptsx - это функционал, CSS - это отображение. И тем самым мы обрезаем ему количество файлов, которые ему необходимо смотреть, и он тем самым с большей вероятностью выполнит нашу задачу правильно. Мы можем посмотреть, что он нам написал. То есть добавлен новый функционал, кнопка "Очистить всё". Стилизация кнопки. Можем посмотреть на изменения. Всё, супер. Нажимаю Пол. И как видите, да, есть кнопка "Очистить всё". Я нажимаю её и задач больше нет. То есть это прекрасно сработало. В качестве контекста мы также можем всё это указывать через собаку, например, там файл index CSS или другие файлы. То есть с этим вы можете вручную управлять. И опять же, чем более точечно вы указываете, где нужно смотреть и что нужно менять, тем больше и лучше будет ваш результат.
На этом этапе давайте поговорим про базовую настройку курсора, про его возможности. Для этого я перейду в курсор Settings и в первую очередь посмотрим на General. Здесь я рекомендую обратить внимание на поле privacy. И как видите, в privacй у меня стоит privacy mode. Вы можете поставить, например, там share data, если вы хотите, чтобы на вашем коде учились другие лмки. Я и не хочу, поэтому ставлю Privaиy mode.
Далее переходим в чат. Здесь вы можете также отдельные настройки посмотреть, но я рекомендую также убрать галочку с поля include full folder контекст. Если она стоит, мы позволяем курсору самостоятельно сканировать вообще всё, что находится в папке. И, как вы понимаете, это контекст, а это значит деньги. На этом очень круто можно разориться, поэтому лучше точечно самостоятельно указывать контекст, которым нужно работать, и файлу. И здесь лучше эту галочку убирать.
Следующая настройка, она называется аutmode Run. В моём случае здесь стоит поле ask every time. То есть в случае, если курсор захочет, например, провзаимодействовать с консолью или с другим внешним элементом, например, MCP-сервером, то он будет меня спрашивать. Конечно же, вы можете поставить и другую настройку в зависимости от того, там как предпочитаете. Но если вы начинающий, если курсор сделает что-то без вашего ведома, может быть ошибка. Учтите это.
Следующее поле, которое очень важное, называется models. Здесь мы выбираем непосредственно то, с какими моделями работает курсор. По умолчанию включены несколько моделей. Это Cot 4,5 Sonet. На текущий момент понятное дело, что со временем они будут меняться, но нам важно понимать здесь базу GPT5, там Clot, Gemini и так далее. Можно посмотреть список вообще всех моделей. Как видите, их довольно-таки большое количество. Либо мы можем подключить свою кастомную модель, либо включить свои ключи, да, для того, чтобы там тоже всё это настраивать. По моей практики лучше всего, конечно же, работать с Clot 4.5 Sanet или с его thinking mode. Либо же очень неплохо показывает себя GPT5, и этого будет более чем достаточно. Безусловно, вы можете подключить такие вещи, как, например, там, GPT 5 Pro, но есть проблема, что она очень-очень дорогая. Поэтому лучше оставить здесь вот эти вот модели, особенно если вы начинающий, и дальше уже экспериментировать в случае, если понимаете, что происходит. Ну, кстати, ещё очень даже неплох Deeps третья версия. Тоже можете его использовать.
Следующий важный момент, который присутствует в курсор - это Rules and Memories. В первую очередь лучше, конечно же, включить Memories, чтобы он учился у вас, как вы с ним работаете. И дальше присутствует поле User Rules. Здесь мы описываем общие правила для всего курсора, вне зависимости от проекта, которым ему нужно следовать. В моём случае есть несколько базовых правил, и обратите внимание, что они написаны просто обычными человеческими словами. Ну, единственное, что я здесь английский язык выбираю. например, приоритизировать чистый, эффективный и поддерживаемый код, постоянно следовать соли таки с принципом, чистить неиспользуемый код, ну и так далее, и так далее. То есть здесь вы описываете это самостоятельно. В качестве примера мы можем написать правило, постоянно отвечая мне на русском языке, ну либо на другом языке, на котором вы хотите. Вы могли обратить внимание, что агент он отвечает мне всегда на русском. Да, это потому что у меня до этого правило стояло. По умолчанию у вас может он отвечать на английском языке. Это достаточно удобно. То есть здесь мы просто словами описываем, что ему нужно делать, и настраиваем.
Другое поле называется Project Rules. Эти правила, они характерны под именно текущий проект, с которым вы работаете. Давайте в качестве примера я создам новое правило. Допустим, назову его Service. Дальше нажимаю Enter. И мы попадаем в редактор этого файла. Как видите, у него есть расширение MDC. А здесь я также словами описываю, а что мне, собственно говоря, нужно сделать. Например, в качестве теста я напишу, что когда ты создаёшь новые сервисы, используй классы, да, в качестве реализации. Дальше смотрите, мы можем менять режим, когда используется это правило. Вот сейчас у меня стоит всегда использовать. Можно поставить, чтобы искусственный интеллект сам решал, можно поставить, чтобы это всё применялось только к специфическим файлам по паттерну, либо мы вызываем это самостоятельно. То есть это делаете под задачу. И как видите, появляется папка точка курсор в проекте. У него есть подпапка rules. И дальше здесь содержится наше правило. Таких правил может быть большое количество. И в случае, если мы заливаем это в гиIT, то, например, а ваши коллеги, они также получат эти правила, и проект будет консистентен.
Теперь, чтобы протестировать, что всё это работает, перейдём в агента. Я напишу такой запрос: создай сервис для того, чтобы получить тудушки с сервера. В данном случае он сделал довольно-таки большую работу, и нас интересует, соблю правила. Переходим в сервисы. Есть to сервис. И, как видите, действительно, он сделал его через класс. Это довольно-таки круто, потому что мы теперь можем создавать специфику нашего проекта просто обычными человеческими словами.
И более того, хочу ещё раз показать, как можно использовать агента при работе с проектом. Допустим, в папке Rot, который назову ARC.mC. И дальше агенту я поручу создать документацию на основе всего этого проекта. И дальше я указываю в какой файл. В данном случае это у нас ARC MDC. Давайте посмотрим, что он сделает. Как видите, он написал нам довольно-таки полное описание. Мы можем его посмотреть с помощью Mark preview, да, есть архитектура, стек, принципы, различные сервисы, типы. Ну, в общем, сами всё видите. Довольно-таки круто.
Теперь давайте углубимся в разработку с искусственным интеллектом. В базе своей это называется vibe codдинing. Это метод создания программного обеспечения без прямого написания строчек кода, да, когда код сам пишет искусственный интеллект. Но, конечно же, это не магия, да, потому что искусственный интеллект, он не понимает всех требований, всех нюансов, и чем более комплексная задача, тем больше он может ошибок делать. Поэтому, чтобы минимизировать количество ошибок, у вайпкодинга есть определённые правила. Я, кстати, даже снимал целый курс про vipe ссылка будет в описании к этому видео. Ну а сейчас я подчеркну те базы, которые вам необходимо понимать.
Во-первых, вместо того, чтобы написать, пожалуйста, сделай сразу же весь мне проект, пробуйте декомпозировать задачу на под маленькие задачи. То есть, чем более атомарная будет задача, которую необходимо сделать, тем проще будет искусственному интеллекту помочь вам это всё организовать. Дальше нужно будет концентрироваться не на маленьких деталях, типа поправь мне там CSS, здесь неправильное отображение, а нужно фокусироваться на общих вехах и только потом уже дотачивать детали. То есть сначале создай мне архитектуру, потом создай мне базовую функциональность, потом добавь мне визуальное отображение, ну и так далее, и так далее. Дальше помните, что каждая работа с искусственным интеллектом - это определённый контекст. Да, чем больше вы его перегружаете, тем больший шанс на ошибку - это когда мы создаём новый чатик. Поэтому для новой задачи создавайте новый чат, создавайте туда необходимый контекст, и тогда реализация будет, скорее всего, более эффективной.
Очень важно понимать, что искусственный интеллект здесь генерирует, потому что он что-то пишет, изменения в коде, да, какие-то файлики, читайте. Всё. Это называется уже концепция deepдинг, да, когда вы усиливаете свои навыки программирования с помощью искусственного интеллекта. Необходимо понимать все отчёты, все изменения. Иногда вы можете даже спрашивать у Иишки, собственно говоря, а что ты сделал, почему и зачем? То есть нужно полное понимание. Тогда опять же шанс того, что на каком-то этапе проект у вас развалится. будет сильно ниже. И, безусловно, при необходимости добавляйте возможность тестировать новые фишки, дебажить их, чтобы понимать, что каждый этап, который вы фиксируете, он был рабочий и вполне себе в хорошем состоянии.
Также я хотел бы сказать пару слов про написание промтов. Вот уже сейчас есть целые фреймворки, которые позволяют улучшить взаимодействие с искусственным интеллектом. Например, такой фреймворк называется clear. Каждая буква обозначает определённую концепцию, да, то есть это cons logical, adaptive и reflection, который позволяет улучшить ваш промт, чтобы искусственный интеллект его понял. Приведу вам пример улучшения такого промта. Вот, допустим, у меня есть базовая идея создать туду приложение. Я ей говорю: "А, сделай сайт для трекинга задач". Но абсолютно непонятно, что это за сайт, зачем он нужен, какой стек и так далее. Дальше я, допустим, внедряю первую букву консай и говорю: "Создай мне простое toдуo приложение на React". То есть здесь я уже специализировал, какой стек мне необходимо использовать. Дальше добавляю букву logical. Здесь я говорю, что вначале предложи мне архитектуру, а потом уже генерируй код, да? То есть как раз-таки это есть декомпозиция задач. Дальше я ему говорю: "КОД должен быть готов к вставке в Next JZ Project". То есть я уже специализирую код, который должен получиться, потому что он будет работать в специализированном фреймворке. С точки зрения адаптив я говорю: если тебе нужно больше контекста, задавай вопросы прямо перед генерацией, да, и искусственный интеллект может выяснить, что ему ещё недостаточно знать. И последнее - это reflective. После того, как ты сгенерируешь весь код, проанализируй результат и предложи три улучшения в архитектуре, UX и безопасности. Ну, это как пример. И смотрите, что получается. То есть из вот такого запроса, сделая сайт для трекинга задач, мы получаем намного более чёткий запрос. И, понятное дело, где мы получим лучший результат. То есть одно без другого здесь не работает. Тоже имейте это в виду.
В качестве примера покажу создание простого проекта. Это будет landing page. И смотрите, какой у меня есть запрос. С одной стороны, запрос он довольно-таки точный. То есть я хочу создать лендинг для resum IT специалиста с интерактивной формой контактной информации. Давайте для теста я его отправлю, пускай пока яшка это генерит, заодно посмотрим, как быстро можно лендинги себе продающие делать. Но я бы хотел сказать, что на самом деле мы этот промт можем улучшить с помощью тех же самых лмок. В качестве примера чат GPT буду приводить. Что мы можем здесь сделать? Например, я могу написать таким образом, чтобы он взял и улучшил мне данный промт. Это то, что я сейчас ставил в курсор. И после я говорю, а, оптимизирую его согласно приложенному документу. Я беру и прикладываю здесь Clear Framework. И смотрите, я ему это отправляю уже просто очень большой и точный промт, который нам с вами будет намного проще уже взять, точечно изменить там, где мы хотим, и с ним работать. То есть вы можете использовать лэмки для того, чтобы улучшать ваши промты и делать тоже это автоматически, что довольно-таки круто. Как вы понимаете, с такой информацией шанс того, что проект будет более точно сделан, сильно выше.
А сейчас давайте посмотрим на то, что у нас получилось с точки зрения лендинга. Опять же, я не написал ни строчки кода, и мы получаем уже какого-то персонажа. У него есть анимации базовые, технологии, опыт работы, есть проекты и форма связью. То есть даже есть с валидацией. Понятное дело, что сейчас это можно доулучшать, где-то оптимизировать, но это был пример того, что вы можете делать, когда даже не пишете ни строчки кода. Это же восхитительно.
Теперь я бы хотел поговорить про следующую важную концепцию, которая есть в курсоре, и называется она MCP. MCP - это model context Protocol. Это, по сути, функционал, который позволяет лмке, которая есть внутри курсора, взаимодействовать с внешним миром, то есть, по сути, расширять его функционал. Так как агенты, они в основном живут как в чёрной коробке, они просто получают какую-то водную, своими мозгами работают и выдают результат. А с помощью MCP мы можем давать ему возможность взаимодействовать с дополнительными фичами. И на самом деле в курсоре это выглядит довольно-таки просто. Мы можем перейти в настройки и перейти в поле Tools and MCP. На текущий момент, как видите, у меня нет никаких MCP, но я могу добавить новый кастомный. Как только я это делаю, как видите, мы попадаем в папкурсор и MCP JSON. То есть, по сути, здесь мы просто берём и описываем а тот функционал, который нам нужен.
В качестве примера я хочу показать, как можем создавать здесь кастомный MCP с очень простым функционалом, чтобы вы поняли, как это работает. Для этого есть отдельный GitHub репозиторий, называется он MCP Crypticker. И это очень простой демонстрационный проект, который позволяет понять его принцип. Он, по сути, берёт и показывает нам, сколько сейчас стоит крипта. Для того, чтобы работать с этим MCP, нам необходимо его вначале склонировать. Я копирую данный репозиторий, создам новую папку, куда я всё это буду складировать. Дальше перейду в devсь git клон данного репозитория. После этого я в него перехожу, делаю npm install. Далее смотрим в документации, что нам здесь нужно сделать. По сути, мы должны только настроить теперь путь до данного файла и можем к нему обращаться. Как это сделать? В курсоре я создаю новый MCP, допустим, назову его BTC. И дальше у него есть несколько полей. Первое - это Command. И второе - это ARCS. В данном случае у нас будет, то есть мы с помощью nodejs будем запускать JavaScript файл. И с точки зрения ARC здесь мне необходимо указать абсолютный путь до файла, который мы только что развернули. В моём случае это будет такой путь.
Теперь смотрите, я перехожу в агента и, допустим, говорю ему: "Получи цену биткоина". Нажимаю Enter. И теперь смотрите, что получается. Он нам предлагает вызвать наш MCP сервер. Видите, тут написано getтиcker - это название функции, которая будет выполняться. Я нажимаю Run. Выполняется MCP сервер, и мы прямо в курсоре получаем его цену. На текущий момент это там 111.000 долларов и получаем информацию. То есть это очень простой пример, как работает MCP. Мы просто взяли и расширили его функционал. В данном случае это демонстрация была, но есть очень много полезных МCпишек, которые вы можете использовать для того, чтобы улучшить взаимодействие с и в курсоре. Я приведу сейчас один практический пример, но если вы хотите получить список полных MCP серверов, которые прямо очень классно позволяют работать в курсоре, я это выложу тоже в дополнительных материалах в описании к видео. Там будет и то, как это всё настроить, что за что отвечает и так далее.
Приведу пример такого MCP-сервера, который называется ConTex 7. Это очень крутая история, потому что она позволяет писать более точно код. Проблема нейронов заключается в том, что они обучены на старых данных. И, например, если сейчас актуальна React девятнадцатая версия, то нейронка может быть обучена на Реакте восемнадцатой версии. А что уж говорить там про какие-то маленькие библиотеки? Так вот, данный MCP сервер, он позволяет точно выяснять, какой сейчас есть API у различных библиотек или плагинов, там, фреймворков и так далее. То есть он будет актуализировать информацию и тем самым неронка будет работать намного более точно. Как настроить данный MCP-сервер? Мы на самом деле можем перейти вот к этому полю и скопировать его конфигурацию. Я просто его копирую, перехожу в курсор и дальше добавляю новый серверк 7. Команда у него будет npx. И в данном случае ENF мы не будем делать, потому что он просто увеличивает количество запросов. И дальше, смотрите, когда я перехожу в курсор сеттинги, я вижу, как у нас подключился ещё и контекст семь. То есть теперь, когда мы будем работать с фреймворками, то он будет получать более точную информацию.
Сейчас я бы хотел поработать с ещё одним проектом и создать целое приложение на NextJS. Поэтому давайте начнём делать это поэтапно. Я сейчас приведу примеры того, как делать такие проекты более точно. В первую очередь нам необходимо сгенерировать вообще этот проект, поскольку, опять же генерация лучше делать самостоятельно через CLI. Я пишуX Create Next Up в текущую папку, дефолтные значения, и мы получаем сгенерированный проект. Дальше я не тороплюсь переходить к агенту, потому что сперва мне необходимо настроить, чтобы курсор понимал, что я вообще от него хочу. И для этого я также перехожу в настройки, в Rules and Memories и создаю новое правило Add Rule. Назову его Next Up. Сюда я занесу вот такое огромное правило. И если мы почитаем, что здесь написано, то это правило, сделанное для оптимизации Next пятнадцатого проекта, который использует React 19, TW Wind и так далее. И здесь мы видим большое количество заранее готовых промтов. То есть, например, ты экспернер, который специализируется там Typesриpt, React 19, ну, в общем, и так далее. И есть большое количество уже бест практисов, анализов, различных идей и примеро кода того, как себя вести. Опять же, где находить такие правила? Ну, например, есть целые сайты и библиотеки, где вы можете это сделать. Их список я также привёл в Telegram-посте, который вы можете найти в описании к этому видео. Там вы можете всё это обнаружить. Ну и здесь просто, например, пишите там next и выбираете то, что вам больше подходит.
Дальше, опять же, я не тороплюсь работать с агентом, потому что я хочу сделать ещё следующий шаг. В корне я создам новый файл, который назову spec.m. И в этот spec.md я занесу следующую информацию. Давайте я посмотрим, как это выглядит. По сути, это обычный текстовый файл, где я описываю, а что я вообще хочу от этого проекта. Как видите, здесь есть цель. То есть сейчас мы будем создавать простой сервис, где пользователь будет выбирать тему, тон и будет получать 10 идей для вирусных роликов с сетя, сценарием и так далее. Здесь я описываю стек, то есть next 15, Wind 4, Open AI SDK, но буду работать с дипсиком. И есть базовые интерфейсы. На самом деле вот такие спеки мы можем генерить также с помощью искусственного интеллекта. То есть описываем словами идею проекта. И дальше говорим: "Переведи это всё в спеку". Выбираем технологии и прочее. И по факту сейчас будет простая демонстрация того, как работает SDD. SDD - это SPC Driven Development, когда мы описываем в спеке, что хотим видеть, и дальше по ней искусственный интеллект, он работает и делает проект за нас.
Значит, что мы делаем дальше? Я перехожу в агента и говорю ему: "Посмотри на файл spect.m и дай мне знать, всё ли тебе понятно". Он описывает то, что он понял, и говорит: "Всё, в принципе, выглядит логично и готово к реализации". А хотим ли мы стартовать? В принципе, я думаю, что готовы, потому что здесь всё понятно. И это будет крутое начало, потому что вне зависимости от кода агент всегда будет понимать в общих чертах вообще, что это за проект, где он находится, что он делает и как ему работать с кодом. Кстати, прежде чем мы будем генерировать, видите, тут есть ещё такое дропун, который называется авто. Авто - это автовыбор модели. Но если мы его убираем, мы можем вручную убирать, какая модель будет генерировать текущий функционал. Ну, оставлю авто. Думаю, с этим нужно будет разобраться. И давайте напишем.
Итак, он завершил генерацию. Давайте посмотрим на changes. У нас есть типы, есть подключенная библиотека Open AI. Правда, она почему-то отсюда идёт. Ну ладно, выясню чуть позже. Есть компоненты, но что мне не нравится, то есть он неправильно использует Open AI, потому что я хочу работать с дипсиком, и для этого мне потребуется другая библиотека. Поэтому я сейчас делаю keep all. Пока что я даже не буду проверять, как это работает. Сразу же ему скажу, что то есть мне необходимо работать с IPDPS, делая запрос через библиотеку Open AI. Я нажимаю Keep all и в Redmi написано, что нам необходимо создать файл.local и указать определённые ключи. Давайте так и сделаем. Вставляю сюда ключ. И теперь мы можем тестировать, как работает приложение.
Итак, мы получаем приложение. И давайте напишем какую-нибудь тему, скажем, vibe coding. Здесь, конечно же, не видно шрифта, пусть будет дружелюбный, но это мы можем легко поправить. Так, у нас есть ошибка при генерации идей. У нас также есть ошибка в консоли, поэтому я могу её скопировать, вставить агенту и написать. Итак, тестируем ещё раз, работает ли это. Допустим, vibe coding. Так, мы ещё раз получили ошибку при генерации идей. Можем это вставить прямо в агента. Итак, тестим ещё раз. И вуаля, уаля. Этот сервис теперь работает. Смотрите, он выдаёт нам 10 идей для темы ваeкодинг. Мы можем посмотреть их предпросмотр. Выглядит довольно-таки круто, на самом деле. Ну и очевидно, что этот сервис реально работает с опишкой дипсика. Допустим, цифровой минимализм. Нажимаю сгенерировать идею. Да, это занимает какое-то время, но тем не менее, то есть мы почти что ничего не написав руками, получили работающий проект, что выглядит довольно-таки круто. Да, нейронка иногда может выдавать ошибки, то есть нужно иметь определённое терпение для того, чтобы она выдавала то, что нужно, исправляла эти ошибки, но при этом, как видите, это более чем работает.
На текущем этапе мы получили ещё одну ошибку при генерации уже сценария. Нам необходимо опять же поправить выходной формат. Мы можем скопировать эту ошибку, вставить в агента и сказать. И таким же методом, я уже не буду его показывать, мы можем взять и исправить ошибку того, что шрифты довольно-таки плохо видны, но это уже детали. Здесь очень важен фундамент и базис. Так, получаем новый результат. Ну и давайте попробуем создать сценарий. И вуаля. Смотрите, это работает, потому что у нас есть теперь полный сценарий. То есть, э, буквально за несколько итераций и действий мы сделали полноценный стартап с использованием курсора и вайп-кодинга. Поэтому я надеюсь, что теперь вам стало понятнее, как работать с курсором, какие есть методики и как обычно в любом навыке вам нужно практиковаться, делать и прочее. И всё будет получаться со временем. за всеми допами. Идите в Telegram-канал, читайте там в описании полезные ссылки и увидимся.