<div align="center"> <img src="public/app-icon.png" alt="TOKENICODE Logo" width="120" />

TOKENICODE

A Beautiful Desktop Client for Claude Code

TOKENICODE wraps the powerful Claude Code CLI in a polished desktop interface — bring your own API key, connect any provider, and get a native coding experience with file exploration, session management, and structured permission control.

Download · Features · Screenshots

---

English | 中文

</div>

Why TOKENICODE?

| | | | | |:---:|:---:|:---:|:---:| | 🔑 Bring Your Own API | 🇨🇳 China-Ready | 🛡️ SDK Control Protocol | 🎨 Beautiful & Native | | 6 preset providers + custom endpoints. One-click config import/export. | Gitee mirror for updates, pre-configured Chinese API providers (DeepSeek, Zhipu GLM, Qwen, Kimi, MiniMax). | Structured permission approval — 4 work modes (code / ask / plan / bypass) with typed allow/deny over stdin. | Tauri 2 native desktop experience. Multiple themes × light/dark mode. |

<div align="center">

</div>

Installation

Prerequisites

• Claude Code CLI — TOKENICODE can auto-detect, install, and authenticate it for you on first launch

macOS

Download the latest .dmg from Releases, open it, and drag TOKENICODE to your Applications folder.

Available for both Apple Silicon (arm64) and Intel (x86_64). The app is code-signed and notarized — no extra steps needed.

Windows

Download the latest .msi or .exe installer from Releases and run it. Requires Windows 10 or later.

Linux

Download the .AppImage, .deb, or .rpm package from Releases. Requires WebKit2GTK.

China users: If GitHub downloads are slow, grab releases from the Gitee mirror. The app also checks Gitee for updates when GitHub is unreachable.

Getting Started

1. Open TOKENICODE — if the Claude Code CLI is not installed, the setup wizard guides you through installation and login, no terminal required
2. Select a project folder from the welcome screen or input bar
3. Start chatting — the Claude CLI session runs seamlessly in the background
4. Configure your API (optional) — open Settings → API Provider to add third-party keys or import a config

Features

Third-Party API Providers

Use Claude through any compatible API endpoint — not just Anthropic's official API.

• 6 preset providers in a visual 2×3 grid: Anthropic, DeepSeek, Zhipu GLM, Qwen Coder, Kimi k2, MiniMax
• Custom endpoints with Anthropic or OpenAI-compatible format
• One-click JSON import to share configs across machines
• Quick connection test with response time display (e.g. 326ms)
• Per-card export for easy backup

China-Ready

TOKENICODE is designed to work well behind the Great Firewall:

• Gitee update mirror — when GitHub is unreachable, auto-update falls back to Gitee
• Chinese API presets — DeepSeek, Zhipu GLM, Qwen Coder, Kimi k2, MiniMax are pre-configured with correct endpoints
• Proxy auto-detection — inherits system proxy environment variables on macOS
• Full Chinese UI — switch to Chinese from Settings at any time

SDK Control Protocol

TOKENICODE v0.8.0 uses Claude CLI's native control protocol for permission handling:

• Permission requests flow as structured JSON through stdout
• Responses are typed allow / deny messages via stdin
• Switch between code, ask, plan, and bypass modes at runtime
• Change model on-the-fly without restarting the session

Streaming Chat

Real-time conversation with Claude Code using NDJSON streaming. The UI shows distinct phases:

• Thinking — spinner animation while Claude reasons
• Writing — blue indicator as Claude composes its response
• Tool execution — animated display of file edits, shell commands, and more

Session Management

All Claude Code sessions are persisted and fully manageable:

• Pin sessions to the top of each project group
• Archive sessions to hide them from the default view
• Batch operations — multi-select for bulk delete or archive
• Date separators — Today / Yesterday / This Week / Earlier
• Smart collapse — only the active project group auto-expands
• AI title generation — automatic short title after the first reply
• Undo delete — 5-second recovery window for accidental deletions
• Search with a running-sessions-only filter
• Export to Markdown or JSON, rename, resume any session

File Explorer & Editor

Browse your project tree with full file management:

• SVG file icons for 20+ file types with color coding
• Change markers on files modified by Claude
• Create new files and folders via right-click context menu
• Flat search with relative path context
• Built-in CodeMirror editor with syntax highlighting for 12+ languages (Python, TypeScript, Rust, Go, Java, C++, SQL, Markdown, JSON, YAML, HTML, CSS, XML)
• Double-click to open in VS Code

Checkpoints & Rewind

File restoration uses Claude CLI's native checkpoint system:

• Restore code, conversation, or both independently
• Powered by --replay-user-messages and CLI file checkpointing
• Integrated restore button in the conversation timeline

Slash Commands & Command Palette

• Full Claude Code slash command support with autocomplete popover
• Shows built-in commands, project commands, and skills
• Command Palette (Cmd+K / Ctrl+K) for quick access to new chats, panel toggles, theme switching, and settings

Agent Activity

Monitor Claude's sub-agents in real-time — see which agents are spawning, thinking, running tools, or completed.

Skills & MCP

Manage Claude Code skills (edit, enable/disable, right-click context menu) and MCP server connections directly from the UI.

Customization

• Themes — multiple accent colors with light, dark, and system-following modes
• Languages — full Chinese and English support, switchable from Settings
• Font size — adjustable with keyboard shortcuts
• Thinking depth — 5-level thinking depth control

Keyboard Shortcuts

| Shortcut | Action | |----------|--------| | Cmd+K | Open command palette | | Cmd+N | New chat | | Cmd+B | Toggle sidebar | | Cmd+. | Toggle file panel | | Cmd+, | Open settings | | Cmd+Enter | Send message | | Cmd++ / Cmd+- | Adjust font size | | Cmd+0 | Reset font size | | Escape | Close overlay / cancel |

On Windows/Linux, replace Cmd with Ctrl.

Tech Stack

| Layer | Technology | |-------|-----------| | Desktop framework | Tauri 2 | | Frontend | React 19 + TypeScript 5.8 | | Styling | Tailwind CSS 4 | | State management | Zustand 5 (10 stores) | | Code editor | CodeMirror 6 | | Bundler | Vite 7 | | Backend | Rust (tokio, reqwest, serde, notify) | | Package manager | pnpm |

Screenshots

Main Interface — Three-panel layout with sidebar, chat, and file explorer

Streaming Chat — Real-time thinking, writing, and tool execution

Session Management — Pin, archive, date groups, batch operations

File Explorer — SVG icons, change markers, flat search

File Editing — Built-in CodeMirror editor with syntax highlighting

Plan Mode — SDK permission approval cards

Agent Activity — Monitor sub-agent tasks in real-time

Skills Management — Right-click context menu for skills

HTML Preview — Live preview of HTML files

Settings — Four-tab layout with theme preview cards

Contributing

Contributions are welcome! Please open an issue or pull request.

• Fork the repo and create a feature branch: git checkout -b feat/my-feature
• Commit with conventional format: feat: add new feature
• Push and open a Pull Request

License

This project is licensed under the Apache License 2.0 — see the LICENSE file for details.

Acknowledgments

• Anthropic for Claude Code CLI
• Tauri for the native desktop framework
• React and the open-source ecosystem

---

<div align="center">

If you find TOKENICODE useful, please consider giving it a ⭐!

</div>