🧩 Kittle — AI-Powered Code Intelligence Hub
Rôle
Agent de code intelligence qui analyse les repositories, debug la logique complexe, et génère des diagrams d'architecture en temps réel via multi-modèles IA.
Ce que fait Kittle (d'après l'image)
🎯 Core Features
- Multi-Model Intelligence : Connecte à Gemini 2.0/Thinking, GPT-4o, Claude 3.5, DeepSeek R1 via API directe
- Design Mode : Interface visuelle pour designer et explorer le code
- Instant Mermaid.js Architecture Diagrams : Chats avec le code → génère des diagrams d'architecture en temps réel
- Live Demo : Démo en direct des capacités
- Next.js + TypeScript + Tailwind CSS : Stack technique du site
🔧 Ce que l'agent Kittle fait concrètement
- Analyser un repository GitHub/local → comprendre la structure, les dépendances, les patterns
- Générer des diagrams Mermaid.js d'architecture en discutant avec le code
- Debugger la logique complexe en croisant plusieurs modèles (un pour analyser, un pour proposer des fixes)
- Documenter automatiquement le code analysé
- Explorer le code en mode design (vue visuelle + code)
Stack Technique (de l'image)
- Frontend : Next.js + TypeScript + Tailwind CSS
- Logo : K stylisé (4 formes qui s'overlapent : rouge, rose, jaune, bleu)
- Tags : LIVE, DEMO, NEXT.JS, TYPESCRIPT, TAILWIND CSS
- Couleurs : Background sombre (gray-900/950), texte blanc, accents vert/bleu/jaune
- Modèles connectés : Gemini 2.0/Thinking, GPT-4o, Claude 3.5, DeepSeek R1
Architecture Kittle
Utilisateur (chat)
↓
Kittle Agent (routing multi-modèle)
├── Gemini 2.0 → Analyse structurelle, thinking profond
├── GPT-4o → Génération de code, fixes rapides
├── Claude 3.5 → Refactoring, architecture clean
└── DeepSeek R1 → Raisonnement complexe, debug profond
↓
Mermaid.js Diagrams (output visuel)
↓
Codebase (analyse + documentation auto)
Workflow typique
- Pointer vers un repo ou un dossier de code
- Scanner la structure (fichiers, dépendances, patterns)
- Générer un diagramme Mermaid.js de l'architecture
- Discuter avec le code (poser des questions, demander des refactorings)
- Debugger en croisant les modèles pour validation croisée
- Documenter les insights dans le Knowledge Graph
Comment construire Kittle
- Site web : Next.js 14 + TypeScript + Tailwind CSS (même stack que Heziri)
- Design : Dark theme, logo K coloré, tags LIVE/DEMO
- API : Routes Next.js qui proxym vers les modèles IA
- Mermaid.js : Génération de diagrams en temps réel via chat
- Design Mode : Vue split (code + diagramme côte à côte)
Connexions Knowledge Graph
- [[project-botflow-dz]] — Même stack (Next.js + Tailwind)
- [[project-heziri]] — Déployé sur le même VPS
- [[tool-model-routing]] — Routing multi-modèle (même concept)
- [[agent-fullstack-developer]] — Pour construire le frontend
- [[agent-builder-architecte]] — Pour l'architecture multi-agents
1---2name: agent-kittle-code-intelligence3description: Kittle Agent — AI-Powered Code Intelligence Hub. Analyse de repos, debug, architecture diagrams (Mermaid.js), multi-model intelligence (Gemini 2.0, GPT-4o, Claude 3.5, DeepSeek R1). Design mode + live demo.4---56# 🧩 Kittle — AI-Powered Code Intelligence Hub78## Rôle9Agent de code intelligence qui analyse les repositories, debug la logique complexe, et génère des diagrams d'architecture en temps réel via multi-modèles IA.1011## Ce que fait Kittle (d'après l'image)1213### 🎯 Core Features14- **Multi-Model Intelligence** : Connecte à Gemini 2.0/Thinking, GPT-4o, Claude 3.5, DeepSeek R1 via API directe15- **Design Mode** : Interface visuelle pour designer et explorer le code16- **Instant Mermaid.js Architecture Diagrams** : Chats avec le code → génère des diagrams d'architecture en temps réel17- **Live Demo** : Démo en direct des capacités18- **Next.js + TypeScript + Tailwind CSS** : Stack technique du site1920### 🔧 Ce que l'agent Kittle fait concrètement211. **Analyser** un repository GitHub/local → comprendre la structure, les dépendances, les patterns222. **Générer** des diagrams Mermaid.js d'architecture en discutant avec le code233. **Debugger** la logique complexe en croisant plusieurs modèles (un pour analyser, un pour proposer des fixes)244. **Documenter** automatiquement le code analysé255. **Explorer** le code en mode design (vue visuelle + code)2627## Stack Technique (de l'image)28- **Frontend** : Next.js + TypeScript + Tailwind CSS29- **Logo** : K stylisé (4 formes qui s'overlapent : rouge, rose, jaune, bleu)30- **Tags** : LIVE, DEMO, NEXT.JS, TYPESCRIPT, TAILWIND CSS31- **Couleurs** : Background sombre (gray-900/950), texte blanc, accents vert/bleu/jaune32- **Modèles connectés** : Gemini 2.0/Thinking, GPT-4o, Claude 3.5, DeepSeek R13334## Architecture Kittle35```36Utilisateur (chat)37 ↓38Kittle Agent (routing multi-modèle)39 ├── Gemini 2.0 → Analyse structurelle, thinking profond40 ├── GPT-4o → Génération de code, fixes rapides41 ├── Claude 3.5 → Refactoring, architecture clean42 └── DeepSeek R1 → Raisonnement complexe, debug profond43 ↓44Mermaid.js Diagrams (output visuel)45 ↓46Codebase (analyse + documentation auto)47```4849## Workflow typique501. **Pointer** vers un repo ou un dossier de code512. **Scanner** la structure (fichiers, dépendances, patterns)523. **Générer** un diagramme Mermaid.js de l'architecture534. **Discuter** avec le code (poser des questions, demander des refactorings)545. **Debugger** en croisant les modèles pour validation croisée556. **Documenter** les insights dans le Knowledge Graph5657## Comment construire Kittle58- **Site web** : Next.js 14 + TypeScript + Tailwind CSS (même stack que Heziri)59- **Design** : Dark theme, logo K coloré, tags LIVE/DEMO60- **API** : Routes Next.js qui proxym vers les modèles IA61- **Mermaid.js** : Génération de diagrams en temps réel via chat62- **Design Mode** : Vue split (code + diagramme côte à côte)6364## Connexions Knowledge Graph65- [[project-botflow-dz]] — Même stack (Next.js + Tailwind)66- [[project-heziri]] — Déployé sur le même VPS67- [[tool-model-routing]] — Routing multi-modèle (même concept)68- [[agent-fullstack-developer]] — Pour construire le frontend69- [[agent-builder-architecte]] — Pour l'architecture multi-agents
ziri22