PRACTICAL GUIDE · FROM BEGINNER TO YOUR OWN PROJECT

How to use Cursor AI: from installation to your own program

We will create a small program that can be opened in a browser. No server, no complex setup, and no need to know all the programmer jargon. Then, we will break down how to move from the first exercise to working on a real project.

Editorial illustration: Mia and an AI programming workspace

What Cursor is and what it does with your words

Cursor is a code editor with built-in AI. You open a folder, explain a task, and the assistant can read files, create new ones, and modify the program. Instead of copying snippets of code between a chat and an editor, the work happens right alongside the files. However, launching and testing remain part of the process: a convincing "done" doesn't necessarily mean the button works.

This guide is for someone who wants to write their first program using AI. We'll make a small text counter: you paste Ukrainian text, and it shows the number of words, characters, and paragraphs. It will be useful for posts, product descriptions, and short announcements. Our educational version doesn't require a server or an API key. If you need a builder that publishes a site immediately, first check out the AI website creation roadmap.

A chat with a model, an editor, and a finished program are different things. Cursor helps write the code. The counter itself then works according to standard browser rules: every click does not call the neural network. A subscription to a development tool does not mean that future users of your program must also buy it.

Step 1. Install Cursor and open a separate folder

  1. Go to the official download page. Choose Windows, macOS, or Linux and your computer's corresponding architecture. Install the program and log in to your account.
  2. Create a regular empty folder text-counter, for example in "Documents". In Cursor, open File → Open Folder and select that specific folder. You don't need to open your entire drive or a folder with personal documents.
  3. Open the Agent panel. In the official quickstart, it is listed as Ctrl + I in Windows/Linux and Cmd + I in macOS. If your own hotkeys are different, find Agent through the editor menu.
  4. For this first example, do not install Node.js, Python, a database, or a dozen extensions. We are deliberately choosing a single HTML file that opens in a browser.

Downloading the editor and using its AI are separate stages. If your account quota has run out, it is not an error with your folder. You can continue to open and run your saved files.

Step 2. Give the AI a small and clear task

"Make a cool program" leaves too much unknown. It's better to immediately name the user, one useful action, constraints, and a way to verify. Below is our custom brief; it can be adapted for another small tool.

First prompt: one program, one file

Create a "Text Counter" program in a single index.html file within this empty folder. The interface should be in Ukrainian: a large text field, word count, character count (including spaces), paragraph count, and a clear button. A word is a sequence of letters or digits; apostrophes and hyphens inside are allowed. Count characters as Unicode code points; paragraphs are separated by empty lines. It must look good on a phone and include field labels. No server, no external libraries, no web fonts, no analytics, no storage, no APIs, and no paid services. Do not install packages. First, briefly explain the plan, then create the file and provide simple instructions to run it by double-clicking. Show how to test an empty field, "Привіт, Україно!", a word with an apostrophe, and two paragraphs. Do not claim you checked it in a browser if you haven't run it.

First, read the response. If the assistant suggests a server, registration, or a paid service, clarify: you need exactly a local file without these components. After creation, it should appear in the file list: index.html.

Step 3. Open the program outside the editor

Find it index.html in your folder via Windows Explorer or Finder and open it with a browser. If you see code text instead of the page, check the full name: the file must end in .html, not .html.txt. After the next edit, save the file and refresh the tab.

For now, this is a program for you on your computer. It won't appear in Google because opening a local file does not publish it to the internet. Sharing is a separate next step; for that, there is a guide on publishing, domains, and search.

Don't trust the description — verify it with a short text

Here is our own training counter to compare with the AI's result. The text in this block is not sent from the field, is not stored, and does not go into analytics. By "character" here, we mean a Unicode code point: a composite emoji may consist of several such characters. A word is a sequence of letters or digits; apostrophes and hyphens inside a word are allowed.

Words
0
Characters with spaces
0
Paragraphs
0

The table can be scrolled sideways →

Control examples based on our counter's rules
InputWaitingWhat we are checking
Empty field or only spaces0 words, 0 paragraphsSpaces do not create words
Привіт, Україно!2 words, 16 characters, 1 paragraphUkrainian letters and punctuation
п’ять синьо-жовтих2 wordsApostrophe and hyphen inside a word
Two non-empty lines separated by an empty2 paragraphsEmpty lines separate paragraphs

Other editors might count words differently — for example, by splitting a hyphenated word. First, agree on a rule, then verify the implementation. For a specific social media limit, refer to its own editor: the way emojis are counted may differ.

Step 4. Change one thing at a time

After the first run, it's easy to ask for "also a dark theme, history, accounts, and payment." Then it's unclear which specific change broke everything. First, make a copy of the working folder, for example, text-counter-working. Then ask for one small improvement.

