Documentation

Home

Documentation

Develop and run an app

 

Programming languages

Click-Coder works with most programming languages. 

  • JavaScript is often good for simple apps, runs directly in your browser and requires no installation. 
  • Python offers powerful libraries for data manipulation, analysis, machine learning, image processing,  etc. and has slightly simpler syntax. 
  • C, C++, C#, Visual Basic, Ruby, Node.js and other languages require additional setup tools. 

See the Run menu above for more details.

Get started

The Next Step Tip control below the toolbar will guide you thru these steps:

  1. In Click-Coder: File | Create New Project.
  2. Set the Click-Coder status bar drop list to an entry beginning “CC”.
  3. In the Request box enter a description of the app you want written.
  4. Click SEND  and wait for the result.
  5. Click NEXT to see the first section of new code.
  6. Click SAVE to approve.
  7. Repeat the two prior steps until it shows “All changes have been shown”.
  8. Click on the main file (index.html, main.py, etc). 
  9. Click RUN to test the app.
  10. If the program is starting to work but you want to change something, say what you want to change in the Request box and loop back to SEND.

Resolve an error

  1. Copy and paste the error into the Request box.
  2. Click SEND  and wait for the result.
  3. Click NEXT  to see the first new code.
  4. Click SAVE  to approve the code.
  5. Repeat the last two steps until it shows “All changes have been shown”.

