Skip to content

README.md

Latest commit

 

History

History
357 lines (256 loc) · 8.74 KB

README.md

File metadata and controls

357 lines (256 loc) · 8.74 KB

Webforge

AI-powered CLI for Webdesigner. Multi-Agent. Provider-agnostic. Open Source.

Webforge ist ein Kommandozeilen-Tool mit vier spezialisierten KI-Agenten. Jeder Agent übernimmt eine Aufgabe: Audit, Code-Generierung, SEO oder Text. Du wählst den Provider frei — Claude, OpenAI, Gemini oder lokal via Ollama.

Installation

Global (empfohlen)

npm install -g webforge

Lokale Entwicklung

git clone https://github.com/dein-name/webforge.git
cd webforge
npm install
npm link        # oder: node bin/webforge.js

Erstsetup

  1. Kopiere .env.example zu .env und füge deine API-Keys ein:
cp .env.example .env
ANTHROPIC_API_KEY=sk-ant-...
OPENAI_API_KEY=sk-...
GEMINI_API_KEY=...
# Ollama braucht keinen Key — läuft auf http://localhost:11434
  1. (Optional) Erstelle eine Projekt-Konfiguration:
webforge config show

Die Config liegt in ~/.webforge/config.json oder projektspezifisch in webforge.config.json.

Quick Start

Interaktiver Modus (wie Claude Code)

Tippe einfach webforge ohne Argumente — Forgey, dein Maskottchen, begrüßt dich und du schreibst natürlichsprachlich, was du brauchst:

$ webforge

  ██╗    ██╗███████╗██████╗ ███████╗ ██████╗ ██████╗  ██████╗ ███████╗
   ...

           ╭─────────────────────────────────────────╮
          ╱  ◠‿◠                                    ╲
         │  ═══════    Willkommen bei Webforge!     │
          ╲    │      Dein AI-Partner für Webdesign ╱
           ╰───┴───╯────────────────────────────────╯
               │
          ┌────┴────┐
          │ Forgey  │
          └─────────┘

webforge › audit https://sindys-beauty.de
webforge › generate hero
webforge › seo für meine beauty website
webforge › help           # zeigt alle Befehle
webforge › tipps          # Forgey gibt dir einen Tipp 💡
webforge › status         # zeigt aktuelle Config
webforge › exit

Direkte Commands (Scripting / CI)

# 1. Website auditen
webforge audit https://sindys-beauty.de --provider ollama

# 2. SEO-Paket generieren
webforge meta https://sindys-beauty.de --lang de --business "BeautySalon"

# 3. UI-Komponente bauen
webforge generate hero --tokens ./brand.json --provider claude

# 4. Texte schreiben lassen
webforge copy headline --business "Sindy's Beauty" --lang de --tone "elegant, warm"

# 5. Freier Modus — Webforge wählt den Agenten selbst
webforge run "Erstelle mir eine komplette SEO-Strategie für meine Beauty-Website"

Forgey — Das Maskottchen

Forgey ist dein persönlicher Assistent im interaktiven Modus. Er erscheint nur, wenn du webforge ohne Argumente startest. Bei direkten Commands (z.B. webforge audit ...) bleibt er still, damit Scripts und CI-Pipelines nicht unterbrochen werden.

Was Forgey kann:

  • Begrüßt dich mit ASCII-Art beim Start
  • Gibt alle 60 Sekunden einen zufälligen Tipp (Design, Accessibility, SEO)
  • Antwortet als persönlicher Assistent auf help, tipps, status
  • Sagt dir, welcher Agent am besten passt, wenn du unklare Eingaben machst

Agenten

Agent Farbe Rolle Command
Scout Cyan Design & Accessibility Auditor webforge audit <url>
Forge Orange Code Generator (HTML/CSS/JS) webforge generate <type>
Lumen Magenta SEO & Meta Spezialist webforge meta <url>
Quill Gelb Texter & Copywriter webforge copy <type>

Befehle im Detail

webforge config

Konfiguration anzeigen oder ändern.

webforge config show
webforge config set defaultProvider claude
webforge config set agents.scout ollama
webforge config set agents.forge openai

webforge audit <url>

Scout analysiert eine Website. Er fetcht den HTML-Code, extrahiert Titel, Meta-Tags, Heading-Struktur, Alt-Texte und OG-Tags — und schickt alles an die KI.

webforge audit https://example.com
webforge audit https://example.com --provider ollama
webforge audit https://example.com --output ./reports

Output: output/audit-YYYY-MM-DD.md

webforge meta <url>

Lumen generiert ein komplettes SEO-Paket:

webforge meta https://sindys-beauty.de --lang de --business "BeautySalon"
webforge meta https://example.com --provider openai --lang en

Output in output/seo/:

  • meta-tags.html — Fertige <head>-Tags
  • schema.json — JSON-LD strukturierte Daten
  • robots.txt
  • sitemap.xml
  • llms.txt

webforge generate <type>

Forge generiert eine UI-Komponente als Semantic HTML + BEM CSS + Vanilla JS.

webforge generate hero
webforge generate navbar --tokens ./brand.json
webforge generate footer --provider claude --output ./src/components

Optionale brand.json:

{
  "colors": {
    "primary": "#FF6B35",
    "secondary": "#4ECDC4"
  },
  "fonts": {
    "heading": "Inter",
    "body": "Open Sans"
  },
  "spacing": {
    "base": "1rem"
  }
}

Output in output/components/<type>/:

  • <type>.html
  • <type>.css
  • <type>.js

webforge copy <type>

Quill schreibt Texte für lokale Businesses und Agenturen.

webforge copy headline --business "Sindy's Beauty" --lang de --tone "elegant, warm"
webforge copy about --business "OAVA Studios" --lang de
webforge copy alt --image ./hero.jpg --lang de

Output: output/copy/<type>.md (3 Varianten)

webforge run <prompt>

Freier Modus. Gib einen Prompt in natürlicher Sprache ein — Webforge wählt den passenden Agenten.

webforge run "Audit meine Website auf Accessibility-Fehler"
webforge run "Erstelle ein SEO-Paket für meinen Beauty-Salon"
webforge run "Schreibe einen Hero-Text für meine Landing Page"

Provider

Provider API Key Lokal Bemerkung
Claude ANTHROPIC_API_KEY Nein Default, sehr gute Code-Qualität
OpenAI OPENAI_API_KEY Nein GPT-4o, schnell und zuverlässig
Gemini GEMINI_API_KEY Nein Google, gute Multilingualität
Ollama — Ja Läuft auf localhost:11434, kein API-Key nötig

Jeder Befehl akzeptiert --provider <name>, um den Default zu überschreiben:

webforge audit https://example.com --provider gemini
webforge generate hero --provider openai

Konfiguration

Config-Hierarchie (höchste Priorität zuerst):

  1. CLI-Flag (--provider)
  2. webforge.config.json im aktuellen Verzeichnis
  3. ~/.webforge/config.json
  4. Built-in Defaults

Beispiel webforge.config.json:

{
  "defaultProvider": "claude",
  "defaultLang": "de",
  "agents": {
    "scout": "ollama",
    "forge": "claude",
    "lumen": "claude",
    "quill": "gemini"
  },
  "ollama": {
    "model": "llama3.2",
    "host": "http://localhost:11434"
  }
}

Erweitern

Neue Sprache hinzufügen

  1. Erstelle locales/fr.json:
{
  "scout": { "name": "Scout", "color": "cyan", "description": "Auditeur Design & Accessibilité" }
}
  1. Nutze: webforge audit ... --lang fr

Neuen Agenten erstellen (Convention)

  1. Erstelle src/agents/pixel.js mit einer run(args, options)-Funktion.
  2. Erstelle prompts/pixel.md mit dem System-Prompt.
  3. Fertig — webforge pixel <args> ist sofort verfügbar.

Community Plugin erstellen (Plugin-System)

Erstelle ein npm-Paket mit einem webforge-Feld in package.json:

{
  "name": "webforge-pixel",
  "webforge": {
    "agents": ["pixel"],
    "locales": ["fr"],
    "entry": "./plugin.js"
  }
}

plugin.js:

export default {
  register({ registerAgent, registerLocale }) {
    registerAgent('pixel', {
      promptPath: './prompts/pixel.md',
      provider: 'claude'
    });
    registerLocale('fr', { translations: require('./locales/fr.json') });
  }
};

Troubleshooting

ANTHROPIC_API_KEY is not set

Setze den Key als Umgebungsvariable oder in einer .env-Datei im Projekt-Root.

Ollama is not reachable

Stelle sicher, dass Ollama läuft:

ollama serve
# oder
ollama run llama3.2

timeout of ... exceeded

Ollama ist langsam auf älterer Hardware. Erhöhe das Timeout in der Config oder nutze einen Cloud-Provider.

Contributing

  1. Forke das Repository
  2. Erstelle einen Branch: git checkout -b feature/neuer-agent
  3. Committe deine Änderungen: git commit -am 'Neuer Agent: Pixel'
  4. Pushe zum Branch: git push origin feature/neuer-agent
  5. Erstelle einen Pull Request

License

MIT