One next refinement

In the working index.html, add a separate counter for characters excluding whitespace. Keep all other behavior the same. Do not add dependencies or network requests. After the change, list the specific checks you performed and separately what I should check manually.

In the diff view, often called diff, you can see added and removed lines. Even without knowing the programming language, check if any third-party addresses, unfamiliar dependencies, or changes to other people's files have appeared. For the single signature task, a full project rebuild should not be necessary.

If something doesn't work, report the specific symptom: what text you pasted, what you clicked, what you received, and what you expected. Include the error text without passwords or personal data. "The button doesn't work after pasting two paragraphs" is more useful than "you broke everything again."

Error message without unnecessary context

There is a bug in our counter. Input: five blue-yellows. I expect 2 words according to the rule we agreed upon. I actually get: [enter number]. Find the cause in the current file, suggest a minimal fix, and also test empty text, spaces, and "Привіт, Україно!". Do not rewrite the interface.

When there is little of a basic example: rules, Git, and checks

For a more complex task, enable Plan Mode: first discuss the plan, then allow implementation. In the current documentation, switching is available via Shift + Tab the agent field. This is especially helpful when multiple files are changing or there are several possible ways to complete the task.

Move permanent agreements to AGENTS.md the project root. Cursor supports this simple instruction file; for rules with more complex file selection, use .cursor/rules. This way, you won't have to repeat the interface language and check order every time. Instructions are context for the model, not a technical safeguard against errors.

Example AGENTS.md for this project

# Project Agreements This is a local text counter in a single index.html. The interface and explanations are in Ukrainian. No network requests, dependencies, or saving of input text. Do not expand the task without explaining the reason. After a change, check the empty field, Ukrainian words, apostrophes, hyphens, and paragraphs. Distinguish between performed checks and recommendations for manual testing. Explain the consequences before deleting data or overwriting the working version.

As the project grows, replace manual copies with Git: save a working version before a new feature, review changes, and make a separate commit after checking. Ask the agent to explain a command before executing it if you don't understand its consequences. Do not start learning with commands that force-delete unsaved changes.

For an existing React, Python, or other project, first figure out its run method. Ask to use existing tests and builds, and to add new tests for specific behaviors. AI code checking is useful as an extra pair of eyes, but it does not replace running the code and manual scenarios. Learn more about preserving context in the short project context package.

What's free, what's paid, and where the code goes

Cursor has a Free tier with limited AI usage. On the open pricing page during verification, Plus is listed at $8/month with Grok models, and Premium at $30/month; use of third-party models is billed separately. Taxes and fees may apply. Check the current plan before paying: the old "Pro for $20" from an external instruction should not be automatically transferred to your account.

Our exercise does not require a paid API inside the created application. The cost of AI assistance during development and the cost of an AI feature for visitors are different budgets. A powerful graphics card is also not mandatory here: working with standard HTML is not the same as running a large language model on your PC.

Having Cursor installed on your computer does not mean the AI is fully local. Requests and necessary context may be processed by a service. Privacy Mode limits data usage for training, but it does not turn the editor into an offline model; the policy contains separate caveats regarding abuse monitoring. Do not add passwords, client databases, or secret keys to your training folder. Keep the standard confirmations for sensitive actions enabled.

What should be ready by the end

  • You know which folder the program is in and which file opens it.
  • Empty text, Ukrainian words, and two paragraphs yield the expected result.
  • There is a working copy you can revert to.
  • You can explain where the AI helped write the code and where the code works on its own.

Choose your next project based on your task, not the number of trendy features. For phones, there is a separate guide on creating a mobile app. If you get stuck, bring a small example and a specific error to the Ukrainian Vibe Coding chat.

Sources and verification limits

Editor capabilities and tariffs have been verified against official sources. Prompts, the training counter, and control examples are the editorial team's own materials. The counter's operation was verified separately; the Cursor paid session and the quality of responses from all models were not tested in this material.

  1. Cursor: official download
  2. Cursor Quickstart: folder, Agent, first changes
  3. Cursor Plan Mode
  4. Cursor Rules and AGENTS.md
  5. Cursor: viewing changes and checks
  6. Cursor: current tariffs and separate payment for third-party models
  7. Cursor: data processing and Privacy Mode
  8. Cursor: agent security and action confirmations

Was this helpful? Pass it on

Send it to someone with a similar task.

Share in Telegram ↗

Read via RSS · Weekly newsletter in Ukrainian

Discussion

Share your opinion or ask about the material. Your nickname and comment text will be visible to everyone.

Loading comments...