Modify an existing code base

  1. In Click-Coder use File | Open Folder and select the root of your code base (C++, C, C#, Python, Ruby or any common language).
  2. In the status bar LLM drop list select an LLM with CC.
  3. In the Request box type something like “Add a feature to ___.”
  4. Enable the checkbox next to files that the LLM needs to see or change or click SUGGEST .
  5. Click SEND and wait for the result.
  6. Click NEXT to see the first new code.
  7. Click SAVE to approve the code.
  8. Repeat the last two steps until it shows “All changes have been shown”.
  9. Use your favorite IDE to run the program.
  10. If you get an error, copy and paste the error into the Request box and loop back to SEND.

To Run your app

Please click on “Run” on the menu above. 

 

Installation

  1. Sign up and download the Click-Coder app.
  2. Launch the Click-Coder app.
  3. Click the Folder button  and select your source code or an empty folder for a new app.

Workflow

  1. In the Request box, enter a task (e.g., Write a program; Resolve an error message; Add new feature; etc.).
  2. In the file list, click the checkbox next to files relevant to the Request, or click SUGGEST .
  3. Click SEND and wait for the LLM response.
  4. Click NEXT to show the LLM code changes.
  5. Click SAVE to approve each change.
  6. Click RUN – to run your app or learn how to set up to run. 

Additional  Tools

  •  Saves edits made in the Workspace
  • Shows preference and configuration settings (see Settings)
  • Opens a control to enter a search string. Matches will be highlighted in the Workspace.
  • Shows recent Requests you made.
  • Suggests files that are likely needed for a task based on the file and folder names and the text in the Request box. Using clear file and folder names will improve accuracy. Adding comments with “Summary:” also helps (see Settings section). You can also select files manually via the checkboxes when you know which files are needed for a Request.
  • Shows prompt modifiers you might want to add to your Request. You can setup your own reference via Tools | Setting | File Paths | Reference File.

File tree right-click menu

In the file tree you can right-click to:
  • delete, rename, duplicate, create new, compare files
  • indicate to ignore files or folders
  • reveal a file in the O/S file manager

The status bar at the bottom of the screen shows:

  • how long it took the LLM to respond and how many steps
  • the token estimate for the selected files
  • how many changes the LLM made
  • status

Request box

This is where you enter your request. You can add a URL (with www) – the webpage will be included in the context sent to the LLM.

LLM Model

Click the model selection drop list on the status bar to change models. New users will start with the model prefixed with CC which sends requests through the Click-Coder server to Anthropic. The other options are if you want to use your own API account (see “Private API” below).

Private API

You can use your own API account (not go through the Click-Coder server) with Anthropic or OpenAI and only pay the small monthly fee for the Click-Coder software:

  • Click Settings  and notice the API key names (e.g. OPENAI_API_KEY).
  • If you already have an API key and your key is saved under a different name, change the setting to match the name used.
  • If you don’t yet have your own API key:  get one at Anthropic or  Openai (we currently find Anthropic most effective.) Set an environment variable for at least one API key:
    Windows: Settings > Search: “Edit env” >  User variables > New. Set Variable name (e.g. ANTHROPIC_API_KEY ). Set Variable value to your API key. Click OK to save.
    MacOS/Linux: Open a terminal window and type: export ANTHROPIC_API_KEY=”your_api_key_here”

Troubleshooting

Click here

Suggestions

Have a suggestion to improve these docs or the app? Please drop us a note – we listen.

File menu

  • Create New Project

    – creates a new folder to hold a new project. 

  • Select Folder

    – selects a folder containing existing code.

  • Save Workspace

    – saves any edits made in the Workspace.

  • Recent Projects

    – switches between recently used projects.

  • Version | Snapshot

    – saves a copy of the files in the file tree so you can revert to the current state later. This is useful when your project reaches an improved state and you want to be able to restore to that state if subsequent changes don’t work. This feature is mainly useful when you are not using a more advanced version control system like GIT.

  • Version | Undo

    – restores all your code to the last snapshot. If you want to revert to an older snapshot first use File | Version | Show and delete the newest snapshot(s).

  • Refresh

    – updates the file tree with any changes – normally automatic.

  • Summary | Show Missing

    – shows files that do not contain “Summary:” – see Settings.

  • Summary | Create

    – creates an AI summary at the top of files selected in the file tree. This improves the accuracy of the Suggest feature.

  • List Filtered Files

    – shows a list of files not filtered by your settings – see Settings below.

  • Clear Selections

    – unchecks any files you checked.

  • Login / Logout

    – login to use the AI features.

Tools menu

  • Settings

    – see Settings

  • Recent

    – show dialog of recent Requests – select one and click OK to load the Request box and select the indicated files. 

  • Search

    – opens a control for searching inside the Workspace.

  • Stats

    – creates a report showing the number of files of each type, the lines of code, and character count.

  • Reference

    – shows a list of prompt modifiers you might want to add to your Request. You can set up your own reference via Tools | Setting | File Paths | Reference File.

  • Parse files from Request

    – enables checkboxes next to files listed in Request box.

Log menu

  • Request, Output, Stats

    – shows logs of your activity, which is often useful to go back to something you were working on previously.

Code menu

  • See Workflow section above.

  • Prep – prepares the Workspace with the contents of the files you selected. You can use this to trim down the data before issuing the Send command, to reduce token usage.
  • Build – if your program uses external libraries, use this tool to create a file in the .click-coder folder that lists the items your program needs and installs them for you. After Building, use the RUN button to run your program.

    Help menu

    • Report Issue

      – creates a file of the current data which you can send to tech support if you want to report an issue.

    • Show Config Folder

      – opens the folder containing your settings, logs, snapshots, etc. You will likely want to back up some or all of this data. You can also use these files to set up Click-Coder on a new computer.

    • Show Logs

      – opens the folder containing debug logs you can email to support if needed.

 

Access the Settings dialog via which covers the following settings:

Next Step Tip

This setting toggles a feature that recommends the next step while learning Click-Coder. 

Suggest Mode

This setting affects how the Suggest command works for suggesting which files are needed given your Request. 

  • In Files mode only files names are analyzed to make suggestions which may be sufficient when files names are descriptive.
  • In the default and recommended Files+Summary mode Click-Coder considers file names and any comment lines containing “Summary:”. For example, at the top of a file that monitors file changes you might write a comment “Summary: Manages file system watching and change detection”. Usually one line at the top of each file is sufficient – the time spent adding summary lines will be paid back 10X but if you prefer you can have the LLM create summaries for you via File | Summary | Create and you can optionally edit them for ever better results.
  • In Files+Functions mode Click-Coder considers file names and parses the names of each function in each file (for popular languages).

Keeping files relatively small and modular also helps (files in the Click-Coder project itself average 4kb).

Rules File Path

The Rules file allows you to specify what you want the LLM to know about your project. It is recommended to create a file at the specified path. The file will be included in all submissions to the LLM, so be concise. Items that can help the LLM include: an overview of the purpose of the app; framework used; common utility function signatures that might not be included in each context, style rules, etc.

Run File Path

It is recommended to create a file at the specified path so you can use the Run button to run your program from Click-Coder. In the file include commands needed to run your program – this varies based on the programming language / compiler, etc. If this file is not included, Click-Coder will try to run you program directly if in Python, Node.js, batch file, or Java.

Reference File Path

You can create a file at the specified path with quick reference data such as frequently use prompts or anything else that you want to refer to often.

 

Snapshot

As soon as you get your app working, use File | Version | Snapshot to create a copy of the working program. If you skip this step and make additional changes that lead to errors you will not easily be able to go back to the working version. If you are using Click-Coder with an IDE you can use GIT instead.

Requests

Detailed requests work better than very short ones and reduce the number of iterations needed to get the result you want. For example “Create TicTacToe” will work but this is better: “Create a TicTacToe game in Python. Split the code to Main and Config. In Config allow to set the size of the game like 3×3 or 4×4. Draw a red line thru the winning cells. Make the grid lines black and 5 pixels wide. Make cells 100 x 100 pixels. Use a white background. Include a Restart button centered below the cells.”

Iterate

Don’t be surprised if you have to make multiple attempts to solve a problem or get a feature right or develop a new app. Often individual changes are completed in 1 or 2 tries but sometimes can take up to 10 or even more. Full apps can take dozens or even hundreds of iterations to fine tune how the app works and fix issues.  This is so because it’s often hard to know what you want until you build it and  use it, and because current LLMs don’t always get it right. If you don’t agree with a change or a change did not do what you want you can:

  • Manage  – Be a manager and give guidance or an idea how to solve a problem.
  • Retry – Try again since LLMs vary their approach (when the temperature setting is above 0).
  • Revise – Change your prompt for better clarity or detail.
  • Kick – Click the Reference button for a list of “kickers” to add to your prompt.
  • Comment – Add comments in the code to help guide the LLM.
  • Select – Adjust file selections in the file tree.
  • Suggest – Leverage the Suggest commands to help provide the LLM *all* the files needed to solve a task – this is essential.
  • Clarify – Use clear file, function and variable names in your code.

Tokens

Try not to use up the allocation of 1,000,000 free tokens too fast. Initially, we recommend to aim to keep token estimates per  SEND under 25K (allowing ~40 Requests) and ideally around 10K (allowing ~100 Requests).  

The token count shown on the status bar or in a pop-up is an estimate of the tokens (basic unit of text) to be used for a SEND to the LLM. 

There are several ways to reduce token usage:

  • Select only the needed files.
  • Divide code into smaller files.
  • Use the Suggest button to suggest which files are needed.
  • Use menu Tools | Prep and remove irrelevant code before clicking SEND .

Actual tokens can differ substantially from estimates as shown via menu Log | Stats. 

Tokens for the Suggest command are usually lower and not reflected by the status bar value. 

Chatless Philosophy

While most chatbots feed your conversation history back in to the LLM for each submission, we found that this creates several problems when used for coding. It reduces transparency as to what the LLM sees; uses more tokens and can confuse the LLM. So we don’t do that. We found it better to modify the prompt or the code to record anything you want the LLM to consider with each submission.

Asking LLM general questions

To ask a general question, deselect all files and enter your question in the Request box.

Project-Planning

In addition to coding, Click-Coder works well for project planning (of coding and non-coding projects). For example, suppose you are designing an electronic circuit but not sure which microprocessor to use, which type of circuit to use, which other components, which software tools, etc. So you start a conversation with a chatbot. As the chat develops it starts to get long and disorganized. You’ll waste time scrolling back to prior sections and end up with a document that is difficult to use. Instead create some files to give structure such as Circuits, Components and Software. Then use Click-Coder. When you ask a question about Components for example, select only the Component file as the context and ask the question in a way that modifies the document. Along the way, delete text you don’t need or edit as needed. This way you will build an organized plan that is easy to reference and put into action without scrolling thru a long cumbersome chat. Use Click-Coder for:

  • Business plans – Detailed planning for marketing, finance, management, website, etc.
  • Technical Specifications – Detailed descriptions of software architecture, APIs, and system components.
  • User Manuals – Step-by-step guides for using software or hardware products.
  • Project Proposals – Formal documents to pitch new software or business ideas.
  • Standard Operating Procedures (SOPs) – Instructions for workflows in tech teams or businesses.
  • Marketing Plans – Strategy documents outlining how to promote a product or service.
  • Grant Proposals – Applications for funding from organizations or investors.
  • Investor Pitch Decks – Summarized business presentations for potential investors.
  • Test Plans – Documentation for software testing strategies, cases, and reports.
  • Legal Agreements – Contracts such as Terms of Service, Privacy Policies, or Software Licensing Agreements.
  • Content Strategies – Plans for blog posts, SEO content, or social media marketing.

Delegate but don’t abdicate 

Delegate to AI but don’t completely relinquish oversight or control. Check the final results.

Run your app

To run your app go to the appropriate section below depending on which language Click-Coder used.

Java

Click the main file with .java extension and then the RUN  button.  If you encounter an error, use the Build button to create and install dependencies. 

HTML / CSS

Click index.html  and then the RUN  button.  If you encounter an error, use the Build button to create and install dependencies. 

Javascript / Typescript

Usually you will have a file named index.html in the file list. Click on that file to select it. Then click the RUN  button.  If you encounter an error, use the Build button to create and install dependencies. 

 

For additional capabilities install node.js which extends JavaScript beyond the browser by providing a server-side runtime, filesystem and networking capabilities, and a vast ecosystem of third-party packages.

Python

For a Python app, install Python and specify to include Python in the “environment variables” as described next.  

 

If you already have Python installed make sure the path to Python is setup in the environment variables as follows: Windows Start menu | Environment Variables | button Environment Variables | System Variables | Path | Edit | New | enter path such as “C:\Program Files\Python311\” depending on Python’s location and version | OK | OK | OK.

 

After Python is installed, go to  Click-Coder and click on a file named main.py or similar in the file list. Then click the RUN  button.  If you encounter an error, use the Build button to create and install dependencies. 

Troubleshooting

If the RUN button opens Notepad or another editor, it is likely because you previously selected that app to open files with the respective file extension. You can fix this in Windows | Settings | File Extensions by removing the entry. 

Batch files

For .bat files simply click on the file in the file list and then click the RUN  button.  If you encounter an error, just paste the error into the Request box and click SEND.

Using Run.bat

If you have specific requirements to run your app, enter the needed commands in the run.bat file found in the .click-coder folder in the root of your project. For example, see the commands in the section above. The RUN button will then launch the run.bat file.

C++, C, C#, Visual Basic, etc.

These languages require additional tools such as compilers or an IDE (Integrated Development Environment) such as Visual Studio.  After approving code changes in Click-Coder you can use your IDE to build and run, or setup Click-Coder by placing compile commands in .click-coder\run.bat. This method allows you to feed compiler errors directly into Click-Coder so you can SEND them for repair without cutting and pasting errors into Click-Coder.  Click-Coder will copy the output from the path after “Compiler-Output:” (see code below) to the Click-Coder Request edit. Here is an example of .click-coder\run.bat (your setup will likely differ):

 

SET MSBUILD=”C:\Program Files\…MSBuild.exe”

SET SOLUTION_PATH=”C:\…”

SET BUILD_PATH=c:\temp\build

SET OUTPUT_FILE=c:\temp\build\build_output.txt

IF NOT EXIST %BUILD_PATH% mkdir %BUILD_PATH%

IF EXIST %OUTPUT_FILE% del %OUTPUT_FILE%

 

%MSBUILD% %SOLUTION_PATH% /nologo /t:Rebuild /p:Configuration=Debug /p:Platform=x64 /p:TargetFramework=net8.0 /p:OutputPath=%BUILD_PATH% /m /clp:ErrorsOnly >> %OUTPUT_FILE% 2>&1

 

echo Compiler-Output: “c:\temp\build\build_output.txt”

exit /b %ERRORLEVEL%

 

If you want to launch Click-Coder directly from your IDE, simply type “clickcoder” in the terminal. 

 

Starting a new project using Click-Coder and an IDE

When creating a new project in Click-Coder it will usually create the needed boilerplate files. Alternatively, you  can: 

  1. Create a blank solution in the IDE to initialize the project files. 
  2. In Click-Coder use File | Open Folder and point to the root folder of the new project.
  3. Check the checkboxes next to the key files or all files.
  4. Enter your objective in the Request box.
  5. Click Send to start the development process. 

By combining user-centric design with next-generation artificial intelligence, Click-Coder empowers you to develop quality software faster than ever.

(C) 2025  All rights reserved