Documentation
Quick Start
Installation:
After Signup, download and run the Click-Coder app.
Click the folder button (far left below toolbar) to navigate to your code or an empty folder if creating a new app.
Workflow:
Note: Each step is also shown above the Workspace edit box.
In the Request box enter a task (e.g. Write a program to ...; Resolve an error message; Add code for a new feature; etc.).
Click the Suggest button or manually check the checkbox next to files relevant to a task.
Click Send and scan any comments from the LLM.
Click the right-arrow button to see changes.
Click Save to approve each change.
Click Run to run the revised app or run directly via an IDE.
Convenience tools
Buttons
Prompt - shows a list of prompt modifiers you might want to add to your Request.
Settings - shows options for colors, language settings, font size, icon size, LLM temperature, API key names, path to log files, spaces per tab, syntax highlighting style, language comment prefix, enable suggestions, app run command, etc.
Search - opens a control to enter a search string. Matches will be highlighted in the Workspace.
Suggest - suggests files that are likely needed for a task. This is based on the file and folder structure and the text in the Request box. Using a logical folder structure and descriptive folder and file names will improve accuracy. Adding comments with "Summary:" can also help.
Run - Runs the program if you are not using an IDE to run.
Model selection
Click the model selection drop list on the toolbar to change models quickly. New users will start with CC-Sonnet which sends requests thru the Click-Coder server to Anthropic. The other options are if you want to use your own API account (see "Private API" below).
Status bar
The status bar at the bottom of the screen shows:
how long it took the LLM to respond
the token estimate for the selected files
how many changes the LLM made
current file being changed
Editing
You can edit the Workspace and save via the far left Save button. This, along with the Run button allows you to stay in Click-Coder for much of your work. For experienced programmer we recommend using Click-Coder along with your favorite editor or IDE for advanced editing features and code completion.
Request box
If you add a URL (with http or https), the webpage will be scraped and included in the context sent to the LLM.
Private API
If you prefer to use your own API account (not go thru the Click-Coder server), you can switch to your own API account with Anthropic or OpenAI and only pay the small monthly fee for the Click-Coder software:
Click the Gear button and notice the settings for API key names (e.g. OPENAI_API_KEY).
If you already have an API key: If 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 in minutes 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"
Menu Commands
File | Select Folder - Select the base folder of your source code files.
File | Save Workspace - Save any edits you made in the Workspace.
File | Refresh - Updates file tree with any changes - normally automatic.
File | Summary | Show Missing - Shows files that do not contain "Summary:" - see Settings.
File | Summary | Create - Creates an AI summary at the top of files selected in the file tree. This improves accuracy of the Suggest feature.
File | List Filtered Files - Shows a list of files not filtered by your settings - see Settings below.
File | Clear Selections - Unchecks any files you checked.
File | Recent Projects - Allows to switch between your recently used projects.
File | 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 break something. This feature is mainly useful when you are not using a more advanced version control system like GIT.
File | 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).
File | Login / Logout - Login to use the AI features.
Tools | Settings - See below
Tools | Search - Opens a control for searching inside the Workspace.
Tools | Stats - Creates a report showing the number of files of each type, the lines of code and character count.
Tools | Reference - Shows a list of prompt modifiers you might want to add to your Request. You can setup your own reference via Tools | Setting | File Paths | Reference File.
Tools | Parse files from Request - you can copy text from Log | Request into the Request box and then use this command to auto-select files.
Log | Request, Output, Stats - Shows logs of your activity which is often useful to go back to something you were working on previously. (The location of these files is controlled in the Settings dialog. The default location is shown via Help | Show Config Folder but you might find it useful to change the path. You can edit these text files to prune them occasionally if desired.)
Code - See Workflow section above.
Help | Report Issue - Creates a file of the current data which you can send to tech support if you want to report an issue.
Help | Show Config Folder - Opens the folder containing your settings, logs, snapshots, etc. You will likely want to backup some or all of this data. You can also use these files to setup Click-Coder on a new computer.
Settings
Suggest Mode - This setting affects how the Suggest button works. 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:" (e.g. 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 and you can use File | Summary | Create for AI generated summaries and 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. Keeping files relatively small and modular also helps (files in the Click-Coder project itself average 4kb and 120 LOC.)
Rules File Path - It is recommended to create a file at the specified path and include general info for the LLM. 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.
External Tools
See the External Tools page for examples of how Click-Coder is use with other tools.
Suggestions
Have a suggestion to improve these docs or the app? Please drop us a note - we listen.
AI Coding Tips
Guidelines
LLMs don't always get it right. If you don't agree with a change or a change did not solve a problem you can:
Manage: Think of yourself as a manager and give guidance or an idea how to solve a problem.
Retry: since LLMs vary their approach (when the temperature setting is above 0).
Revise: your prompt for better clarity or detail.
Kicker: Click the Reference button for a list of "kickers" to add to your prompt.
Comments: Add comments in the code to help guide the LLM.
File selections: Adjust the file selections in the file tree.
Suggest command: Leverage the Suggest command to help provide the LLM *all* the files needed to solve a task - this is essential.
Clear names: Use clear file, function and variable names.
Delegate but don't abdicate
Delegate to AI but don't completely relinquish oversight or control. Check the final results.
Tokens
You can reduce tokens used by clicking Prep and removing irrelevant code before clicking Send. The token count shown on the status bar is an estimate of the input tokens per call. Actual tokens can be substantially higher due to multiple LLM calls and output tokens. The actual tokens are shown at menu Log | Stats.
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; can confuse the LLM, etc. 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.
General questions
To ask a general question unrelated to your code, deselect all files and enter your question in the Request box.