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

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

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

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

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

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)

1. Gemini API Key—fastest for individuals.
2. Vertex AI—great if your company already uses GCP.
3. 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

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.