-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathinstall.html
More file actions
271 lines (256 loc) · 20.4 KB
/
install.html
File metadata and controls
271 lines (256 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Install Zikra — 3 Steps to Persistent AI Memory</title>
<meta name="description" content="Install Zikra in 3 steps: run the server, connect MCP in Claude Code, run the onboarding prompt. Takes about 5 minutes.">
<link rel="canonical" href="https://zikra.dev/install.html" />
<meta property="og:title" content="How to Install Zikra — 3 Steps to Persistent AI Memory" />
<meta property="og:description" content="Install Zikra in 3 steps: run the server, connect MCP in Claude Code, run the onboarding prompt. Takes about 5 minutes." />
<meta property="og:url" content="https://zikra.dev/install.html" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://zikra.dev/assets/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://zikra.dev/assets/og-image.png" />
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"></noscript>
</head>
<body>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="blob blob-3"></div>
<nav class="navbar glass">
<a href="index.html" class="logo"><span class="z">Z</span><span class="ikra">ikra</span></a>
<div class="nav-links">
<a href="index.html">Zikra</a>
<a href="screenshots.html">Screenshots</a>
<a href="install.html">How to Install</a>
<a href="promote.html">Promote</a>
<a href="changelog.html">Changelog</a>
<a href="license.html">MIT</a>
</div>
<a href="changelog.html" class="version-badge" id="version-badge">v1.0.13</a>
</nav>
<!-- ── Hero ──────────────────────────────────────────────────────────────────── -->
<header class="hero reveal" style="padding-bottom:2rem;">
<div class="badge">5 minute setup</div>
<h1 class="hero-title">Get started in <span class="gradient-text">3 steps</span></h1>
<p class="hero-sub">
From zero to persistent memory across every session.<br>
One server, one MCP connection, one prompt.
</p>
</header>
<!-- ── Steps ─────────────────────────────────────────────────────────────────── -->
<section class="section reveal" style="padding-top:0;">
<div style="max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:2rem;">
<!-- Step 1 -->
<div class="card glass" style="padding:2.5rem;">
<div style="display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;">
<div class="card-icon" style="flex-shrink:0;width:3rem;height:3rem;font-size:1.4rem;">1</div>
<div style="flex:1;min-width:260px;">
<h2 style="font-size:1.5rem;margin-bottom:0.5rem;">Install the server</h2>
<p style="color:var(--muted);margin-bottom:1.25rem;">
Clone the repo and run the interactive installer. Zikra is a single Python process — no Docker, no database setup, no config files to hand-write. The installer generates your admin token and writes a <code style="color:#FFB77A;font-size:0.88em;">.env</code> file automatically.
</p>
<div class="code-block" style="margin-bottom:1rem;">
<span class="c-prompt">$</span> git clone https://github.com/GetZikra/zikra
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> cd zikra && pip install -e .</span>
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 installer.py</span>
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 -m zikra</span>
<span style="display:block;margin-top:0.75rem;" class="c-success">✓ Zikra running on http://localhost:8000</span>
</div>
<div class="card glass" style="padding:1rem 1.25rem;background:rgba(255,183,122,0.04);">
<p style="font-size:0.88rem;color:var(--muted);margin:0;">
<strong style="color:#FFB77A;">Expose to other machines</strong> — run Cloudflare Tunnel for a free, permanent public URL:
</p>
<div class="code-block" style="margin-top:0.6rem;padding:0.6rem 1rem;font-size:0.82rem;">
<span class="c-prompt">$</span> cloudflared tunnel --url http://localhost:8000
<span style="display:block;margin-top:0.3rem;" class="c-success">✓ https://zikra.yourteam.com</span>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="card glass" style="padding:2.5rem;">
<div style="display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;">
<div class="card-icon" style="flex-shrink:0;width:3rem;height:3rem;font-size:1.4rem;">2</div>
<div style="flex:1;min-width:260px;">
<h2 style="font-size:1.5rem;margin-bottom:0.5rem;">Enable MCP in Claude Code</h2>
<p style="color:var(--muted);margin-bottom:1.25rem;">
Open <strong style="color:var(--text);">Claude Code → Settings → MCP → Add Server</strong> and paste your server's endpoint. This gives Claude Code native access to Zikra tools — search, save, and recall memory directly from any conversation.
</p>
<div class="code-block" style="margin-bottom:1rem;">
<span class="c-key">"mcpServers"</span><span style="color:var(--muted);">: {</span>
<span style="display:block;padding-left:1.25rem;"><span class="c-key">"zikra"</span><span style="color:var(--muted);">: {</span></span>
<span style="display:block;padding-left:2.5rem;"><span class="c-key">"url"</span><span style="color:var(--muted);">: </span><span class="c-val">"http://your-server:8000/mcp"</span><span style="color:var(--muted);">,</span></span>
<span style="display:block;padding-left:2.5rem;"><span class="c-key">"headers"</span><span style="color:var(--muted);">: {</span><span class="c-key">"Authorization"</span><span style="color:var(--muted);">: </span><span class="c-val">"Bearer YOUR_TOKEN"</span><span style="color:var(--muted);">}</span></span>
<span style="display:block;padding-left:1.25rem;color:var(--muted);">}</span>
<span style="color:var(--muted);">}</span>
</div>
<p style="font-size:0.88rem;color:var(--muted);">
Replace <code style="color:#FFB77A;font-size:0.88em;">your-server:8000</code> with <code style="color:#FFB77A;font-size:0.88em;">localhost:8000</code> for a local install, or your Cloudflare Tunnel URL for remote access. The installer writes this automatically for local installs — you can skip this step if you ran it on the same machine.
</p>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="card glass" style="padding:2.5rem;">
<div style="display:flex;align-items:flex-start;gap:1.5rem;flex-wrap:wrap;">
<div class="card-icon" style="flex-shrink:0;width:3rem;height:3rem;font-size:1.4rem;">3</div>
<div style="flex:1;min-width:260px;">
<h2 style="font-size:1.5rem;margin-bottom:0.5rem;">Connect your AI coding agent</h2>
<p style="color:var(--muted);margin-bottom:1.25rem;">
Paste the prompt for your agent into a session. Handles both first install and updates — run the same prompt any time to install or refresh.
</p>
<p style="font-size:0.88rem;color:var(--text);margin-bottom:0.5rem;"><strong>Claude Code</strong></p>
<div class="code-block" style="margin-bottom:1.25rem;">
<span style="color:#FFB77A;">Fetch https://raw.githubusercontent.com/GetZikra/zikra/main/prompts/zikra-claude-code-setup.md</span>
<span style="display:block;margin-top:0.4rem;color:#FFB77A;">and follow every instruction in it.</span>
</div>
<p style="font-size:0.88rem;color:var(--text);margin-bottom:0.5rem;"><strong>Gemini CLI</strong></p>
<p style="font-size:0.85rem;color:var(--muted);margin-bottom:0.5rem;">
Re-run the installer and choose <strong>Gemini CLI</strong> when asked "Other AI tools to integrate with?". The installer writes hook entries into <code style="color:#FFB77A;font-size:0.85em;">~/.gemini/settings.json</code> automatically.
</p>
<div class="code-block" style="margin-bottom:0.5rem;">
<span class="c-comment"># If you already ran the installer, re-run it:</span>
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 installer.py</span>
<span style="display:block;margin-top:0.6rem;color:var(--muted);font-size:0.85em;"> Other AI tools to integrate with?</span>
<span style="display:block;color:var(--muted);font-size:0.85em;"> [2] Gemini CLI (detected)</span>
</div>
<p style="font-size:0.82rem;color:var(--muted);margin-bottom:1.25rem;">
Hooks fire on <code style="color:#FFB77A;font-size:0.85em;">AfterModel</code> and <code style="color:#FFB77A;font-size:0.85em;">SessionEnd</code>. Token counts are parsed from the Gemini JSONL transcript. The same statusline bar you see in Claude Code appears before each terminal prompt.
</p>
<p style="font-size:0.88rem;color:var(--text);margin-bottom:0.5rem;"><strong>Codex CLI</strong></p>
<p style="font-size:0.85rem;color:var(--muted);margin-bottom:0.5rem;">
Same installer step — choose <strong>Codex CLI</strong> or <strong>Both</strong>. Writes hook entries into <code style="color:#FFB77A;font-size:0.85em;">~/.codex/config.toml</code> (or <code style="color:#FFB77A;font-size:0.85em;">hooks.json</code> on newer Codex versions).
</p>
<div class="code-block" style="margin-bottom:0.5rem;">
<span class="c-comment"># Re-run installer and pick Codex or Both:</span>
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 installer.py</span>
<span style="display:block;margin-top:0.6rem;color:var(--muted);font-size:0.85em;"> Other AI tools to integrate with?</span>
<span style="display:block;color:var(--muted);font-size:0.85em;"> [3] Codex CLI (detected)</span>
<span style="display:block;color:var(--muted);font-size:0.85em;"> [4] Both Gemini and Codex</span>
</div>
<p style="font-size:0.82rem;color:var(--muted);margin-bottom:1.25rem;">
Hooks fire on <code style="color:#FFB77A;font-size:0.85em;">Stop</code> and <code style="color:#FFB77A;font-size:0.85em;">PostToolUse</code>. Token counts are parsed from <code style="color:#FFB77A;font-size:0.85em;">history.jsonl</code>. Shell statusline sourced into your RC file automatically.
</p>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:1rem;">
Claude Code will ask for your server URL and token, then install:
</p>
<div class="grid-3" style="gap:1rem;">
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;">
<div style="font-size:1.3rem;margin-bottom:0.4rem;">🪝</div>
<strong style="font-size:0.9rem;">Stop hook</strong>
<p style="font-size:0.82rem;color:var(--muted);margin:0.3rem 0 0;">Auto-saves a memory at the end of every Claude Code session. You never have to type "save this".</p>
</div>
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;">
<div style="font-size:1.3rem;margin-bottom:0.4rem;">⚡</div>
<strong style="font-size:0.9rem;">PreCompact hook</strong>
<p style="font-size:0.82rem;color:var(--muted);margin:0.3rem 0 0;">Saves context before Claude compacts long conversations, so nothing is lost when the context window fills.</p>
</div>
<div style="background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:1rem;">
<div style="font-size:1.3rem;margin-bottom:0.4rem;">📊</div>
<strong style="font-size:0.9rem;">Statusline bar</strong>
<p style="font-size:0.82rem;color:var(--muted);margin:0.3rem 0 0;">Live bar below the input showing run counts, memory count, and context usage.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ── After install ──────────────────────────────────────────────────────────── -->
<section class="section reveal">
<div style="max-width:860px;margin:0 auto;">
<h2 class="section-title" style="text-align:left;margin-bottom:0.5rem;">What happens from here</h2>
<p style="color:var(--muted);margin-bottom:2rem;">Once the onboarding prompt finishes, memory is live from the first message of every new session.</p>
<div class="grid-3" style="gap:1.25rem;">
<div class="card glass">
<div class="card-icon" style="font-size:1.6rem;">💾</div>
<h3 style="font-size:1rem;">Every session is saved</h3>
<p style="font-size:0.88rem;color:var(--muted);">When you end a Claude Code session, the Stop hook fires automatically and saves a summary to Zikra. No manual action needed.</p>
</div>
<div class="card glass">
<div class="card-icon" style="font-size:1.6rem;">🔍</div>
<h3 style="font-size:1rem;">Memory is searchable</h3>
<p style="font-size:0.88rem;color:var(--muted);">Ask Claude "what did we decide about auth?" and it searches Zikra automatically using hybrid vector + keyword search.</p>
</div>
<div class="card glass">
<div class="card-icon" style="font-size:1.6rem;">🌐</div>
<h3 style="font-size:1rem;">Works across machines</h3>
<p style="font-size:0.88rem;color:var(--muted);">Run the same onboarding prompt on any machine. Every machine connects to the same memory pool — one server, every device.</p>
</div>
</div>
</div>
</section>
<!-- ── Updating ───────────────────────────────────────────────────────────────── -->
<section class="section reveal">
<div style="max-width:860px;margin:0 auto;">
<h2 class="section-title" style="text-align:left;margin-bottom:0.5rem;">Keeping Zikra updated</h2>
<p style="color:var(--muted);margin-bottom:2rem;">Server and Claude Code hooks update independently. Both are one command.</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:1.5rem;">
<div class="card glass" style="padding:2rem;">
<h3 style="margin-bottom:0.5rem;">Update the server</h3>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:1rem;">Pull latest and restart. Your <code style="color:#FFB77A;font-size:0.85em;">.env</code> and database are untouched.</p>
<div class="code-block">
<span class="c-prompt">$</span> git pull origin main
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> pip install -e .</span>
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 -m zikra</span>
</div>
</div>
<div class="card glass" style="padding:2rem;">
<h3 style="margin-bottom:0.5rem;">Update hooks (all tools)</h3>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:1rem;">
<strong>Claude Code</strong> — re-run the onboarding prompt. Detects your existing install, refreshes only what changed, preserves token and config.
</p>
<div class="code-block" style="margin-bottom:1rem;">
<span style="color:#FFB77A;">Fetch https://raw.githubusercontent.com/</span>
<span style="display:block;color:#FFB77A;">GetZikra/zikra/main/prompts/zikra-claude-code-setup.md</span>
<span style="display:block;color:#FFB77A;">and follow every instruction in it.</span>
</div>
<p style="font-size:0.88rem;color:var(--muted);margin-bottom:0.75rem;">
<strong>Gemini CLI / Codex CLI</strong> — re-run the installer. Hook scripts are replaced in-place; tool configs are updated non-destructively.
</p>
<div class="code-block">
<span class="c-prompt">$</span> git pull origin main
<span style="display:block;margin-top:0.4rem;"><span class="c-prompt">$</span> python3 installer.py</span>
</div>
<p style="font-size:0.82rem;color:var(--muted);margin-top:0.75rem;">MCP server settings never need manual updates.</p>
</div>
</div>
</div>
</section>
<!-- ── CTA ────────────────────────────────────────────────────────────────────── -->
<section class="reveal">
<div class="cta-band">
<h2>Questions? <span class="gradient-text">Open an issue.</span></h2>
<p>Zikra is actively used and maintained. Bugs get fixed fast.</p>
<div class="btn-row">
<a href="https://github.com/GetZikra/zikra" class="btn btn-primary btn-lg btn-glow" target="_blank" rel="noopener">GitHub</a>
<a href="index.html" class="btn btn-ghost btn-lg">← Back to Zikra</a>
</div>
</div>
</section>
<footer class="glass">
<div class="footer-inner">
<a href="index.html" class="logo"><span class="z">Z</span><span class="ikra">ikra</span></a>
<span class="footer-copy">© 2026 Zikra Contributors — MIT Licensed</span>
<div class="footer-links">
<a href="index.html">Zikra</a>
<a href="install.html">How to Install</a>
<a href="license.html">MIT</a>
<a href="https://github.com/GetZikra/zikra" target="_blank" rel="noopener">GitHub</a>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>