agentgui 1.0.577 → 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/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>
|