User Interface
Quick Start
Installation:
After Signup, download and run the Click-Coder app.
Click the Folder button (far left below toolbar) and select your source code or an empty folder for 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; Resolve an error message; Add new feature; etc.).
In file list click the checkbox next to files relevant to the Request if any (or use the Suggest (lightbulb) button).
Click Send (airplane icon) and read LLM comments.
Click Next (right arrow icon) to highlight changes.
Click Save (down arrow icon) to approve each change.
Click Run (triangle icon) to see how to setup to run your app or run directly via an IDE.
This text just above the Workspace guides you thru the workflow.
On the File Tree select which files to send to the LLM for a given Request. Or click the Suggest button to have the LLM recommend files.
General Tools
Select an empty folder if creating a new app or the base folder of existing code.
Saves any edits you made in the Workspace.
Shows preference and configuration settings (see below).
Opens a control to enter a search string. Matches will be highlighted in the Workspace.
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.
Steps back thru recent Requests you made.
Prepares 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.
Workflow Tools
Suggest 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:" also helps (see below). You can also just select files manually via the checkboxes when you know which files are needed for a Request.
Sends your Request and selected code to the LLM.
Displays the prior code change.
Displays the first or next code change.
Saves a code change to the source code file to indicate your approval.
Runs the program if you are not using an IDE to run. The first time it will show how to setup this function. If running your program generates errors, copy the errors into the Request box and send again.
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
Click the model selection drop list on the status bar to change models. 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).
Editing
You can edit the Workspace and save via the Save button. This, along with the Run button allows you to stay in Click-Coder for much of your work. For experienced programmers we recommend using Click-Coder along with your favorite editor or IDE for advanced editing features and code completion.
Request box
This is where you enter your request. If you add a URL (with http or https), the webpage will be 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. To use your own API key:
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 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
Create New Project - Use this to create a new folder to hold a new project.
Select Folder - Select a folder containing existing code.
Save Workspace - Save any edits you made in the Workspace.
Recent Projects - Allows to switch 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 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 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
Settings - See below
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 setup your own reference via Tools | Setting | File Paths | Reference File.
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.
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.
Show Logs - Opens folder containing debug logs you can email to support if needed.
Settings
Suggest Mode
This setting affects how the Suggest mode works for suggesting which files are needed given a 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
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.
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.
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.
Suggestions
Have a suggestion to improve these docs or the app? Please drop us a note - we listen.