agentgui 1.0.576 → 1.0.578
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/docs/index.html +474 -167
- package/package.json +1 -1
- package/readme.md +238 -94
package/docs/index.html
CHANGED
|
@@ -3,258 +3,565 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<
|
|
6
|
+
<meta name="description" content="AgentGUI - Multi-agent GUI for AI coding assistants. Real-time streaming interface for Claude Code, Gemini CLI, OpenCode, and more.">
|
|
7
|
+
<title>AgentGUI - Multi-Agent GUI for AI Coding Assistants</title>
|
|
8
|
+
|
|
7
9
|
<style>
|
|
8
|
-
* {
|
|
9
|
-
|
|
10
|
+
* {
|
|
11
|
+
margin: 0;
|
|
12
|
+
padding: 0;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
:root {
|
|
17
|
+
--primary: #3b82f6;
|
|
18
|
+
--primary-dark: #1e40af;
|
|
19
|
+
--secondary: #10b981;
|
|
20
|
+
--bg-dark: #111827;
|
|
21
|
+
--bg-darker: #0f172a;
|
|
22
|
+
--text-light: #f9fafb;
|
|
23
|
+
--text-gray: #9ca3af;
|
|
24
|
+
--border: #374151;
|
|
25
|
+
}
|
|
26
|
+
|
|
10
27
|
body {
|
|
11
|
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
28
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
12
29
|
line-height: 1.6;
|
|
13
30
|
color: #333;
|
|
14
|
-
background: #
|
|
31
|
+
background: #ffffff;
|
|
15
32
|
}
|
|
16
|
-
|
|
33
|
+
|
|
34
|
+
/* Hero Section */
|
|
17
35
|
.hero {
|
|
18
36
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
19
37
|
color: white;
|
|
20
|
-
padding:
|
|
38
|
+
padding: 120px 20px 80px;
|
|
21
39
|
text-align: center;
|
|
40
|
+
position: relative;
|
|
41
|
+
overflow: hidden;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.hero::before {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
top: 0;
|
|
48
|
+
left: 0;
|
|
49
|
+
right: 0;
|
|
50
|
+
bottom: 0;
|
|
51
|
+
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path fill="%23ffffff" fill-opacity="0.1" d="M0,0 L1200,0 L1200,60 Q600,120 0,60 Z"/></svg>') no-repeat bottom;
|
|
52
|
+
background-size: cover;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.hero-content {
|
|
56
|
+
max-width: 900px;
|
|
57
|
+
margin: 0 auto;
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 1;
|
|
22
60
|
}
|
|
23
|
-
|
|
61
|
+
|
|
24
62
|
.hero h1 {
|
|
25
|
-
font-size:
|
|
26
|
-
|
|
27
|
-
|
|
63
|
+
font-size: 3.5rem;
|
|
64
|
+
font-weight: 800;
|
|
65
|
+
margin-bottom: 1.5rem;
|
|
66
|
+
line-height: 1.2;
|
|
28
67
|
}
|
|
29
|
-
|
|
68
|
+
|
|
30
69
|
.hero p {
|
|
31
|
-
font-size: 1.
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
margin: 0 auto 2rem;
|
|
70
|
+
font-size: 1.3rem;
|
|
71
|
+
margin-bottom: 2.5rem;
|
|
72
|
+
opacity: 0.95;
|
|
35
73
|
}
|
|
36
|
-
|
|
37
|
-
.
|
|
38
|
-
display:
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
74
|
+
|
|
75
|
+
.badges {
|
|
76
|
+
display: flex;
|
|
77
|
+
gap: 10px;
|
|
78
|
+
justify-content: center;
|
|
79
|
+
flex-wrap: wrap;
|
|
80
|
+
margin-bottom: 2rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.badges img {
|
|
84
|
+
height: 20px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cta-buttons {
|
|
88
|
+
display: flex;
|
|
89
|
+
gap: 1rem;
|
|
90
|
+
justify-content: center;
|
|
91
|
+
flex-wrap: wrap;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.btn {
|
|
95
|
+
padding: 14px 32px;
|
|
42
96
|
border-radius: 8px;
|
|
43
97
|
text-decoration: none;
|
|
44
98
|
font-weight: 600;
|
|
45
|
-
|
|
99
|
+
font-size: 1.1rem;
|
|
100
|
+
transition: all 0.3s ease;
|
|
101
|
+
display: inline-block;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.btn-primary {
|
|
105
|
+
background: white;
|
|
106
|
+
color: #667eea;
|
|
107
|
+
box-shadow: 0 4px 14px rgba(0,0,0,0.2);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.btn-primary:hover {
|
|
111
|
+
transform: translateY(-2px);
|
|
112
|
+
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
|
|
46
113
|
}
|
|
47
|
-
|
|
48
|
-
.
|
|
114
|
+
|
|
115
|
+
.btn-secondary {
|
|
116
|
+
background: rgba(255,255,255,0.2);
|
|
117
|
+
color: white;
|
|
118
|
+
border: 2px solid white;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.btn-secondary:hover {
|
|
122
|
+
background: rgba(255,255,255,0.3);
|
|
49
123
|
transform: translateY(-2px);
|
|
50
124
|
}
|
|
51
|
-
|
|
125
|
+
|
|
126
|
+
/* Container */
|
|
52
127
|
.container {
|
|
53
128
|
max-width: 1200px;
|
|
54
129
|
margin: 0 auto;
|
|
55
|
-
padding:
|
|
130
|
+
padding: 0 20px;
|
|
56
131
|
}
|
|
57
|
-
|
|
132
|
+
|
|
133
|
+
/* Section */
|
|
134
|
+
.section {
|
|
135
|
+
padding: 80px 20px;
|
|
136
|
+
}
|
|
137
|
+
|
|
58
138
|
.section-title {
|
|
59
|
-
font-size: 2rem;
|
|
60
139
|
text-align: center;
|
|
61
|
-
|
|
140
|
+
font-size: 2.5rem;
|
|
141
|
+
font-weight: 700;
|
|
142
|
+
margin-bottom: 1rem;
|
|
62
143
|
color: #1f2937;
|
|
63
144
|
}
|
|
64
|
-
|
|
145
|
+
|
|
146
|
+
.section-subtitle {
|
|
147
|
+
text-align: center;
|
|
148
|
+
font-size: 1.2rem;
|
|
149
|
+
color: #6b7280;
|
|
150
|
+
margin-bottom: 4rem;
|
|
151
|
+
max-width: 700px;
|
|
152
|
+
margin-left: auto;
|
|
153
|
+
margin-right: auto;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
/* Features Grid */
|
|
65
157
|
.features-grid {
|
|
66
158
|
display: grid;
|
|
67
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
68
|
-
gap:
|
|
69
|
-
margin-
|
|
159
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
160
|
+
gap: 2.5rem;
|
|
161
|
+
margin-top: 3rem;
|
|
70
162
|
}
|
|
71
|
-
|
|
163
|
+
|
|
72
164
|
.feature-card {
|
|
73
165
|
background: white;
|
|
74
|
-
|
|
166
|
+
border: 1px solid #e5e7eb;
|
|
75
167
|
border-radius: 12px;
|
|
76
|
-
|
|
77
|
-
transition:
|
|
168
|
+
padding: 2rem;
|
|
169
|
+
transition: all 0.3s ease;
|
|
78
170
|
}
|
|
79
|
-
|
|
171
|
+
|
|
80
172
|
.feature-card:hover {
|
|
81
|
-
|
|
173
|
+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
|
174
|
+
transform: translateY(-5px);
|
|
82
175
|
}
|
|
83
|
-
|
|
176
|
+
|
|
84
177
|
.feature-icon {
|
|
85
178
|
font-size: 2.5rem;
|
|
86
179
|
margin-bottom: 1rem;
|
|
87
180
|
}
|
|
88
|
-
|
|
181
|
+
|
|
89
182
|
.feature-card h3 {
|
|
90
|
-
font-size: 1.
|
|
91
|
-
margin-bottom: 0.
|
|
92
|
-
color: #
|
|
183
|
+
font-size: 1.3rem;
|
|
184
|
+
margin-bottom: 0.8rem;
|
|
185
|
+
color: #1f2937;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.feature-card p {
|
|
189
|
+
color: #6b7280;
|
|
190
|
+
line-height: 1.7;
|
|
93
191
|
}
|
|
94
|
-
|
|
95
|
-
|
|
192
|
+
|
|
193
|
+
/* Screenshots */
|
|
194
|
+
.screenshot-gallery {
|
|
96
195
|
display: grid;
|
|
97
|
-
grid-template-columns: repeat(auto-fit, minmax(
|
|
98
|
-
gap:
|
|
99
|
-
margin:
|
|
196
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
197
|
+
gap: 2rem;
|
|
198
|
+
margin-top: 3rem;
|
|
100
199
|
}
|
|
101
|
-
|
|
102
|
-
.screenshot-
|
|
103
|
-
|
|
104
|
-
border-radius: 8px;
|
|
200
|
+
|
|
201
|
+
.screenshot-item {
|
|
202
|
+
border-radius: 12px;
|
|
105
203
|
overflow: hidden;
|
|
106
|
-
box-shadow: 0 4px
|
|
204
|
+
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
|
|
205
|
+
transition: all 0.3s ease;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.screenshot-item:hover {
|
|
209
|
+
transform: scale(1.03);
|
|
210
|
+
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
|
|
107
211
|
}
|
|
108
|
-
|
|
109
|
-
.screenshot-
|
|
212
|
+
|
|
213
|
+
.screenshot-item img {
|
|
110
214
|
width: 100%;
|
|
215
|
+
height: auto;
|
|
111
216
|
display: block;
|
|
112
217
|
}
|
|
113
|
-
|
|
114
|
-
.screenshot-
|
|
218
|
+
|
|
219
|
+
.screenshot-caption {
|
|
115
220
|
padding: 1rem;
|
|
221
|
+
background: #f9fafb;
|
|
116
222
|
text-align: center;
|
|
117
223
|
font-weight: 600;
|
|
118
|
-
color: #
|
|
224
|
+
color: #374151;
|
|
119
225
|
}
|
|
120
|
-
|
|
226
|
+
|
|
227
|
+
/* Code Block */
|
|
121
228
|
.code-block {
|
|
122
229
|
background: #1f2937;
|
|
123
230
|
color: #f9fafb;
|
|
124
|
-
padding:
|
|
125
|
-
border-radius:
|
|
231
|
+
padding: 2rem;
|
|
232
|
+
border-radius: 12px;
|
|
233
|
+
font-family: 'Courier New', monospace;
|
|
234
|
+
font-size: 1.1rem;
|
|
235
|
+
position: relative;
|
|
236
|
+
margin: 2rem 0;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.code-block pre {
|
|
240
|
+
margin: 0;
|
|
126
241
|
overflow-x: auto;
|
|
127
|
-
margin: 1.5rem 0;
|
|
128
242
|
}
|
|
129
|
-
|
|
130
|
-
.
|
|
131
|
-
|
|
243
|
+
|
|
244
|
+
.copy-btn {
|
|
245
|
+
position: absolute;
|
|
246
|
+
top: 1rem;
|
|
247
|
+
right: 1rem;
|
|
248
|
+
background: #374151;
|
|
249
|
+
color: white;
|
|
250
|
+
border: none;
|
|
251
|
+
padding: 8px 16px;
|
|
252
|
+
border-radius: 6px;
|
|
253
|
+
cursor: pointer;
|
|
254
|
+
font-size: 0.9rem;
|
|
255
|
+
transition: background 0.2s;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.copy-btn:hover {
|
|
259
|
+
background: #4b5563;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
/* Architecture */
|
|
263
|
+
.architecture {
|
|
264
|
+
background: #f9fafb;
|
|
265
|
+
padding: 3rem;
|
|
266
|
+
border-radius: 12px;
|
|
267
|
+
margin-top: 3rem;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.architecture pre {
|
|
271
|
+
background: white;
|
|
272
|
+
padding: 2rem;
|
|
273
|
+
border-radius: 8px;
|
|
274
|
+
overflow-x: auto;
|
|
132
275
|
font-size: 0.9rem;
|
|
276
|
+
line-height: 1.6;
|
|
277
|
+
border: 1px solid #e5e7eb;
|
|
133
278
|
}
|
|
134
|
-
|
|
135
|
-
|
|
279
|
+
|
|
280
|
+
/* Footer */
|
|
281
|
+
.footer {
|
|
136
282
|
background: #1f2937;
|
|
137
|
-
color:
|
|
283
|
+
color: #9ca3af;
|
|
138
284
|
text-align: center;
|
|
139
|
-
padding:
|
|
140
|
-
|
|
285
|
+
padding: 3rem 20px;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.footer-links {
|
|
289
|
+
display: flex;
|
|
290
|
+
gap: 2rem;
|
|
291
|
+
justify-content: center;
|
|
292
|
+
margin-bottom: 1.5rem;
|
|
293
|
+
flex-wrap: wrap;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.footer-links a {
|
|
297
|
+
color: #9ca3af;
|
|
298
|
+
text-decoration: none;
|
|
299
|
+
transition: color 0.2s;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
.footer-links a:hover {
|
|
303
|
+
color: white;
|
|
141
304
|
}
|
|
142
|
-
|
|
305
|
+
|
|
306
|
+
/* Responsive */
|
|
143
307
|
@media (max-width: 768px) {
|
|
144
|
-
.hero h1 {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
308
|
+
.hero h1 {
|
|
309
|
+
font-size: 2.5rem;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
.hero p {
|
|
313
|
+
font-size: 1.1rem;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.section-title {
|
|
317
|
+
font-size: 2rem;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
.features-grid {
|
|
321
|
+
grid-template-columns: 1fr;
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
.screenshot-gallery {
|
|
325
|
+
grid-template-columns: 1fr;
|
|
326
|
+
}
|
|
148
327
|
}
|
|
149
328
|
</style>
|
|
150
329
|
</head>
|
|
151
330
|
<body>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
<
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
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>
|
|
331
|
+
<!-- Hero Section -->
|
|
332
|
+
<section class="hero">
|
|
333
|
+
<div class="hero-content">
|
|
334
|
+
<h1>AgentGUI</h1>
|
|
335
|
+
<p>Multi-agent GUI for AI coding assistants. One interface for all your AI agents.</p>
|
|
172
336
|
|
|
173
|
-
<div class="
|
|
174
|
-
<
|
|
175
|
-
<
|
|
176
|
-
<
|
|
337
|
+
<div class="badges">
|
|
338
|
+
<img src="https://img.shields.io/npm/v/agentgui?color=brightgreen" alt="npm version">
|
|
339
|
+
<img src="https://img.shields.io/npm/dw/agentgui?color=brightgreen" alt="weekly downloads">
|
|
340
|
+
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license">
|
|
177
341
|
</div>
|
|
178
|
-
|
|
179
|
-
<div class="
|
|
180
|
-
<
|
|
181
|
-
<
|
|
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>
|
|
342
|
+
|
|
343
|
+
<div class="cta-buttons">
|
|
344
|
+
<a href="https://github.com/AnEntrypoint/agentgui" class="btn btn-primary">View on GitHub</a>
|
|
345
|
+
<a href="https://www.npmjs.com/package/agentgui" class="btn btn-secondary">npm Package</a>
|
|
195
346
|
</div>
|
|
196
347
|
</div>
|
|
348
|
+
</section>
|
|
197
349
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<div class="
|
|
205
|
-
<
|
|
206
|
-
<
|
|
350
|
+
<!-- Quick Start -->
|
|
351
|
+
<section class="section">
|
|
352
|
+
<div class="container">
|
|
353
|
+
<h2 class="section-title">Get Started in Seconds</h2>
|
|
354
|
+
<p class="section-subtitle">No installation required. Run with npx and start coding with AI agents instantly.</p>
|
|
355
|
+
|
|
356
|
+
<div class="code-block">
|
|
357
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
358
|
+
<pre><code>npx agentgui</code></pre>
|
|
207
359
|
</div>
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
<
|
|
360
|
+
|
|
361
|
+
<p style="text-align: center; color: #6b7280; margin-top: 1rem;">
|
|
362
|
+
Server starts at <strong>http://localhost:3000/gm/</strong>
|
|
363
|
+
</p>
|
|
364
|
+
</div>
|
|
365
|
+
</section>
|
|
366
|
+
|
|
367
|
+
<!-- Features -->
|
|
368
|
+
<section class="section" style="background: #f9fafb;">
|
|
369
|
+
<div class="container">
|
|
370
|
+
<h2 class="section-title">Features</h2>
|
|
371
|
+
<p class="section-subtitle">Everything you need to work with multiple AI coding agents in one place.</p>
|
|
372
|
+
|
|
373
|
+
<div class="features-grid">
|
|
374
|
+
<div class="feature-card">
|
|
375
|
+
<div class="feature-icon">🤖</div>
|
|
376
|
+
<h3>Multi-Agent Support</h3>
|
|
377
|
+
<p>Auto-discovers Claude Code, Gemini CLI, OpenCode, Goose, Kilo, Codex, and other CLI-based agents installed on your system.</p>
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<div class="feature-card">
|
|
381
|
+
<div class="feature-icon">⚡</div>
|
|
382
|
+
<h3>Real-Time Streaming</h3>
|
|
383
|
+
<p>WebSocket-based streaming for instant responses. Watch your agent work in real-time with live execution visualization.</p>
|
|
384
|
+
</div>
|
|
385
|
+
|
|
386
|
+
<div class="feature-card">
|
|
387
|
+
<div class="feature-icon">💾</div>
|
|
388
|
+
<h3>Persistent Storage</h3>
|
|
389
|
+
<p>SQLite database stores all conversations, sessions, and execution history. Resume where you left off.</p>
|
|
390
|
+
</div>
|
|
391
|
+
|
|
392
|
+
<div class="feature-card">
|
|
393
|
+
<div class="feature-icon">📁</div>
|
|
394
|
+
<h3>File Management</h3>
|
|
395
|
+
<p>Integrated file browser with drag-and-drop uploads. Direct file editing and context-aware operations.</p>
|
|
396
|
+
</div>
|
|
397
|
+
|
|
398
|
+
<div class="feature-card">
|
|
399
|
+
<div class="feature-icon">🎤</div>
|
|
400
|
+
<h3>Speech Capabilities</h3>
|
|
401
|
+
<p>Built-in speech-to-text and text-to-speech via Hugging Face Whisper. No API keys required.</p>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<div class="feature-card">
|
|
405
|
+
<div class="feature-icon">🔧</div>
|
|
406
|
+
<h3>Developer Friendly</h3>
|
|
407
|
+
<p>Hot reload, REST API, WebSocket endpoints, and extensible plugin system for custom agents.</p>
|
|
408
|
+
</div>
|
|
211
409
|
</div>
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
410
|
+
</div>
|
|
411
|
+
</section>
|
|
412
|
+
|
|
413
|
+
<!-- Screenshots -->
|
|
414
|
+
<section class="section">
|
|
415
|
+
<div class="container">
|
|
416
|
+
<h2 class="section-title">Screenshots</h2>
|
|
417
|
+
<p class="section-subtitle">See AgentGUI in action</p>
|
|
418
|
+
|
|
419
|
+
<div class="screenshot-gallery">
|
|
420
|
+
<div class="screenshot-item">
|
|
421
|
+
<img src="screenshot-main.png" alt="Main Interface">
|
|
422
|
+
<div class="screenshot-caption">Main Interface</div>
|
|
423
|
+
</div>
|
|
424
|
+
|
|
425
|
+
<div class="screenshot-item">
|
|
426
|
+
<img src="screenshot-chat.png" alt="Chat View">
|
|
427
|
+
<div class="screenshot-caption">Chat & Conversation</div>
|
|
428
|
+
</div>
|
|
429
|
+
|
|
430
|
+
<div class="screenshot-item">
|
|
431
|
+
<img src="screenshot-files.png" alt="File Browser">
|
|
432
|
+
<div class="screenshot-caption">File Browser</div>
|
|
433
|
+
</div>
|
|
434
|
+
|
|
435
|
+
<div class="screenshot-item">
|
|
436
|
+
<img src="screenshot-terminal.png" alt="Terminal View">
|
|
437
|
+
<div class="screenshot-caption">Terminal Execution</div>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<div class="screenshot-item">
|
|
441
|
+
<img src="screenshot-tools-popup.png" alt="Tools Management">
|
|
442
|
+
<div class="screenshot-caption">Tools Management</div>
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<div class="screenshot-item">
|
|
446
|
+
<img src="screenshot-conversation.png" alt="Conversation View">
|
|
447
|
+
<div class="screenshot-caption">Conversation History</div>
|
|
448
|
+
</div>
|
|
215
449
|
</div>
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
450
|
+
</div>
|
|
451
|
+
</section>
|
|
452
|
+
|
|
453
|
+
<!-- Architecture -->
|
|
454
|
+
<section class="section" style="background: #f9fafb;">
|
|
455
|
+
<div class="container">
|
|
456
|
+
<h2 class="section-title">Architecture</h2>
|
|
457
|
+
<p class="section-subtitle">Built for performance, reliability, and extensibility</p>
|
|
458
|
+
|
|
459
|
+
<div class="architecture">
|
|
460
|
+
<pre><code>┌─────────────────────────────────────────────────────────────────┐
|
|
461
|
+
│ Browser Client │
|
|
462
|
+
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────────┐ │
|
|
463
|
+
│ │ UI Layer │ │ WebSocket │ │ Streaming Renderer │ │
|
|
464
|
+
│ │ Components │ │ Manager │ │ (Event Processor) │ │
|
|
465
|
+
│ └──────────────┘ └──────────────┘ └──────────────────────────┘ │
|
|
466
|
+
└─────────────────────────────────────────────────────────────────┘
|
|
467
|
+
│
|
|
468
|
+
┌─────────▼─────────┐
|
|
469
|
+
│ HTTP + WS │
|
|
470
|
+
│ Server │
|
|
471
|
+
│ (server.js) │
|
|
472
|
+
└─────────┬─────────┘
|
|
473
|
+
│
|
|
474
|
+
┌─────────────────────┼─────────────────────┐
|
|
475
|
+
│ │ │
|
|
476
|
+
┌───────▼────────┐ ┌─────────▼─────────┐ ┌───────▼────────┐
|
|
477
|
+
│ SQLite DB │ │ Agent Runner │ │ Speech │
|
|
478
|
+
│ (database.js) │ │ (claude-runner.js)│ │ (speech.js) │
|
|
479
|
+
└────────────────┘ └─────────┬─────────┘ └────────────────┘
|
|
480
|
+
│
|
|
481
|
+
┌─────────▼─────────┐
|
|
482
|
+
│ Agent CLI Tools │
|
|
483
|
+
│ (spawned procs) │
|
|
484
|
+
└───────────────────┘</code></pre>
|
|
219
485
|
</div>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<
|
|
486
|
+
|
|
487
|
+
<div class="features-grid" style="margin-top: 3rem;">
|
|
488
|
+
<div class="feature-card">
|
|
489
|
+
<h3>REST API</h3>
|
|
490
|
+
<p>Complete REST API for conversations, messages, agents, tools, and speech operations.</p>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
<div class="feature-card">
|
|
494
|
+
<h3>WebSocket Sync</h3>
|
|
495
|
+
<p>Real-time bidirectional communication with event-based streaming and subscription model.</p>
|
|
496
|
+
</div>
|
|
497
|
+
|
|
498
|
+
<div class="feature-card">
|
|
499
|
+
<h3>SQLite WAL Mode</h3>
|
|
500
|
+
<p>Write-Ahead Logging for concurrent reads and writes without blocking.</p>
|
|
501
|
+
</div>
|
|
223
502
|
</div>
|
|
224
503
|
</div>
|
|
504
|
+
</section>
|
|
225
505
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
506
|
+
<!-- Installation Options -->
|
|
507
|
+
<section class="section">
|
|
508
|
+
<div class="container">
|
|
509
|
+
<h2 class="section-title">Installation Options</h2>
|
|
510
|
+
|
|
511
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
512
|
+
<h3 style="margin: 2rem 0 1rem;">Quick Start (Recommended)</h3>
|
|
513
|
+
<div class="code-block">
|
|
514
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
515
|
+
<pre><code>npx agentgui</code></pre>
|
|
516
|
+
</div>
|
|
230
517
|
|
|
231
|
-
|
|
232
|
-
|
|
518
|
+
<h3 style="margin: 2rem 0 1rem;">Manual Installation</h3>
|
|
519
|
+
<div class="code-block">
|
|
520
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
521
|
+
<pre><code>git clone https://github.com/AnEntrypoint/agentgui.git
|
|
522
|
+
cd agentgui
|
|
523
|
+
npm install
|
|
524
|
+
npm run dev</code></pre>
|
|
525
|
+
</div>
|
|
233
526
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
527
|
+
<h3 style="margin: 2rem 0 1rem;">System Requirements</h3>
|
|
528
|
+
<ul style="list-style: none; padding: 0;">
|
|
529
|
+
<li style="padding: 0.5rem 0; color: #4b5563;">✓ Node.js 18+ (LTS recommended)</li>
|
|
530
|
+
<li style="padding: 0.5rem 0; color: #4b5563;">✓ npm or bun package manager</li>
|
|
531
|
+
<li style="padding: 0.5rem 0; color: #4b5563;">✓ At least one AI coding agent (Claude Code, Gemini CLI, etc.)</li>
|
|
532
|
+
<li style="padding: 0.5rem 0; color: #4b5563;">✓ Optional: Python 3.9+ for TTS on Windows</li>
|
|
533
|
+
</ul>
|
|
534
|
+
</div>
|
|
241
535
|
</div>
|
|
536
|
+
</section>
|
|
242
537
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
538
|
+
<!-- Footer -->
|
|
539
|
+
<footer class="footer">
|
|
540
|
+
<div class="container">
|
|
541
|
+
<div class="footer-links">
|
|
542
|
+
<a href="https://github.com/AnEntrypoint/agentgui">GitHub</a>
|
|
543
|
+
<a href="https://www.npmjs.com/package/agentgui">npm</a>
|
|
544
|
+
<a href="https://github.com/AnEntrypoint/agentgui/issues">Issues</a>
|
|
545
|
+
<a href="https://github.com/AnEntrypoint/agentgui#readme">Documentation</a>
|
|
546
|
+
</div>
|
|
547
|
+
<p>MIT License © 2024 AnEntrypoint</p>
|
|
548
|
+
<p style="margin-top: 1rem;">Made with ❤️ by the AgentGUI team</p>
|
|
252
549
|
</div>
|
|
253
|
-
</div>
|
|
254
|
-
|
|
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
550
|
</footer>
|
|
551
|
+
|
|
552
|
+
<script>
|
|
553
|
+
function copyCode(btn) {
|
|
554
|
+
const codeBlock = btn.nextElementSibling;
|
|
555
|
+
const text = codeBlock.textContent;
|
|
556
|
+
|
|
557
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
558
|
+
const originalText = btn.textContent;
|
|
559
|
+
btn.textContent = 'Copied!';
|
|
560
|
+
setTimeout(() => {
|
|
561
|
+
btn.textContent = originalText;
|
|
562
|
+
}, 2000);
|
|
563
|
+
});
|
|
564
|
+
}
|
|
565
|
+
</script>
|
|
259
566
|
</body>
|
|
260
|
-
</html>
|
|
567
|
+
</html>
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,78 +1,167 @@
|
|
|
1
1
|
# AgentGUI
|
|
2
2
|
|
|
3
|
-
|
|
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.
|
|
3
|
+
<div align="center">
|
|
8
4
|
|
|
9
5
|
|
|
10
6
|
|
|
11
|
-
|
|
7
|
+
**Multi-agent GUI for AI coding assistants**
|
|
12
8
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
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
|
|
9
|
+
[](https://anentrypoint.github.io/agentgui/)
|
|
10
|
+
[](https://www.npmjs.com/package/agentgui)
|
|
11
|
+
[](https://www.npmjs.com/package/agentgui)
|
|
12
|
+
[](LICENSE)
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
[Quick Start](#quick-start) • [Features](#features) • [Screenshots](#screenshots) • [Architecture](#architecture) • [Documentation](https://anentrypoint.github.io/agentgui/)
|
|
23
15
|
|
|
24
|
-
|
|
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>
|
|
16
|
+
</div>
|
|
34
17
|
|
|
35
|
-
|
|
18
|
+
---
|
|
36
19
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
20
|
+
## Overview
|
|
21
|
+
|
|
22
|
+
AgentGUI provides a unified web interface for AI coding agents. Connect to any CLI-based agent (Claude Code, Gemini CLI, OpenCode, Goose, Kilo, Codex, and more) and interact through a real-time streaming interface with SQLite persistence, file management, and speech capabilities.
|
|
40
23
|
|
|
41
|
-
|
|
42
|
-
agentgui
|
|
24
|
+
## Quick Start
|
|
43
25
|
|
|
44
|
-
|
|
26
|
+
### One-Line Install
|
|
27
|
+
|
|
28
|
+
```bash
|
|
45
29
|
npx agentgui
|
|
46
30
|
```
|
|
47
31
|
|
|
48
|
-
|
|
32
|
+
The server starts at `http://localhost:3000/gm/`
|
|
33
|
+
|
|
34
|
+
### Manual Installation
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
git clone https://github.com/AnEntrypoint/agentgui.git
|
|
38
|
+
cd agentgui
|
|
39
|
+
npm install
|
|
40
|
+
npm run dev
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### System Requirements
|
|
44
|
+
|
|
45
|
+
- **Node.js** 18+ (LTS recommended)
|
|
46
|
+
- **npm** or **bun**
|
|
47
|
+
- **AI Coding Agents**: Claude Code, Gemini CLI, OpenCode, Goose, Kilo, or Codex
|
|
48
|
+
- **Optional**: Python 3.9+ for text-to-speech on Windows
|
|
49
|
+
|
|
50
|
+
## Features
|
|
51
|
+
|
|
52
|
+
### 🤖 Multi-Agent Support
|
|
53
|
+
Auto-discovers and connects to all installed AI coding agents:
|
|
54
|
+
- Claude Code (`@anthropic-ai/claude-code`)
|
|
55
|
+
- Gemini CLI (`@google/gemini-cli`)
|
|
56
|
+
- OpenCode (`opencode-ai`)
|
|
57
|
+
- Goose (`goose-ai`)
|
|
58
|
+
- Kilo (`@kilocode/cli`)
|
|
59
|
+
- Codex and other CLI-based agents
|
|
60
|
+
|
|
61
|
+
### ⚡ Real-Time Streaming
|
|
62
|
+
- WebSocket-based streaming for instant agent responses
|
|
63
|
+
- Live execution visualization with syntax highlighting
|
|
64
|
+
- Progress indicators for long-running operations
|
|
65
|
+
- Concurrent agent sessions
|
|
66
|
+
|
|
67
|
+
### 💾 Persistent Storage
|
|
68
|
+
- SQLite database (`~/.gmgui/data.db`) in WAL mode
|
|
69
|
+
- Conversation history with full context
|
|
70
|
+
- Session management and resumption
|
|
71
|
+
- Message threading and organization
|
|
72
|
+
|
|
73
|
+
### 📁 File Management
|
|
74
|
+
- Integrated file browser for agent working directories
|
|
75
|
+
- Drag-and-drop file uploads
|
|
76
|
+
- Direct file editing and viewing
|
|
77
|
+
- Context-aware file operations
|
|
78
|
+
|
|
79
|
+
### 🎤 Speech Capabilities
|
|
80
|
+
- Speech-to-text via Hugging Face Whisper
|
|
81
|
+
- Text-to-speech with multiple voice options
|
|
82
|
+
- Automatic model downloading (~470MB)
|
|
83
|
+
- No API keys required
|
|
84
|
+
|
|
85
|
+
### 🔧 Developer Experience
|
|
86
|
+
- Hot reload during development
|
|
87
|
+
- Extensible agent framework
|
|
88
|
+
- REST API + WebSocket endpoints
|
|
89
|
+
- Plugin system for custom agents
|
|
90
|
+
|
|
91
|
+
## Screenshots
|
|
92
|
+
|
|
93
|
+
### Main Interface
|
|
94
|
+
|
|
49
95
|
|
|
50
|
-
|
|
96
|
+
### Chat & Conversation Views
|
|
97
|
+
|
|
51
98
|
|
|
52
|
-
-
|
|
53
|
-
- **OS**: Linux, macOS, or Windows
|
|
54
|
-
- **RAM**: 2GB+ recommended
|
|
55
|
-
- **Disk**: 500MB for voice models (auto-downloaded)
|
|
99
|
+
|
|
56
100
|
|
|
57
|
-
|
|
101
|
+
### File Browser
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
### Terminal Execution
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
### Tools Management
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
## Architecture
|
|
58
111
|
|
|
59
112
|
```
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
113
|
+
┌─────────────────────────────────────────────────────────────────┐
|
|
114
|
+
│ Browser Client │
|
|
115
|
+
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────────────────┐ │
|
|
116
|
+
│ │ UI Layer │ │ WebSocket │ │ Streaming Renderer │ │
|
|
117
|
+
│ │ Components │ │ Manager │ │ (Event Processor) │ │
|
|
118
|
+
│ └──────────────┘ └──────────────┘ └──────────────────────────┘ │
|
|
119
|
+
└─────────────────────────────────────────────────────────────────┘
|
|
120
|
+
│
|
|
121
|
+
┌─────────▼─────────┐
|
|
122
|
+
│ HTTP + WS │
|
|
123
|
+
│ Server │
|
|
124
|
+
│ (server.js) │
|
|
125
|
+
└─────────┬─────────┘
|
|
126
|
+
│
|
|
127
|
+
┌─────────────────────┼─────────────────────┐
|
|
128
|
+
│ │ │
|
|
129
|
+
┌───────▼────────┐ ┌─────────▼─────────┐ ┌───────▼────────┐
|
|
130
|
+
│ SQLite DB │ │ Agent Runner │ │ Speech │
|
|
131
|
+
│ (database.js) │ │ (claude-runner.js)│ │ (speech.js) │
|
|
132
|
+
└────────────────┘ └─────────┬─────────┘ └────────────────┘
|
|
133
|
+
│
|
|
134
|
+
┌─────────▼─────────┐
|
|
135
|
+
│ Agent CLI Tools │
|
|
136
|
+
│ (spawned procs) │
|
|
137
|
+
└───────────────────┘
|
|
66
138
|
```
|
|
67
139
|
|
|
68
140
|
### Key Components
|
|
69
141
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
142
|
+
| Component | Purpose | Location |
|
|
143
|
+
|-----------|---------|----------|
|
|
144
|
+
| **HTTP Server** | REST API, static files, routing | `server.js` |
|
|
145
|
+
| **Database** | SQLite persistence (WAL mode) | `database.js` |
|
|
146
|
+
| **Agent Runner** | CLI spawning, stream parsing | `lib/claude-runner.js` |
|
|
147
|
+
| **Speech Engine** | STT/TTS via transformers | `lib/speech.js` |
|
|
148
|
+
| **Client Core** | Main browser logic | `static/js/client.js` |
|
|
149
|
+
| **WebSocket Manager** | Real-time communication | `static/js/websocket-manager.js` |
|
|
150
|
+
| **Streaming Renderer** | Event-based UI updates | `static/js/streaming-renderer.js` |
|
|
151
|
+
| **CLI Entry** | `npx agentgui` handler | `bin/gmgui.cjs` |
|
|
152
|
+
|
|
153
|
+
## Configuration
|
|
154
|
+
|
|
155
|
+
Environment variables:
|
|
156
|
+
|
|
157
|
+
| Variable | Default | Description |
|
|
158
|
+
|----------|---------|-------------|
|
|
159
|
+
| `PORT` | `3000` | Server port |
|
|
160
|
+
| `BASE_URL` | `/gm` | URL prefix for all routes |
|
|
161
|
+
| `STARTUP_CWD` | Current dir | Working directory for agents |
|
|
162
|
+
| `HOT_RELOAD` | `true` | Enable watch mode |
|
|
74
163
|
|
|
75
|
-
##
|
|
164
|
+
## REST API
|
|
76
165
|
|
|
77
166
|
All routes prefixed with `BASE_URL` (default `/gm`):
|
|
78
167
|
|
|
@@ -80,74 +169,129 @@ All routes prefixed with `BASE_URL` (default `/gm`):
|
|
|
80
169
|
- `GET /api/conversations` - List all conversations
|
|
81
170
|
- `POST /api/conversations` - Create new conversation
|
|
82
171
|
- `GET /api/conversations/:id` - Get conversation details
|
|
83
|
-
- `
|
|
172
|
+
- `DELETE /api/conversations/:id` - Delete conversation
|
|
173
|
+
|
|
174
|
+
### Messages & Streaming
|
|
175
|
+
- `POST /api/conversations/:id/messages` - Send message to agent
|
|
84
176
|
- `POST /api/conversations/:id/stream` - Start streaming execution
|
|
177
|
+
- `GET /api/conversations/:id/chunks` - Get stream chunks
|
|
85
178
|
|
|
86
|
-
### Tools
|
|
87
|
-
- `GET /api/
|
|
179
|
+
### Agents & Tools
|
|
180
|
+
- `GET /api/agents` - List discovered agents
|
|
181
|
+
- `GET /api/tools` - List available tools
|
|
88
182
|
- `POST /api/tools/:id/install` - Install tool
|
|
89
183
|
- `POST /api/tools/:id/update` - Update tool
|
|
90
|
-
- `POST /api/tools/update` - Batch update all tools
|
|
91
184
|
|
|
92
|
-
###
|
|
185
|
+
### Speech
|
|
93
186
|
- `POST /api/stt` - Speech-to-text (raw audio)
|
|
94
|
-
- `POST /api/tts` - Text-to-speech
|
|
95
|
-
- `GET /api/speech-status` - Model
|
|
187
|
+
- `POST /api/tts` - Text-to-speech (returns audio)
|
|
188
|
+
- `GET /api/speech-status` - Model download status
|
|
96
189
|
|
|
97
|
-
|
|
190
|
+
### WebSocket
|
|
191
|
+
- Endpoint: `BASE_URL + /sync`
|
|
192
|
+
- Events: `streaming_start`, `streaming_progress`, `streaming_complete`, `streaming_error`
|
|
193
|
+
- Subscribe: `{ type: "subscribe", sessionId }` or `{ type: "subscribe", conversationId }`
|
|
98
194
|
|
|
99
|
-
Speech
|
|
100
|
-
- **Whisper Base** (~280MB) - STT from HuggingFace
|
|
101
|
-
- **TTS Models** (~190MB) - Custom text-to-speech
|
|
195
|
+
## Text-to-Speech Setup (Windows)
|
|
102
196
|
|
|
103
|
-
|
|
197
|
+
AgentGUI automatically configures text-to-speech on first use:
|
|
104
198
|
|
|
105
|
-
|
|
199
|
+
1. Detects Python 3.9+ installation
|
|
200
|
+
2. Creates virtual environment at `~/.gmgui/pocket-venv`
|
|
201
|
+
3. Installs `pocket-tts` via pip
|
|
202
|
+
4. Caches setup for subsequent requests
|
|
106
203
|
|
|
107
|
-
|
|
108
|
-
# Clone repository
|
|
109
|
-
git clone https://github.com/AnEntrypoint/agentgui.git
|
|
110
|
-
cd agentgui
|
|
204
|
+
**Requirements**: Python 3.9+, ~200MB disk space, internet connection
|
|
111
205
|
|
|
112
|
-
|
|
113
|
-
|
|
206
|
+
**Troubleshooting**:
|
|
207
|
+
- **Python not found**: Install from [python.org](https://www.python.org) with "Add Python to PATH"
|
|
208
|
+
- **Setup fails**: Check write access to `~/.gmgui/`
|
|
209
|
+
- **Manual cleanup**: Delete `%USERPROFILE%\.gmgui\pocket-venv` and retry
|
|
210
|
+
|
|
211
|
+
## Development
|
|
114
212
|
|
|
115
|
-
|
|
213
|
+
### Running in Dev Mode
|
|
214
|
+
|
|
215
|
+
```bash
|
|
116
216
|
npm run dev
|
|
217
|
+
```
|
|
117
218
|
|
|
118
|
-
|
|
119
|
-
|
|
219
|
+
Server auto-reloads on file changes.
|
|
220
|
+
|
|
221
|
+
### Project Structure
|
|
222
|
+
|
|
223
|
+
```
|
|
224
|
+
agentgui/
|
|
225
|
+
├── server.js # Main server (HTTP + WebSocket + API)
|
|
226
|
+
├── database.js # SQLite schema and queries
|
|
227
|
+
├── lib/
|
|
228
|
+
│ ├── claude-runner.js # Agent execution framework
|
|
229
|
+
│ ├── acp-manager.js # ACP tool lifecycle
|
|
230
|
+
│ ├── speech.js # STT/TTS processing
|
|
231
|
+
│ └── tool-manager.js # Tool installation/updates
|
|
232
|
+
├── static/
|
|
233
|
+
│ ├── index.html # Main app shell
|
|
234
|
+
│ ├── js/
|
|
235
|
+
│ │ ├── client.js # Core client logic
|
|
236
|
+
│ │ ├── websocket-manager.js
|
|
237
|
+
│ │ ├── streaming-renderer.js
|
|
238
|
+
│ │ └── ...
|
|
239
|
+
│ └── templates/ # HTML event templates
|
|
240
|
+
└── bin/
|
|
241
|
+
└── gmgui.cjs # CLI entry point
|
|
120
242
|
```
|
|
121
243
|
|
|
122
|
-
|
|
244
|
+
### Adding Custom Agents
|
|
245
|
+
|
|
246
|
+
1. Add agent descriptor to `lib/agent-descriptors.js`
|
|
247
|
+
2. Implement CLI detection logic
|
|
248
|
+
3. Configure spawn parameters
|
|
249
|
+
4. Add to agent discovery scan
|
|
250
|
+
|
|
251
|
+
## Troubleshooting
|
|
252
|
+
|
|
253
|
+
### Server Won't Start
|
|
254
|
+
- Check if port 3000 is already in use: `lsof -i :3000` (macOS/Linux) or `netstat -ano | findstr :3000` (Windows)
|
|
255
|
+
- Try a different port: `PORT=4000 npm run dev`
|
|
256
|
+
|
|
257
|
+
### Agent Not Detected
|
|
258
|
+
- Verify agent is installed globally: `which claude` / `where claude`
|
|
259
|
+
- Check PATH includes agent binary location
|
|
260
|
+
- Restart server after installing new agents
|
|
261
|
+
|
|
262
|
+
### WebSocket Connection Fails
|
|
263
|
+
- Verify BASE_URL matches your deployment
|
|
264
|
+
- Check browser console for connection errors
|
|
265
|
+
- Ensure no proxy/firewall blocking WebSocket
|
|
123
266
|
|
|
124
|
-
|
|
125
|
-
-
|
|
126
|
-
-
|
|
127
|
-
-
|
|
128
|
-
- **Kilo**: `@kilocode/cli`
|
|
129
|
-
- **Codex**: `@openai/codex`
|
|
267
|
+
### Speech Models Not Downloading
|
|
268
|
+
- Check internet connection
|
|
269
|
+
- Verify `~/.gmgui/models/` is writable
|
|
270
|
+
- Monitor download via `/api/speech-status`
|
|
130
271
|
|
|
131
|
-
|
|
272
|
+
## Contributing
|
|
132
273
|
|
|
133
|
-
|
|
274
|
+
Contributions welcome! Please:
|
|
134
275
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
276
|
+
1. Fork the repository
|
|
277
|
+
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
|
|
278
|
+
3. Commit changes (`git commit -m 'Add amazing feature'`)
|
|
279
|
+
4. Push to branch (`git push origin feature/amazing-feature`)
|
|
280
|
+
5. Open a Pull Request
|
|
139
281
|
|
|
140
|
-
##
|
|
282
|
+
## License
|
|
141
283
|
|
|
142
|
-
MIT
|
|
284
|
+
MIT © [AnEntrypoint](https://github.com/AnEntrypoint)
|
|
143
285
|
|
|
144
|
-
##
|
|
286
|
+
## Links
|
|
145
287
|
|
|
146
|
-
|
|
288
|
+
- **GitHub**: https://github.com/AnEntrypoint/agentgui
|
|
289
|
+
- **npm**: https://www.npmjs.com/package/agentgui
|
|
290
|
+
- **Documentation**: https://anentrypoint.github.io/agentgui/
|
|
291
|
+
- **Issues**: https://github.com/AnEntrypoint/agentgui/issues
|
|
147
292
|
|
|
148
|
-
|
|
293
|
+
---
|
|
149
294
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
- [Issue Tracker](https://github.com/AnEntrypoint/agentgui/issues)
|
|
295
|
+
<div align="center">
|
|
296
|
+
Made with ❤️ by the AgentGUI team
|
|
297
|
+
</div>
|