From Command Line to Chat Window: A Deep-Dive Guide to AionUi
Making Google Gemini as easy to use as your favorite messaging app—without losing any of its power.
1. Why Replace the CLI with a GUI?
1.1 Four everyday pain points
| Pain point | Typical scenario | Outcome |
|---|---|---|
Managing files with @ commands |
Typing long paths by hand | Typos and lost time |
| Lost conversations | Closing the terminal and forgetting yesterday’s work | Starting from scratch |
| Plain-text interface | Code, tables, and prose mixed together | Hard to read |
| Single-threaded chat | Needing two tasks at once | Waiting in line |
1.2 The single sentence that sums it up
“Can I keep Gemini’s muscle but chat with it like I do with friends?”
AionUi says yes.
2. First Look: What AionUi Actually Looks Like
In the GIF you can see:
-
A chat list on the left, just like any messaging app. -
A message stream in the center, with collapsible code blocks and rendered tables. -
A file tree on the right: click once to drop any file into the chat. -
A top toolbar for switching API keys or proxy settings.
Bottom line: Terminal commands become mouse clicks, and raw output turns into readable cards.
3. Core Features, Broken Down Three Ways
3.1 A richer chat experience
-
Multiple sessions—open three chats at once: “plan features,” “review code,” “write docs.” -
Persistent history—saved locally in SQLite; export anytime. -
Familiar controls—copy, collapse, or open code blocks in new tabs.
3.2 File and project management
| Feature | How to use it | When it helps |
|---|---|---|
| Visual file tree | Click the folder icon in the right pane | Quickly pick source files |
| Drag-and-drop upload | Drop a .zip straight into the chat | Share logs for one-off analysis |
| Diff view | Auto-generated after file changes | Review AI patches side by side |
3.3 Developer workflow
-
Full Gemini API support— generateContent,countTokens, and more. -
Rich rendering—Markdown, Mermaid diagrams, LaTeX, all styled. -
One-click API setup—paste your key, hit Test, done—no config files to edit.
4. Quick Start: 30 Minutes from Zero to Running
Tested on macOS 14, Windows 11, and Ubuntu 22.04. If you hit a snag, check the FAQ at the end.
4.1 Download the installer
| Platform | File | One-click link |
|---|---|---|
| macOS Apple Silicon | AionUi-v1.0.0-mac-arm64.dmg | Download |
| Windows x64 | AionUi-v1.0.0-win-x64.exe | Download |
| All others | See releases page | All versions |
4.2 Check system requirements
-
Node.js ≥ 16 ( node -v) -
npm ≥ 8 ( npm -v) -
A Google Gemini API key: get it here
4.3 Run from source (for tinkerers)
# 1. Clone
git clone https://github.com/office-sec/AionUi.git
cd AionUi
# 2. Install deps
npm install
# 3. Add your API key
# Launch the app → Settings → paste key → Save
# 4. Start
npm start
4.4 Build your own installer
| Target OS | Command |
|---|---|
| macOS Apple Silicon | npm run build-mac --arch=arm64 |
| macOS Intel | npm run build-mac --arch=x64 |
| Windows | npm run build-win |
| All at once | npm run build |
5. Tech Stack and Folder Layout
Remember this one-liner:
Electron makes it feel native, React makes it feel modern, Gemini CLI Core makes it powerful.
5.1 Stack at a glance
| Layer | Choice | Version |
|---|---|---|
| Desktop framework | Electron | 37.2.0 |
| Front-end | React | 19.1.0 |
| UI kit | Arco Design Web React | latest |
| Styling | UnoCSS | atomic classes |
| Build tool | Webpack + TypeScript | type-safe |
5.2 Folder map
AionUI/
├── src/
│ ├── adapter/ # Normalizes AI outputs into message cards
│ ├── agent/gemini/ # Wraps the official Gemini SDK
│ ├── renderer/components/ # React bits like ChatBubble, FileTree
│ └── worker/ # Long-running tasks in a child process
├── public/ # Icons, tray icons
└── package.json # Scripts and deps
Want to tweak the color theme? Look in
renderer/components.
6. Real-World Use Cases
6.1 Code development
-
Scene: Reviewing a teammate’s PR, AI flags a possible NPE on line 78. -
Steps: Drag the diff into chat → type “check for null pointer” → AI returns a patch → one click to apply.
6.2 Writing documentation
-
Scene: A new module needs a README. -
Steps: Drop the source folder into chat → prompt “generate docs from structure” → copy the Markdown straight into docs/.
6.3 Data analysis
-
Scene: A 50 MB CSV log, need to spot 500-errors. -
Steps: Upload file → ask “count status=500 per hour” → AI outputs a table plus chart suggestions.
7. Configuration Deep Dive
7.1 API options (three methods)
-
Gemini API Key—fastest for individuals. -
Vertex AI—great if your company already uses GCP. -
Personal OAuth—no key in plain text; uses refresh tokens.
7.2 Proxy setup
-
HTTP/HTTPS proxy support with a Test Connection button. -
Useful behind corporate firewalls or campus networks.
8. Roadmap: Where AionUi Is Headed
Straight from the official README.
8.1 Today
Version 1.0 solves three pains: file juggling, lost chats, single-threaded talks.
8.2 Tomorrow
| Phase | Goal | User value |
|---|---|---|
| Multi-agent ecosystem | Add browser automation, terminal, script agents | One UI for every agent |
| Flexible LLM binding | Swap among Gemini, Claude, GPT at will | Choose the best model per task |
| For everyone | One chat UI rules them all | Non-devs can use AI, too |
Bottom line: Turn on AI like you turn on a faucet.
9. Frequently Asked Questions
Sourced from early adopters, ranked by frequency.
9.1 Installation
Q1: npm install hangs on node-gyp?
A: Ensure Python 3 and VS Build Tools are installed, then run npm config set msvs_version 2022.
Q2: macOS says “cannot verify developer”?
A: System Settings → Privacy & Security → allow “Any Source” or right-click → open → still open.
9.2 Usage
Q3: Can I plug in my own OpenAI key?
A: Currently Gemini only. The adapter layer will open soon for community PRs.
Q4: Where are chat histories stored?
A:
-
macOS ~/Library/Application Support/AionUI/conversations.db -
Windows %APPDATA%\AionUI\conversations.db -
Linux ~/.config/AionUI/conversations.db
Q5: Are uploaded files leaked?
A: Files live in a local temp folder and are wiped on exit—nothing goes to the cloud.
9.3 Development
Q6: How do I change hotkeys?
A: Open src/renderer/hooks/useHotkey.ts, add a line per React Hotkeys docs.
Q7: How to debug the main process?
A: npm run electron:debug, then attach VS Code to port 9229.
10. License and Contribution
-
License: Apache-2.0—commercial and closed-source forks allowed, keep the copyright notice. -
Contribution flow: Fork → feature branch → PR → Review → Merge. Issue templates are ready to fill in.
11. One-Sentence Recap
AionUi does not make AI more powerful; it makes using AI as easy as texting a friend.
If you already have a Gemini API key, you can—within 30 minutes—experience:
-
parallel sessions -
drag-and-drop file chat -
history that never disappears
Let the AI do the heavy lifting, and enjoy the conversation.
