agentgui 1.0.575 → 1.0.576
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +98 -0
- package/docs/index.html +249 -93
- package/docs/screenshot-chat.png +0 -0
- package/docs/screenshot-conversation.png +0 -0
- package/docs/screenshot-files.png +0 -0
- package/docs/screenshot-main.png +0 -0
- package/docs/screenshot-terminal.png +0 -0
- package/docs/screenshot-tools-popup.png +0 -0
- package/index.html +250 -0
- package/package.json +1 -1
- package/readme.md +150 -89
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# AgentGUI
|
|
2
|
+
|
|
3
|
+
Multi-agent GUI client for AI coding agents (Claude Code, Gemini CLI, OpenCode, Goose, etc.) with real-time streaming, WebSocket sync, and SQLite persistence.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
## Features
|
|
8
|
+
|
|
9
|
+
- **Real-time Agent Execution** - Watch agents work with streaming output and tool calls
|
|
10
|
+
- **Multi-Agent Support** - Switch between Claude Code, Gemini CLI, OpenCode, Kilo, and more
|
|
11
|
+
- **Session Management** - Full conversation history with SQLite persistence
|
|
12
|
+
- **WebSocket Sync** - Live updates across multiple clients
|
|
13
|
+
- **Voice Integration** - Speech-to-text and text-to-speech support
|
|
14
|
+
- **Tool Management** - Install and update agent plugins from the UI
|
|
15
|
+
- **File Browser** - Explore and manage conversation files
|
|
16
|
+
|
|
17
|
+
### Screenshots
|
|
18
|
+
|
|
19
|
+
| Main Interface | Chat View |
|
|
20
|
+
|----------------|-----------|
|
|
21
|
+
|  |  |
|
|
22
|
+
|
|
23
|
+
| Files Browser | Terminal View |
|
|
24
|
+
|---------------|---------------|
|
|
25
|
+
|  |  |
|
|
26
|
+
|
|
27
|
+
| Tools Management | Conversation |
|
|
28
|
+
|------------------|--------------|
|
|
29
|
+
|  |  |
|
|
30
|
+
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install
|
|
35
|
+
npm run dev
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Server starts on `http://localhost:3000/gm/`
|
|
39
|
+
|
|
40
|
+
## System Requirements
|
|
41
|
+
|
|
42
|
+
- Node.js 18+
|
|
43
|
+
- SQLite 3
|
|
44
|
+
- Modern browser (Chrome, Firefox, Safari, Edge)
|
|
45
|
+
|
|
46
|
+
## Architecture
|
|
47
|
+
|
|
48
|
+
```
|
|
49
|
+
server.js HTTP server + WebSocket + all API routes
|
|
50
|
+
database.js SQLite setup (WAL mode), schema, query functions
|
|
51
|
+
lib/claude-runner.js Agent framework - spawns CLI processes, parses stream-json output
|
|
52
|
+
lib/acp-manager.js ACP tool lifecycle - auto-starts HTTP servers, restart on crash
|
|
53
|
+
lib/speech.js Speech-to-text and text-to-speech via @huggingface/transformers
|
|
54
|
+
static/index.html Main HTML shell
|
|
55
|
+
static/app.js App initialization
|
|
56
|
+
static/js/client.js Main client logic
|
|
57
|
+
static/js/conversations.js Conversation management
|
|
58
|
+
static/js/streaming-renderer.js Renders Claude streaming events as HTML
|
|
59
|
+
static/js/websocket-manager.js WebSocket connection handling
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Key Details
|
|
63
|
+
|
|
64
|
+
- Agent discovery scans PATH for known CLI binaries at startup
|
|
65
|
+
- Database lives at `~/.gmgui/data.db`
|
|
66
|
+
- WebSocket endpoint at `/gm/sync`
|
|
67
|
+
- ACP tools (OpenCode, Kilo) auto-launch as HTTP servers on startup
|
|
68
|
+
|
|
69
|
+
## REST API
|
|
70
|
+
|
|
71
|
+
All routes prefixed with `/gm`:
|
|
72
|
+
|
|
73
|
+
- `GET /api/conversations` - List conversations
|
|
74
|
+
- `POST /api/conversations` - Create conversation
|
|
75
|
+
- `GET /api/conversations/:id` - Get conversation with streaming status
|
|
76
|
+
- `POST /api/conversations/:id/messages` - Send message
|
|
77
|
+
- `GET /api/agents` - List discovered agents
|
|
78
|
+
- `GET /api/tools` - List detected tools with installation status
|
|
79
|
+
- `POST /api/tools/:id/install` - Install tool
|
|
80
|
+
- `POST /api/stt` - Speech-to-text
|
|
81
|
+
- `POST /api/tts` - Text-to-speech
|
|
82
|
+
|
|
83
|
+
## Environment Variables
|
|
84
|
+
|
|
85
|
+
- `PORT` - Server port (default: 3000)
|
|
86
|
+
- `BASE_URL` - URL prefix (default: /gm)
|
|
87
|
+
- `STARTUP_CWD` - Working directory passed to agents
|
|
88
|
+
|
|
89
|
+
## Development
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
npm run dev # Start with watch mode
|
|
93
|
+
npm start # Production mode
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT
|
package/docs/index.html
CHANGED
|
@@ -1,104 +1,260 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>AgentGUI - Multi-Agent GUI Client</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
9
|
+
|
|
10
|
+
body {
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
line-height: 1.6;
|
|
13
|
+
color: #333;
|
|
14
|
+
background: #f9fafb;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.hero {
|
|
18
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
19
|
+
color: white;
|
|
20
|
+
padding: 4rem 2rem;
|
|
21
|
+
text-align: center;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.hero h1 {
|
|
25
|
+
font-size: 3rem;
|
|
26
|
+
margin-bottom: 1rem;
|
|
27
|
+
font-weight: 700;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.hero p {
|
|
31
|
+
font-size: 1.25rem;
|
|
32
|
+
opacity: 0.9;
|
|
33
|
+
max-width: 600px;
|
|
34
|
+
margin: 0 auto 2rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.cta-button {
|
|
38
|
+
display: inline-block;
|
|
39
|
+
background: white;
|
|
40
|
+
color: #667eea;
|
|
41
|
+
padding: 1rem 2rem;
|
|
42
|
+
border-radius: 8px;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
font-weight: 600;
|
|
45
|
+
transition: transform 0.2s;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.cta-button:hover {
|
|
49
|
+
transform: translateY(-2px);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.container {
|
|
53
|
+
max-width: 1200px;
|
|
54
|
+
margin: 0 auto;
|
|
55
|
+
padding: 3rem 2rem;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.section-title {
|
|
59
|
+
font-size: 2rem;
|
|
60
|
+
text-align: center;
|
|
61
|
+
margin-bottom: 2rem;
|
|
62
|
+
color: #1f2937;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.features-grid {
|
|
66
|
+
display: grid;
|
|
67
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
68
|
+
gap: 2rem;
|
|
69
|
+
margin-bottom: 3rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.feature-card {
|
|
73
|
+
background: white;
|
|
74
|
+
padding: 2rem;
|
|
75
|
+
border-radius: 12px;
|
|
76
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
77
|
+
transition: transform 0.2s;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.feature-card:hover {
|
|
81
|
+
transform: translateY(-4px);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.feature-icon {
|
|
85
|
+
font-size: 2.5rem;
|
|
86
|
+
margin-bottom: 1rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.feature-card h3 {
|
|
90
|
+
font-size: 1.25rem;
|
|
91
|
+
margin-bottom: 0.75rem;
|
|
92
|
+
color: #667eea;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.screenshots {
|
|
96
|
+
display: grid;
|
|
97
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
98
|
+
gap: 1.5rem;
|
|
99
|
+
margin: 2rem 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.screenshot-card {
|
|
103
|
+
background: white;
|
|
104
|
+
border-radius: 8px;
|
|
105
|
+
overflow: hidden;
|
|
106
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.screenshot-card img {
|
|
110
|
+
width: 100%;
|
|
111
|
+
display: block;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.screenshot-card p {
|
|
115
|
+
padding: 1rem;
|
|
116
|
+
text-align: center;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
color: #667eea;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.code-block {
|
|
122
|
+
background: #1f2937;
|
|
123
|
+
color: #f9fafb;
|
|
124
|
+
padding: 1.5rem;
|
|
125
|
+
border-radius: 8px;
|
|
126
|
+
overflow-x: auto;
|
|
127
|
+
margin: 1.5rem 0;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.code-block code {
|
|
131
|
+
font-family: 'Monaco', 'Menlo', monospace;
|
|
132
|
+
font-size: 0.9rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
footer {
|
|
136
|
+
background: #1f2937;
|
|
137
|
+
color: white;
|
|
138
|
+
text-align: center;
|
|
139
|
+
padding: 2rem;
|
|
140
|
+
margin-top: 4rem;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@media (max-width: 768px) {
|
|
144
|
+
.hero h1 { font-size: 2rem; }
|
|
145
|
+
.hero p { font-size: 1rem; }
|
|
146
|
+
.features-grid { grid-template-columns: 1fr; }
|
|
147
|
+
.screenshots { grid-template-columns: 1fr; }
|
|
148
|
+
}
|
|
149
|
+
</style>
|
|
9
150
|
</head>
|
|
10
151
|
<body>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<path d="M32 16L44 32L32 48L20 32L32 16Z" stroke="white" stroke-width="3" fill="none"/>
|
|
17
|
-
<circle cx="32" cy="32" r="8" fill="white"/>
|
|
18
|
-
<defs>
|
|
19
|
-
<linearGradient id="gradient" x1="0" y1="0" x2="64" y2="64">
|
|
20
|
-
<stop offset="0%" stop-color="#6366f1"/>
|
|
21
|
-
<stop offset="100%" stop-color="#8b5cf6"/>
|
|
22
|
-
</linearGradient>
|
|
23
|
-
</defs>
|
|
24
|
-
</svg>
|
|
25
|
-
</div>
|
|
26
|
-
<h1>AgentGUI</h1>
|
|
27
|
-
<p class="subtitle">Multi-agent ACP client with real-time communication</p>
|
|
28
|
-
<div class="stats">
|
|
29
|
-
<div class="stat-item">
|
|
30
|
-
<span class="stat-value" id="weekly-downloads">Loading...</span>
|
|
31
|
-
<span class="stat-label">Weekly Downloads</span>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
<div class="cta-buttons">
|
|
35
|
-
<a href="https://github.com/AnEntrypoint/agentgui" target="_blank" class="btn btn-primary" id="star-btn">
|
|
36
|
-
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
37
|
-
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
38
|
-
</svg>
|
|
39
|
-
Star on GitHub
|
|
40
|
-
</a>
|
|
41
|
-
<a href="https://github.com/AnEntrypoint/agentgui#readme" target="_blank" class="btn btn-secondary">
|
|
42
|
-
View Documentation
|
|
43
|
-
</a>
|
|
44
|
-
</div>
|
|
45
|
-
</header>
|
|
152
|
+
<div class="hero">
|
|
153
|
+
<h1>AgentGUI</h1>
|
|
154
|
+
<p>Multi-agent GUI client for AI coding agents with real-time streaming, WebSocket sync, and SQLite persistence</p>
|
|
155
|
+
<a href="https://github.com/AnEntrypoint/agentgui" class="cta-button">View on GitHub</a>
|
|
156
|
+
</div>
|
|
46
157
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
158
|
+
<div class="container">
|
|
159
|
+
<h2 class="section-title">Features</h2>
|
|
160
|
+
<div class="features-grid">
|
|
161
|
+
<div class="feature-card">
|
|
162
|
+
<div class="feature-icon">⚡</div>
|
|
163
|
+
<h3>Real-time Streaming</h3>
|
|
164
|
+
<p>Watch agents work with live output, tool calls, and file operations in real-time.</p>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div class="feature-card">
|
|
168
|
+
<div class="feature-icon">🤖</div>
|
|
169
|
+
<h3>Multi-Agent Support</h3>
|
|
170
|
+
<p>Switch between Claude Code, Gemini CLI, OpenCode, Kilo, and more from one interface.</p>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<div class="feature-card">
|
|
174
|
+
<div class="feature-icon">💾</div>
|
|
175
|
+
<h3>Session Persistence</h3>
|
|
176
|
+
<p>Full conversation history with SQLite database and session management.</p>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div class="feature-card">
|
|
180
|
+
<div class="feature-icon">🔄</div>
|
|
181
|
+
<h3>WebSocket Sync</h3>
|
|
182
|
+
<p>Live updates across multiple clients with automatic reconnection.</p>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div class="feature-card">
|
|
186
|
+
<div class="feature-icon">🎤</div>
|
|
187
|
+
<h3>Voice Integration</h3>
|
|
188
|
+
<p>Speech-to-text and text-to-speech support powered by Transformers.js.</p>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="feature-card">
|
|
192
|
+
<div class="feature-icon">🛠️</div>
|
|
193
|
+
<h3>Tool Management</h3>
|
|
194
|
+
<p>Install and update agent plugins directly from the UI.</p>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<h2 class="section-title">Screenshots</h2>
|
|
199
|
+
<div class="screenshots">
|
|
200
|
+
<div class="screenshot-card">
|
|
201
|
+
<img src="docs/screenshot-main.png" alt="Main Interface">
|
|
202
|
+
<p>Main Interface</p>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="screenshot-card">
|
|
205
|
+
<img src="docs/screenshot-chat.png" alt="Chat View">
|
|
206
|
+
<p>Chat View</p>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="screenshot-card">
|
|
209
|
+
<img src="docs/screenshot-files.png" alt="Files Browser">
|
|
210
|
+
<p>Files Browser</p>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="screenshot-card">
|
|
213
|
+
<img src="docs/screenshot-terminal.png" alt="Terminal View">
|
|
214
|
+
<p>Terminal View</p>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="screenshot-card">
|
|
217
|
+
<img src="docs/screenshot-tools-popup.png" alt="Tools Management">
|
|
218
|
+
<p>Tools Management</p>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="screenshot-card">
|
|
221
|
+
<img src="docs/screenshot-conversation.png" alt="Conversation">
|
|
222
|
+
<p>Conversation</p>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<h2 class="section-title">Quick Start</h2>
|
|
227
|
+
<div class="code-block">
|
|
228
|
+
<code>npm install
|
|
229
|
+
npm run dev
|
|
82
230
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</
|
|
231
|
+
# Server starts on http://localhost:3000/gm/</code>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<h2 class="section-title">System Requirements</h2>
|
|
235
|
+
<div class="feature-card" style="max-width: 600px; margin: 0 auto;">
|
|
236
|
+
<ul style="list-style-position: inside;">
|
|
237
|
+
<li>Node.js 18+</li>
|
|
238
|
+
<li>SQLite 3</li>
|
|
239
|
+
<li>Modern browser (Chrome, Firefox, Safari, Edge)</li>
|
|
240
|
+
</ul>
|
|
241
|
+
</div>
|
|
91
242
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
243
|
+
<h2 class="section-title">Architecture</h2>
|
|
244
|
+
<div class="code-block">
|
|
245
|
+
<code>server.js HTTP server + WebSocket + API routes
|
|
246
|
+
database.js SQLite (WAL mode), schema, queries
|
|
247
|
+
lib/claude-runner.js Agent framework - CLI process spawner
|
|
248
|
+
lib/acp-manager.js ACP tool lifecycle management
|
|
249
|
+
lib/speech.js STT/TTS via @huggingface/transformers
|
|
250
|
+
static/js/client.js Main client logic
|
|
251
|
+
static/js/streaming-renderer.js Event rendering</code>
|
|
100
252
|
</div>
|
|
253
|
+
</div>
|
|
101
254
|
|
|
102
|
-
|
|
255
|
+
<footer>
|
|
256
|
+
<p>© 2024 AgentGUI. MIT License.</p>
|
|
257
|
+
<p><a href="https://github.com/AnEntrypoint/agentgui" style="color: #667eea;">GitHub</a></p>
|
|
258
|
+
</footer>
|
|
103
259
|
</body>
|
|
104
|
-
</html>
|
|
260
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/index.html
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="AgentGUI - Multi-agent GUI client for AI coding agents with real-time streaming">
|
|
7
|
+
<title>AgentGUI - Multi-Agent AI Coding Platform</title>
|
|
8
|
+
<style>
|
|
9
|
+
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
10
|
+
body {
|
|
11
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
12
|
+
line-height: 1.6;
|
|
13
|
+
color: #333;
|
|
14
|
+
background: #f5f5f5;
|
|
15
|
+
}
|
|
16
|
+
.hero {
|
|
17
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
18
|
+
color: white;
|
|
19
|
+
padding: 80px 20px;
|
|
20
|
+
text-align: center;
|
|
21
|
+
}
|
|
22
|
+
.hero h1 {
|
|
23
|
+
font-size: 3rem;
|
|
24
|
+
margin-bottom: 20px;
|
|
25
|
+
font-weight: 700;
|
|
26
|
+
}
|
|
27
|
+
.hero p {
|
|
28
|
+
font-size: 1.25rem;
|
|
29
|
+
margin-bottom: 30px;
|
|
30
|
+
opacity: 0.95;
|
|
31
|
+
}
|
|
32
|
+
.cta-button {
|
|
33
|
+
display: inline-block;
|
|
34
|
+
padding: 15px 40px;
|
|
35
|
+
background: white;
|
|
36
|
+
color: #667eea;
|
|
37
|
+
text-decoration: none;
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
font-size: 1.1rem;
|
|
41
|
+
transition: transform 0.2s;
|
|
42
|
+
}
|
|
43
|
+
.cta-button:hover {
|
|
44
|
+
transform: translateY(-2px);
|
|
45
|
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
46
|
+
}
|
|
47
|
+
.container {
|
|
48
|
+
max-width: 1200px;
|
|
49
|
+
margin: 0 auto;
|
|
50
|
+
padding: 60px 20px;
|
|
51
|
+
}
|
|
52
|
+
.features {
|
|
53
|
+
display: grid;
|
|
54
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
55
|
+
gap: 30px;
|
|
56
|
+
margin: 60px 0;
|
|
57
|
+
}
|
|
58
|
+
.feature-card {
|
|
59
|
+
background: white;
|
|
60
|
+
padding: 30px;
|
|
61
|
+
border-radius: 12px;
|
|
62
|
+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
63
|
+
transition: transform 0.2s;
|
|
64
|
+
}
|
|
65
|
+
.feature-card:hover {
|
|
66
|
+
transform: translateY(-5px);
|
|
67
|
+
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
|
68
|
+
}
|
|
69
|
+
.feature-icon {
|
|
70
|
+
font-size: 2.5rem;
|
|
71
|
+
margin-bottom: 15px;
|
|
72
|
+
}
|
|
73
|
+
.feature-card h3 {
|
|
74
|
+
color: #667eea;
|
|
75
|
+
margin-bottom: 10px;
|
|
76
|
+
font-size: 1.5rem;
|
|
77
|
+
}
|
|
78
|
+
.screenshots {
|
|
79
|
+
background: white;
|
|
80
|
+
padding: 60px 20px;
|
|
81
|
+
margin: 40px 0;
|
|
82
|
+
}
|
|
83
|
+
.screenshot-grid {
|
|
84
|
+
display: grid;
|
|
85
|
+
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
|
86
|
+
gap: 30px;
|
|
87
|
+
max-width: 1200px;
|
|
88
|
+
margin: 0 auto;
|
|
89
|
+
}
|
|
90
|
+
.screenshot-card {
|
|
91
|
+
border-radius: 8px;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
94
|
+
}
|
|
95
|
+
.screenshot-card img {
|
|
96
|
+
width: 100%;
|
|
97
|
+
display: block;
|
|
98
|
+
}
|
|
99
|
+
.screenshot-caption {
|
|
100
|
+
padding: 15px;
|
|
101
|
+
background: #f9f9f9;
|
|
102
|
+
text-align: center;
|
|
103
|
+
font-weight: 600;
|
|
104
|
+
color: #555;
|
|
105
|
+
}
|
|
106
|
+
.code-block {
|
|
107
|
+
background: #2d2d2d;
|
|
108
|
+
color: #f8f8f2;
|
|
109
|
+
padding: 20px;
|
|
110
|
+
border-radius: 8px;
|
|
111
|
+
font-family: 'Courier New', monospace;
|
|
112
|
+
margin: 20px 0;
|
|
113
|
+
overflow-x: auto;
|
|
114
|
+
}
|
|
115
|
+
.section-title {
|
|
116
|
+
text-align: center;
|
|
117
|
+
font-size: 2.5rem;
|
|
118
|
+
color: #333;
|
|
119
|
+
margin-bottom: 40px;
|
|
120
|
+
}
|
|
121
|
+
footer {
|
|
122
|
+
background: #2d2d2d;
|
|
123
|
+
color: white;
|
|
124
|
+
text-align: center;
|
|
125
|
+
padding: 40px 20px;
|
|
126
|
+
margin-top: 60px;
|
|
127
|
+
}
|
|
128
|
+
footer a {
|
|
129
|
+
color: #667eea;
|
|
130
|
+
text-decoration: none;
|
|
131
|
+
}
|
|
132
|
+
footer a:hover {
|
|
133
|
+
text-decoration: underline;
|
|
134
|
+
}
|
|
135
|
+
@media (max-width: 768px) {
|
|
136
|
+
.hero h1 { font-size: 2rem; }
|
|
137
|
+
.hero p { font-size: 1rem; }
|
|
138
|
+
.screenshot-grid { grid-template-columns: 1fr; }
|
|
139
|
+
}
|
|
140
|
+
</style>
|
|
141
|
+
</head>
|
|
142
|
+
<body>
|
|
143
|
+
<div class="hero">
|
|
144
|
+
<h1>🤖 AgentGUI</h1>
|
|
145
|
+
<p>Multi-agent GUI client for AI coding agents with real-time streaming</p>
|
|
146
|
+
<a href="#quickstart" class="cta-button">Get Started</a>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<div class="container">
|
|
150
|
+
<h2 class="section-title">✨ Features</h2>
|
|
151
|
+
<div class="features">
|
|
152
|
+
<div class="feature-card">
|
|
153
|
+
<div class="feature-icon">🤖</div>
|
|
154
|
+
<h3>Multi-Agent Support</h3>
|
|
155
|
+
<p>Works with Claude Code, Gemini CLI, OpenCode, Goose, Kilo, Codex, and more. Auto-discovers installed tools.</p>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="feature-card">
|
|
158
|
+
<div class="feature-icon">📡</div>
|
|
159
|
+
<h3>Real-Time Streaming</h3>
|
|
160
|
+
<p>Live execution visualization with WebSocket sync. Watch your AI agents work in real-time.</p>
|
|
161
|
+
</div>
|
|
162
|
+
<div class="feature-card">
|
|
163
|
+
<div class="feature-icon">💾</div>
|
|
164
|
+
<h3>Persistent Storage</h3>
|
|
165
|
+
<p>SQLite-based conversation and session history. Never lose your work or chat history.</p>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="feature-card">
|
|
168
|
+
<div class="feature-icon">🎤</div>
|
|
169
|
+
<h3>Voice I/O</h3>
|
|
170
|
+
<p>Built-in speech-to-text and text-to-speech powered by HuggingFace transformers.</p>
|
|
171
|
+
</div>
|
|
172
|
+
<div class="feature-card">
|
|
173
|
+
<div class="feature-icon">📁</div>
|
|
174
|
+
<h3>File Browser</h3>
|
|
175
|
+
<p>Integrated file system explorer with drag-drop upload and syntax highlighting.</p>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="feature-card">
|
|
178
|
+
<div class="feature-icon">🔧</div>
|
|
179
|
+
<h3>Tool Manager</h3>
|
|
180
|
+
<p>Install and update agent plugins directly from the UI. One-click setup.</p>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div class="screenshots">
|
|
186
|
+
<h2 class="section-title">📸 Screenshots</h2>
|
|
187
|
+
<div class="screenshot-grid">
|
|
188
|
+
<div class="screenshot-card">
|
|
189
|
+
<img src="docs/screenshot-main.png" alt="Main Interface" loading="lazy">
|
|
190
|
+
<div class="screenshot-caption">Main Interface</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="screenshot-card">
|
|
193
|
+
<img src="docs/screenshot-chat.png" alt="Chat View" loading="lazy">
|
|
194
|
+
<div class="screenshot-caption">Chat & Conversation View</div>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="screenshot-card">
|
|
197
|
+
<img src="docs/screenshot-files.png" alt="Files Browser" loading="lazy">
|
|
198
|
+
<div class="screenshot-caption">File System Browser</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="screenshot-card">
|
|
201
|
+
<img src="docs/screenshot-terminal.png" alt="Terminal" loading="lazy">
|
|
202
|
+
<div class="screenshot-caption">Terminal & Execution Output</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<div class="container" id="quickstart">
|
|
208
|
+
<h2 class="section-title">🚀 Quick Start</h2>
|
|
209
|
+
<div class="code-block">
|
|
210
|
+
# Install globally<br>
|
|
211
|
+
npm install -g agentgui<br>
|
|
212
|
+
<br>
|
|
213
|
+
# Run the server<br>
|
|
214
|
+
agentgui<br>
|
|
215
|
+
<br>
|
|
216
|
+
# Or use npx<br>
|
|
217
|
+
npx agentgui
|
|
218
|
+
</div>
|
|
219
|
+
<p style="text-align: center; margin-top: 20px; font-size: 1.1rem;">
|
|
220
|
+
Server starts on <strong>http://localhost:3000</strong> and redirects to <strong>/gm/</strong>
|
|
221
|
+
</p>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<div class="container">
|
|
225
|
+
<h2 class="section-title">🏗️ Architecture</h2>
|
|
226
|
+
<div class="features">
|
|
227
|
+
<div class="feature-card">
|
|
228
|
+
<h3>Agent Framework</h3>
|
|
229
|
+
<p>Spawns CLI processes, parses stream-json output, manages lifecycle</p>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="feature-card">
|
|
232
|
+
<h3>SQLite Storage</h3>
|
|
233
|
+
<p>WAL mode, schema with conversations, messages, events, sessions</p>
|
|
234
|
+
</div>
|
|
235
|
+
<div class="feature-card">
|
|
236
|
+
<h3>WebSocket Sync</h3>
|
|
237
|
+
<p>Real-time bi-directional sync with subscribe/unsubscribe pattern</p>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="feature-card">
|
|
240
|
+
<h3>ACP Protocol</h3>
|
|
241
|
+
<p>Auto-starts OpenCode/Kilo HTTP servers, health checks, crash recovery</p>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<footer>
|
|
247
|
+
<p>© 2024 AgentGUI | <a href="https://github.com/AnEntrypoint/agentgui">GitHub</a> | <a href="https://www.npmjs.com/package/agentgui">npm</a> | MIT License</p>
|
|
248
|
+
</footer>
|
|
249
|
+
</body>
|
|
250
|
+
</html>
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,92 +1,153 @@
|
|
|
1
1
|
# AgentGUI
|
|
2
2
|
|
|
3
3
|
[](https://anentrypoint.github.io/agentgui/)
|
|
4
|
-
[](https://www.npmjs.com/package/agentgui)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
**Multi-agent GUI client for AI coding agents** with real-time streaming, WebSocket sync, and SQLite persistence.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- **🤖 Multi-Agent Support** - Claude Code, Gemini CLI, OpenCode, Goose, Kilo, and more
|
|
14
|
+
- **📡 Real-Time Streaming** - Live execution visualization with WebSocket sync
|
|
15
|
+
- **💾 Persistent Storage** - SQLite-based conversation and session history
|
|
16
|
+
- **🎤 Voice I/O** - Built-in speech-to-text and text-to-speech with @huggingface/transformers
|
|
17
|
+
- **📁 File Browser** - Integrated file system explorer with drag-drop upload
|
|
18
|
+
- **🔧 Tool Manager** - Install and update agent plugins directly from UI
|
|
19
|
+
- **🎨 Modern UI** - Dark/light themes with responsive design
|
|
20
|
+
- **🔌 ACP Protocol** - Auto-discovery and lifecycle management for ACP tools
|
|
21
|
+
|
|
22
|
+
## 📸 Screenshots
|
|
23
|
+
|
|
24
|
+
<table>
|
|
25
|
+
<tr>
|
|
26
|
+
<td><img src="docs/screenshot-chat.png" alt="Chat View" width="400"/><br/><em>Chat & Conversation View</em></td>
|
|
27
|
+
<td><img src="docs/screenshot-files.png" alt="Files Browser" width="400"/><br/><em>File System Browser</em></td>
|
|
28
|
+
</tr>
|
|
29
|
+
<tr>
|
|
30
|
+
<td><img src="docs/screenshot-terminal.png" alt="Terminal" width="400"/><br/><em>Terminal & Execution Output</em></td>
|
|
31
|
+
<td><img src="docs/screenshot-tools-popup.png" alt="Tools" width="400"/><br/><em>Tool Management</em></td>
|
|
32
|
+
</tr>
|
|
33
|
+
</table>
|
|
34
|
+
|
|
35
|
+
## 🚀 Quick Start
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
# Install globally
|
|
39
|
+
npm install -g agentgui
|
|
40
|
+
|
|
41
|
+
# Run the server
|
|
42
|
+
agentgui
|
|
43
|
+
|
|
44
|
+
# Or use npx
|
|
45
|
+
npx agentgui
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Server starts on `http://localhost:3000` and redirects to `/gm/`.
|
|
49
|
+
|
|
50
|
+
## 📋 System Requirements
|
|
51
|
+
|
|
52
|
+
- **Node.js**: v18+ or Bun v1.0+
|
|
53
|
+
- **OS**: Linux, macOS, or Windows
|
|
54
|
+
- **RAM**: 2GB+ recommended
|
|
55
|
+
- **Disk**: 500MB for voice models (auto-downloaded)
|
|
56
|
+
|
|
57
|
+
## 🏗️ Architecture
|
|
58
|
+
|
|
59
|
+
```
|
|
60
|
+
server.js HTTP server + WebSocket + API routes
|
|
61
|
+
database.js SQLite (WAL mode) + queries
|
|
62
|
+
lib/claude-runner.js Agent framework - spawns CLI processes
|
|
63
|
+
lib/acp-manager.js ACP tool lifecycle management
|
|
64
|
+
lib/speech.js Speech-to-text + text-to-speech
|
|
65
|
+
static/ Frontend (vanilla JS, no build step)
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Key Components
|
|
69
|
+
|
|
70
|
+
- **Agent Discovery**: Scans PATH for known CLI binaries at startup
|
|
71
|
+
- **Database**: `~/.gmgui/data.db` - conversations, messages, events, sessions, stream chunks
|
|
72
|
+
- **WebSocket**: Real-time sync at `BASE_URL/sync` with subscribe/unsubscribe
|
|
73
|
+
- **ACP Tools**: Auto-launches OpenCode (port 18100) and Kilo (port 18101) as HTTP servers
|
|
74
|
+
|
|
75
|
+
## 🔌 API Endpoints
|
|
76
|
+
|
|
77
|
+
All routes prefixed with `BASE_URL` (default `/gm`):
|
|
78
|
+
|
|
79
|
+
### Conversations
|
|
80
|
+
- `GET /api/conversations` - List all conversations
|
|
81
|
+
- `POST /api/conversations` - Create new conversation
|
|
82
|
+
- `GET /api/conversations/:id` - Get conversation details
|
|
83
|
+
- `POST /api/conversations/:id/messages` - Send message
|
|
84
|
+
- `POST /api/conversations/:id/stream` - Start streaming execution
|
|
85
|
+
|
|
86
|
+
### Tools
|
|
87
|
+
- `GET /api/tools` - List detected tools with installation status
|
|
88
|
+
- `POST /api/tools/:id/install` - Install tool
|
|
89
|
+
- `POST /api/tools/:id/update` - Update tool
|
|
90
|
+
- `POST /api/tools/update` - Batch update all tools
|
|
91
|
+
|
|
92
|
+
### Voice
|
|
93
|
+
- `POST /api/stt` - Speech-to-text (raw audio)
|
|
94
|
+
- `POST /api/tts` - Text-to-speech
|
|
95
|
+
- `GET /api/speech-status` - Model loading status
|
|
96
|
+
|
|
97
|
+
## 🎙️ Voice Models
|
|
98
|
+
|
|
99
|
+
Speech models (~470MB) are auto-downloaded on first launch:
|
|
100
|
+
- **Whisper Base** (~280MB) - STT from HuggingFace
|
|
101
|
+
- **TTS Models** (~190MB) - Custom text-to-speech
|
|
102
|
+
|
|
103
|
+
Models cached at `~/.gmgui/models/`.
|
|
104
|
+
|
|
105
|
+
## 🛠️ Development
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
# Clone repository
|
|
109
|
+
git clone https://github.com/AnEntrypoint/agentgui.git
|
|
110
|
+
cd agentgui
|
|
111
|
+
|
|
112
|
+
# Install dependencies
|
|
113
|
+
npm install
|
|
114
|
+
|
|
115
|
+
# Run dev server with watch mode
|
|
116
|
+
npm run dev
|
|
117
|
+
|
|
118
|
+
# Build portable binaries
|
|
119
|
+
npm run build:portable
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## 📦 Tool Detection
|
|
123
|
+
|
|
124
|
+
AgentGUI auto-detects installed AI coding tools:
|
|
125
|
+
- **Claude Code**: `@anthropic-ai/claude-code`
|
|
126
|
+
- **Gemini CLI**: `@google/gemini-cli`
|
|
127
|
+
- **OpenCode**: `opencode-ai`
|
|
128
|
+
- **Kilo**: `@kilocode/cli`
|
|
129
|
+
- **Codex**: `@openai/codex`
|
|
130
|
+
|
|
131
|
+
Install/update directly from the Tools UI.
|
|
132
|
+
|
|
133
|
+
## 🌐 Environment Variables
|
|
134
|
+
|
|
135
|
+
- `PORT` - Server port (default: 3000)
|
|
136
|
+
- `BASE_URL` - URL prefix (default: /gm)
|
|
137
|
+
- `STARTUP_CWD` - Working directory for agents
|
|
138
|
+
- `HOT_RELOAD` - Set to "false" to disable watch mode
|
|
139
|
+
|
|
140
|
+
## 📝 License
|
|
141
|
+
|
|
142
|
+
MIT License - see [LICENSE](LICENSE) file for details.
|
|
143
|
+
|
|
144
|
+
## 🤝 Contributing
|
|
145
|
+
|
|
146
|
+
Contributions welcome! Please read our contributing guidelines before submitting PRs.
|
|
147
|
+
|
|
148
|
+
## 🔗 Links
|
|
149
|
+
|
|
150
|
+
- [GitHub Repository](https://github.com/AnEntrypoint/agentgui)
|
|
151
|
+
- [npm Package](https://www.npmjs.com/package/agentgui)
|
|
152
|
+
- [Documentation](https://anentrypoint.github.io/agentgui/)
|
|
153
|
+
- [Issue Tracker](https://github.com/AnEntrypoint/agentgui/issues)
|