Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>pi — setup guide | valantic</title> | |
| <style> | |
| /* valantic Route A — informativ, zurückhaltend, elegant */ | |
| :root { | |
| --black: #100C2A; | |
| --red: #FF4B4B; | |
| --orange: #FF744F; | |
| --indigo: #193773; | |
| --royal: #3c4bc8; | |
| --silver: #cdcdcd; | |
| --bg: #ffffff; | |
| } | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: 'Segoe UI', system-ui, sans-serif; | |
| background: var(--bg); | |
| color: var(--black); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| font-weight: 400; | |
| } | |
| .wrap { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1080px; | |
| margin: 0 auto; | |
| padding: 0 2.25rem; | |
| } | |
| /* Typography — Route A */ | |
| .grad { | |
| background: linear-gradient(315deg, var(--red), var(--orange)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .eyebrow { | |
| display: block; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.15em; | |
| text-transform: uppercase; | |
| color: var(--indigo); | |
| font-weight: 600; | |
| margin-bottom: 0.75rem; | |
| } | |
| .h1 { | |
| font-size: clamp(2.5rem, 5vw, 4rem); | |
| font-weight: 300; /* Segoe UI Light */ | |
| line-height: 1.1; | |
| letter-spacing: -0.02em; | |
| color: var(--black); | |
| } | |
| .h1 strong { font-weight: 600; } | |
| .h2 { | |
| font-size: clamp(1.8rem, 3vw, 2.5rem); | |
| font-weight: 300; | |
| line-height: 1.2; | |
| letter-spacing: -0.015em; | |
| color: var(--black); | |
| } | |
| .h2 strong { font-weight: 600; } | |
| .h3 { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| color: var(--indigo); | |
| margin-bottom: 0.5rem; | |
| } | |
| .lead { | |
| font-weight: 300; | |
| font-size: 1.1rem; | |
| line-height: 1.7; | |
| color: var(--black); | |
| } | |
| .mono { font-family: 'Cascadia Code', 'Consolas', monospace; } | |
| .rule { | |
| height: 1px; | |
| background: var(--silver); | |
| opacity: 0.5; | |
| } | |
| /* UI Elements */ | |
| .pill { | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all .2s ease; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| padding: 0.4rem 1rem; | |
| border: 1px solid; | |
| font-family: inherit; | |
| background: transparent; | |
| } | |
| .pill-off { border-color: var(--silver); color: var(--black); } | |
| .pill-off:hover { border-color: var(--indigo); color: var(--indigo); } | |
| .pill-on { border-color: var(--indigo); background: var(--indigo); color: #fff; } | |
| /* Cards */ | |
| .card { | |
| border: 1px solid var(--silver); | |
| border-radius: 8px; | |
| padding: 1.75rem; | |
| background: #fff; | |
| transition: border-color .2s; | |
| } | |
| .card:hover { border-color: var(--indigo); } | |
| /* Bullets */ | |
| ul.vl { list-style: none; margin-left: 0.5rem; } | |
| ul.vl li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; font-weight: 400; font-size: 0.95rem; } | |
| ul.vl li::before { | |
| content: '→'; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| color: var(--indigo); | |
| font-weight: 600; | |
| } | |
| /* Code */ | |
| .cb { | |
| background: var(--black); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| overflow-x: auto; | |
| font-family: 'Cascadia Code', 'Consolas', monospace; | |
| font-size: 0.85rem; | |
| line-height: 1.7; | |
| color: #f8f8f2; | |
| border: 1px solid rgba(205,205,205,0.2); | |
| } | |
| .cb .c { color: #6272a4; } /* comments */ | |
| .cb .k { color: #ff79c6; } /* keywords */ | |
| .cb .s { color: #f1fa8c; } /* strings */ | |
| .cb .b { color: #50fa7b; } /* bash / strong */ | |
| .cb .hi { color: #8be9fd; } /* highlight */ | |
| /* Grid */ | |
| .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } | |
| .g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } | |
| @media(max-width: 860px){ .g2, .g3 { grid-template-columns: 1fr; } } | |
| section { padding: 5rem 0; border-bottom: 1px solid rgba(205,205,205,0.3); } | |
| section:last-of-type { border-bottom: none; } | |
| .hidden { display: none !important; } | |
| ::-webkit-scrollbar { width: 6px; height: 6px; } | |
| ::-webkit-scrollbar-thumb { background: var(--silver); border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--indigo); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <header style="padding: 2.5rem 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--silver);"> | |
| <div style="font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; color: var(--black);">valantic</div> | |
| <div style="font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--indigo); font-weight: 600;">Intelligence & Engineering</div> | |
| </header> | |
| <section style="padding-top: 4rem;"> | |
| <span class="eyebrow">Setup Guide · Developer Tools</span> | |
| <h1 class="h1" style="margin-bottom: 1.5rem;"> | |
| pi coding agent<br> | |
| <strong class="grad">Customization & MAS</strong> | |
| </h1> | |
| <p class="lead" style="max-width: 720px; margin-bottom: 2rem;"> | |
| Dieser Guide dokumentiert die korrekte Einrichtung und Erweiterung des <strong>pi</strong> Terminal-Agenten. Basierend auf der offiziellen Dokumentation zeigen wir die Projekt-Customization über das <span class="mono">.pi</span> Verzeichnis sowie den Aufbau eines Multi-Agent Systems (MAS) über die <span class="mono">pi-teams</span> Extension. | |
| </p> | |
| <div class="cb" style="max-width: 720px;"> | |
| <span class="c"># Globale Installation von Node.js vorausgesetzt (v18+)</span> | |
| <span class="b">npm install -g @mariozechner/pi-coding-agent</span> | |
| <span class="c"># Authentifizierung (API-Key setzen oder OAuth via /login)</span> | |
| pi | |
| </div> | |
| </section> | |
| <section> | |
| <span class="eyebrow">Schritt 1</span> | |
| <h2 class="h2" style="margin-bottom: 2.5rem;">Offizielle <strong class="grad">Customization</strong></h2> | |
| <div class="g2" style="margin-bottom: 2rem;"> | |
| <div> | |
| <p class="lead" style="margin-bottom: 1.5rem;">Pi lässt sich tiefgreifend auf Projektbasis anpassen. Alle lokalen Modifikationen werden im <code>.pi</code> Ordner im Root-Verzeichnis des Projekts abgelegt. Pi erkennt diese Struktur automatisch beim Starten der Session.</p> | |
| <ul class="vl"> | |
| <li>Strikte Trennung von globaler und lokaler Konfiguration.</li> | |
| <li>System-Prompts ersetzen oder ergänzen.</li> | |
| <li>Skills (Tools & Prompts) modular on-demand laden.</li> | |
| <li>Programmierbare TypeScript-Extensions.</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <span class="eyebrow">Ladeverhalten</span> | |
| <p style="font-size: 0.95rem; font-weight: 400; line-height: 1.6;"> | |
| Pi liest beim Start sowohl das globale Verzeichnis <code>~/.pi/</code> als auch das lokale <code>.pi/</code> Verzeichnis des aktuellen Workspaces aus. Lokale Konfigurationen überschreiben dabei die globalen Settings. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Interactive Directory Structure --> | |
| <div style="display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; background: #fafafa; padding: 2rem; border-radius: 8px; border: 1px solid var(--silver);"> | |
| <div style="display: flex; flex-direction: column; gap: 0.5rem;"> | |
| <button class="pill pill-on dir-btn" style="text-align: left;" onclick="showDir('pi',this)">.pi/</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('system',this)">SYSTEM.md</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('append',this)">APPEND_SYSTEM.md</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('settings',this)">settings.json</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('skills',this)">skills/</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('prompts',this)">prompts/</button> | |
| <button class="pill pill-off dir-btn" style="text-align: left; margin-left: 1.5rem;" onclick="showDir('extensions',this)">extensions/</button> | |
| </div> | |
| <div> | |
| <h3 id="dir-title" class="mono h3"></h3> | |
| <p id="dir-desc" style="font-size: 1rem; color: var(--black); margin-bottom: 1.5rem;"></p> | |
| <div id="dir-code" class="cb" style="padding: 1rem;"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <span class="eyebrow">Schritt 2</span> | |
| <h2 class="h2" style="margin-bottom: 2.5rem;">Multi-Agent Systems <strong class="grad">(MAS)</strong></h2> | |
| <div class="g2" style="margin-bottom: 2rem;"> | |
| <div> | |
| <p class="lead" style="margin-bottom: 1.5rem;">Mit der offiziell unterstützten Extension <strong>pi-teams</strong> wird der einzelne Agent zu einem koordinierten Engineering-Team erweitert.</p> | |
| <p style="font-size: 1rem; margin-bottom: 1rem;">Die Extension nutzt Terminal-Multiplexer (tmux, Zellij, WezTerm, iTerm2), um autonome <em>Teammate</em>-Agenten in separaten Panes zu starten. Diese arbeiten parallel, kommunizieren miteinander und verwalten ein Shared Task Board.</p> | |
| <ul class="vl"> | |
| <li>Natives Multi-Agent Setup direkt im Terminal.</li> | |
| <li>Automatische Model-Resolution (z.B. gpt-4o, haiku).</li> | |
| <li>Smart Cleanup von verwaisten Agent-Sessions nach 1h.</li> | |
| </ul> | |
| </div> | |
| <div class="cb" style="display: flex; flex-direction: column; justify-content: center;"> | |
| <span class="c"># 1. pi-teams als Extension installieren</span> | |
| <span class="b">pi install npm:pi-teams</span> | |
| <span class="c"># 2. Team Umgebung starten (z.B. in tmux)</span> | |
| <span class="b">tmux new-session -s my-project</span> | |
| </div> | |
| </div> | |
| <div class="card" style="background: var(--black); border: none; color: #f8f8f2; padding: 2rem;"> | |
| <h3 style="font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver); margin-bottom: 1rem; font-family: 'Segoe UI', sans-serif;">Interaktion mit pi-teams</h3> | |
| <div class="cb" style="border: none; padding: 0; background: transparent;"> | |
| <span class="c"># Innerhalb der Pi-Session (im Terminal-Multiplexer):</span> | |
| <span class="hi">User:</span> "Erstelle ein Team namens 'backend-team' mit dem Modell 'gpt-4o'" | |
| <span class="c"># pi-teams orchestriert nun den Team Lead und das Board.</span> | |
| <span class="hi">User:</span> "Spawn 'security-bot' um die Dependencies nach Lücken zu scannen" | |
| <span class="c"># Ein neuer Pane öffnet sich, der spezialisierte Agent übernimmt den Task.</span> | |
| <span class="hi">User:</span> "Spawn 'frontend-dev' mit Modell 'haiku' für schnelle React Iterationen" | |
| <span class="c"># Ein weiterer Agent wird im Split-Pane mit spezifischem Modell gestartet.</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <span class="eyebrow">Referenz</span> | |
| <h2 class="h2" style="margin-bottom: 2rem;">Wichtige <strong class="grad">Befehle</strong></h2> | |
| <div class="g3"> | |
| <div class="card"> | |
| <h3 class="h3" style="font-size: 1rem;">Sitzungsverwaltung</h3> | |
| <div class="rule" style="margin: 0.5rem 0 1rem;"></div> | |
| <ul class="vl" style="font-size: 0.9rem;"> | |
| <li><span class="mono">pi</span> Interaktive TUI</li> | |
| <li><span class="mono">pi -c</span> Letzte Session fortführen</li> | |
| <li><span class="mono">pi -r</span> Vergangene Session auswählen</li> | |
| <li><span class="mono">pi --no-session</span> Ohne Historie starten</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3 class="h3" style="font-size: 1rem;">Shortcuts (In-Session)</h3> | |
| <div class="rule" style="margin: 0.5rem 0 1rem;"></div> | |
| <ul class="vl" style="font-size: 0.9rem;"> | |
| <li><span class="mono">Ctrl+L</span> Provider/Model wechseln</li> | |
| <li><span class="mono">/skill <name></span> Skill aktivieren</li> | |
| <li><span class="mono">/<template></span> Prompt-Template laden</li> | |
| <li><span class="mono">@datei</span> Kontext referenzieren</li> | |
| </ul> | |
| </div> | |
| <div class="card"> | |
| <h3 class="h3" style="font-size: 1rem;">Teams (pi-teams)</h3> | |
| <div class="rule" style="margin: 0.5rem 0 1rem;"></div> | |
| <ul class="vl" style="font-size: 0.9rem;"> | |
| <li>Benötigt: <span class="mono">tmux</span>, <span class="mono">zellij</span>, o.ä.</li> | |
| <li>Start per Prompt: <span class="mono">"Create a team..."</span></li> | |
| <li>Cleanup: Automatisch nach 1 Stunde (<span class="mono">~/.pi/agent/teams/</span>)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <footer style="display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; font-size: 0.8rem; color: var(--silver); border-top: 1px solid var(--silver); margin-top: 2rem;"> | |
| <div style="font-weight: 600; color: var(--black);">valantic Route A Layout</div> | |
| <div>pi-mono documentation & pi-teams integration</div> | |
| </footer> | |
| </div> | |
| <script> | |
| const dirs = { | |
| pi: { | |
| t: '.pi/', | |
| d: 'Root-Verzeichnis für alle projektlokalen Konfigurationen. Alles hier überschreibt die globalen Settings unter ~/.pi/agent/.', | |
| c: '<span class="c"># Verzeichnis im Root des Projekts anlegen</span>\n<span class="b">mkdir .pi</span>' | |
| }, | |
| system: { | |
| t: '.pi/SYSTEM.md', | |
| d: 'Ersetzt den vollständigen, globalen System-Prompt von Pi für dieses spezifische Projekt. Nutze dies, um die Identität und grundlegenden Verhaltensweisen von Grund auf neu zu definieren.', | |
| c: '<span class="c"># Definiert die Kern-Identität des Agenten neu</span>\nDu bist ein Senior TypeScript Developer für das Projekt X...' | |
| }, | |
| append: { | |
| t: '.pi/APPEND_SYSTEM.md', | |
| d: 'Die bevorzugte Methode, um projektspezifische Coding-Guidelines anzugeben. Dieser Text wird an den bestehenden Pi System-Prompt angehängt, sodass die Basis-Werkzeuge von Pi intakt bleiben.', | |
| c: '<span class="c"># Wird an den Basis-Prompt angehängt</span>\n## Projektrichtlinien\n- Nutze immer funktionale Komponenten in React\n- Strict-Mode für TypeScript ist zwingend' | |
| }, | |
| settings: { | |
| t: '.pi/settings.json', | |
| d: 'Projektlokale Konfigurationsdatei. Hier können Provider, Modelle, das Thinking-Level oder UI-Präferenzen für den aktuellen Workspace fixiert werden.', | |
| c: '{\n "provider": "anthropic",\n "model": "claude-3-7-sonnet-20250219",\n "thinkingLevel": "low"\n}' | |
| }, | |
| skills: { | |
| t: '.pi/skills/', | |
| d: 'Skills sind logische Gruppierungen von Werkzeugen und Anweisungen. Ein Skill wird als Ordner angelegt, der zwingend eine SKILL.md Datei enthält. Skills werden bei Bedarf über den Befehl /skill <name> in den Kontext geladen.', | |
| c: '<span class="c"># Ordnerstruktur für einen Skill</span>\n.pi/skills/research/SKILL.md\n\n<span class="c"># In der Session aktivieren</span>\n/skill research' | |
| }, | |
| prompts: { | |
| t: '.pi/prompts/', | |
| d: 'Verzeichnis für wiederverwendbare Prompt-Templates. Erstelle z.B. eine review.md. In der Session kann der Inhalt dieser Datei per Slash-Command als Prompt-Grundlage in die Eingabe geladen werden.', | |
| c: '<span class="c"># Erstelle .pi/prompts/cr.md</span>\nBitte führe ein Code-Review für die letzen Änderungen durch.\n\n<span class="c"># In der Session abrufen</span>\n/cr' | |
| }, | |
| extensions: { | |
| t: '.pi/extensions/', | |
| d: 'TypeScript/JavaScript Dateien, die Pi um native Funktionen erweitern. Extensions haben vollen Zugriff auf die Pi TUI, Commands und Tools API. Die pi-teams Extension dockt beispielsweise an genau dieses System an.', | |
| c: '<span class="c"># Werden automatisch beim Start geladen</span>\n.pi/extensions/my-custom-tool.ts' | |
| } | |
| }; | |
| function showDir(k, btn) { | |
| const d = dirs[k]; | |
| document.getElementById('dir-title').textContent = d.t; | |
| document.getElementById('dir-desc').textContent = d.d; | |
| document.getElementById('dir-code').innerHTML = d.c; | |
| document.querySelectorAll('.dir-btn').forEach(b => { | |
| b.classList.remove('pill-on'); | |
| b.classList.add('pill-off'); | |
| }); | |
| btn.classList.remove('pill-off'); | |
| btn.classList.add('pill-on'); | |
| } | |
| // Initiale Auswahl setzen | |
| document.addEventListener("DOMContentLoaded", () => { | |
| showDir('pi', document.querySelector('.dir-btn')); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |