agentgui 1.0.575 → 1.0.577
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 +293 -88
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,297 @@
|
|
|
1
1
|
# AgentGUI
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
<div align="center">
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
**Multi-agent GUI for AI coding assistants**
|
|
8
|
+
|
|
9
|
+
[](https://anentrypoint.github.io/agentgui/)
|
|
10
|
+
[](https://www.npmjs.com/package/agentgui)
|
|
4
11
|
[](https://www.npmjs.com/package/agentgui)
|
|
12
|
+
[](LICENSE)
|
|
13
|
+
|
|
14
|
+
[Quick Start](#quick-start) • [Features](#features) • [Screenshots](#screenshots) • [Architecture](#architecture) • [Documentation](https://anentrypoint.github.io/agentgui/)
|
|
15
|
+
|
|
16
|
+
</div>
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
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.
|
|
23
|
+
|
|
24
|
+
## Quick Start
|
|
25
|
+
|
|
26
|
+
### One-Line Install
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
npx agentgui
|
|
30
|
+
```
|
|
31
|
+
|
|
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
|
+
|
|
95
|
+
|
|
96
|
+
### Chat & Conversation Views
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
### File Browser
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
### Terminal Execution
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
### Tools Management
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
## Architecture
|
|
111
|
+
|
|
112
|
+
```
|
|
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
|
+
└───────────────────┘
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### Key Components
|
|
141
|
+
|
|
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 |
|
|
163
|
+
|
|
164
|
+
## REST API
|
|
165
|
+
|
|
166
|
+
All routes prefixed with `BASE_URL` (default `/gm`):
|
|
167
|
+
|
|
168
|
+
### Conversations
|
|
169
|
+
- `GET /api/conversations` - List all conversations
|
|
170
|
+
- `POST /api/conversations` - Create new conversation
|
|
171
|
+
- `GET /api/conversations/:id` - Get conversation details
|
|
172
|
+
- `DELETE /api/conversations/:id` - Delete conversation
|
|
173
|
+
|
|
174
|
+
### Messages & Streaming
|
|
175
|
+
- `POST /api/conversations/:id/messages` - Send message to agent
|
|
176
|
+
- `POST /api/conversations/:id/stream` - Start streaming execution
|
|
177
|
+
- `GET /api/conversations/:id/chunks` - Get stream chunks
|
|
178
|
+
|
|
179
|
+
### Agents & Tools
|
|
180
|
+
- `GET /api/agents` - List discovered agents
|
|
181
|
+
- `GET /api/tools` - List available tools
|
|
182
|
+
- `POST /api/tools/:id/install` - Install tool
|
|
183
|
+
- `POST /api/tools/:id/update` - Update tool
|
|
184
|
+
|
|
185
|
+
### Speech
|
|
186
|
+
- `POST /api/stt` - Speech-to-text (raw audio)
|
|
187
|
+
- `POST /api/tts` - Text-to-speech (returns audio)
|
|
188
|
+
- `GET /api/speech-status` - Model download status
|
|
189
|
+
|
|
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 }`
|
|
194
|
+
|
|
195
|
+
## Text-to-Speech Setup (Windows)
|
|
196
|
+
|
|
197
|
+
AgentGUI automatically configures text-to-speech on first use:
|
|
198
|
+
|
|
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
|
|
203
|
+
|
|
204
|
+
**Requirements**: Python 3.9+, ~200MB disk space, internet connection
|
|
205
|
+
|
|
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
|
|
212
|
+
|
|
213
|
+
### Running in Dev Mode
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
npm run dev
|
|
217
|
+
```
|
|
218
|
+
|
|
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
|
|
242
|
+
```
|
|
243
|
+
|
|
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
|
|
266
|
+
|
|
267
|
+
### Speech Models Not Downloading
|
|
268
|
+
- Check internet connection
|
|
269
|
+
- Verify `~/.gmgui/models/` is writable
|
|
270
|
+
- Monitor download via `/api/speech-status`
|
|
271
|
+
|
|
272
|
+
## Contributing
|
|
273
|
+
|
|
274
|
+
Contributions welcome! Please:
|
|
275
|
+
|
|
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
|
|
281
|
+
|
|
282
|
+
## License
|
|
283
|
+
|
|
284
|
+
MIT © [AnEntrypoint](https://github.com/AnEntrypoint)
|
|
285
|
+
|
|
286
|
+
## Links
|
|
287
|
+
|
|
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
|
|
292
|
+
|
|
293
|
+
---
|
|
5
294
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npx agentgui
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
Or install and run manually:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
git clone https://github.com/AnEntrypoint/agentgui.git
|
|
19
|
-
cd agentgui
|
|
20
|
-
npm install
|
|
21
|
-
npm run dev
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
Open `http://localhost:3000` in your browser.
|
|
25
|
-
|
|
26
|
-
## 📊 Project Stats
|
|
27
|
-
|
|
28
|
-
Check out our **[GitHub Pages site](https://anentrypoint.github.io/agentgui/)** for:
|
|
29
|
-
|
|
30
|
-
- 📈 Live weekly download statistics
|
|
31
|
-
- ⭐ Star the project button
|
|
32
|
-
- ✨ Feature highlights
|
|
33
|
-
- 🚀 Quick start guide
|
|
34
|
-
|
|
35
|
-
The site automatically updates on every push to main with the latest npm download data.
|
|
36
|
-
|
|
37
|
-
## What It Does
|
|
38
|
-
|
|
39
|
-
- Auto-discovers AI coding agents installed on your system (Claude Code, Gemini CLI, OpenCode, Goose, Codex, Kiro, etc.)
|
|
40
|
-
- Runs agents with streaming JSON output and displays results in real-time via WebSocket
|
|
41
|
-
- Manages conversations with SQLite persistence
|
|
42
|
-
- Supports concurrent agent sessions
|
|
43
|
-
- Provides file browsing and upload for agent working directories
|
|
44
|
-
- Includes speech-to-text and text-to-speech
|
|
45
|
-
|
|
46
|
-
## Architecture
|
|
47
|
-
|
|
48
|
-
- `server.js` - HTTP server, REST API, WebSocket endpoint, static file serving
|
|
49
|
-
- `database.js` - SQLite database (WAL mode) at `~/.gmgui/data.db`
|
|
50
|
-
- `lib/claude-runner.js` - Agent runner framework, spawns CLI processes and parses streaming output
|
|
51
|
-
- `lib/speech.js` - Speech processing via Hugging Face transformers
|
|
52
|
-
- `static/` - Browser client with streaming renderer, WebSocket manager, and HTML templates
|
|
53
|
-
- `bin/gmgui.cjs` - CLI entry point for `npx agentgui`
|
|
54
|
-
|
|
55
|
-
## Text-to-Speech on Windows
|
|
56
|
-
|
|
57
|
-
On Windows, AgentGUI automatically sets up pocket-tts (text-to-speech) on your first TTS request. No manual setup required.
|
|
58
|
-
|
|
59
|
-
### What Happens
|
|
60
|
-
1. Server detects Python 3.9+ installation
|
|
61
|
-
2. Creates virtual environment at `~/.gmgui/pocket-venv`
|
|
62
|
-
3. Installs pocket-tts via pip
|
|
63
|
-
4. All subsequent TTS requests use cached installation
|
|
64
|
-
|
|
65
|
-
### Requirements
|
|
66
|
-
- Python 3.9+ (check with `python --version`)
|
|
67
|
-
- ~200 MB free disk space
|
|
68
|
-
- Internet connection for first setup
|
|
69
|
-
|
|
70
|
-
### Troubleshooting
|
|
71
|
-
- **Python not found**: Download from https://www.python.org and ensure "Add Python to PATH" is checked
|
|
72
|
-
- **Setup fails**: Check that you have write access to your home directory (~/.gmgui/)
|
|
73
|
-
- **Manual cleanup**: Delete `%USERPROFILE%\.gmgui\pocket-venv` and try again
|
|
74
|
-
|
|
75
|
-
For manual setup or detailed troubleshooting, see the setup instructions in the code or check `/api/speech-status` endpoint for error details.
|
|
76
|
-
|
|
77
|
-
## Configuration
|
|
78
|
-
|
|
79
|
-
| Variable | Default | Description |
|
|
80
|
-
|----------|---------|-------------|
|
|
81
|
-
| `PORT` | 3000 | Server port |
|
|
82
|
-
| `BASE_URL` | /gm | URL prefix |
|
|
83
|
-
| `HOT_RELOAD` | true | Watch mode for development |
|
|
84
|
-
|
|
85
|
-
## License
|
|
86
|
-
|
|
87
|
-
MIT
|
|
88
|
-
|
|
89
|
-
## Repository
|
|
90
|
-
|
|
91
|
-
https://github.com/AnEntrypoint/agentgui
|
|
92
|
-
|
|
295
|
+
<div align="center">
|
|
296
|
+
Made with ❤️ by the AgentGUI team
|
|
297
|
+
</div>
|