Guide complet pour intégrer Devana.ai dans vos applications web et créer des outils personnalisés.
🎯 Types d'intégration disponibles
🖼️ Intégration IFrame
📄 Documentation : iframe.md
Utilisez cette méthode si vous voulez :
- Intégrer rapidement un agent dans votre site web
- Créer un chatbot visible sur votre page
- Aucune compétence backend requise
- Solution plug-and-play simple
Fonctionnalités :
- Embedding direct via
<iframe>
- Agents publics accessibles sans authentification
- Personnalisation via query parameters (metadata, preprompt)
- Responsive et personnalisable avec CSS
Démarrage rapide :
<iframe
src="https://app.devana.ai/chat/{AGENT_ID}/"
width="500"
height="600"
></iframe>
📄 Documentation : iframe-examples.md
Exemple complet pour :
- Créer un chatbot flottant (coin de page)
- Bouton d'ouverture/fermeture
- Interface responsive et moderne
Fonctionnalités :
- Chatbot positionné en bas à droite
- Animation d'ouverture/fermeture
- Code HTML/CSS/JS prêt à l'emploi
- Personnalisable selon votre charte graphique
📄 Documentation : tools.md
Utilisez les Tools pour :
- Étendre les capacités de vos agents avec des API externes
- Connecter vos services métier à l'IA
- Créer des actions personnalisées (recherche BDD, webhooks, etc.)
- Valider les inputs avec des schémas Zod
Types de Tools :
- Tools Standards : Intégrés automatiquement au LLM
- Tools Développés : Créés par l'équipe Devana (RAG, recherche web)
- Custom Tools Clients : Configurables par vous via l'interface
Fonctionnalités techniques :
- Validation des données avec Zod schemas
- Authentification flexible (Headers, Query params, None)
- Méthodes HTTP : GET, POST
- Confirmation d'exécution optionnelle
- Header
x-user-id automatiquement ajouté
- Limitation du nombre d'appels par agent
Architecture d'un Tool :
{
name: "MonTool",
description: "...",
schema: z.object({...}),
func: async (params) => {}
}
Exemple d'utilisation :
- Créer un Tool via l'interface Devana
- Configurer l'URL de votre API
- Définir le schéma des paramètres attendus
- Activer le Tool sur votre agent
- L'agent appellera automatiquement votre Tool quand nécessaire
📊 Tableau comparatif
| Méthode | Complexité | Backend requis | Personnalisation | Use case |
|---|
| IFrame simple | ⭐ Facile | Non | Limitée | Chatbot public basique |
| Widget Chatbot | ⭐⭐ Moyen | Non | Moyenne | Chatbot flottant stylisé |
| Custom Tools | ⭐⭐⭐ Avancé | Oui | Totale | Intégration métier complexe |
🚀 Démarrage rapide
Option 1 : IFrame Basique (5 minutes)
- Créez un agent public sur app.devana.ai
- Copiez l'URL de l'agent
- Intégrez dans votre HTML :
<iframe src="https://app.devana.ai/chat/{AGENT_ID}/" width="500" height="600"></iframe>
Suivez le guide complet dans iframe-examples.md avec code HTML/CSS/JS prêt à l'emploi.
- Développez votre API backend (GET ou POST)
- Créez un Tool via l'interface Devana
- Configurez l'authentification et les paramètres
- Activez le Tool sur votre agent
🔐 Authentification
IFrame (Agents publics)
- Aucune authentification requise pour l'utilisateur final
- L'agent doit être configuré comme public dans Devana
- Authentification optionnelle via clé API publique (voir agents-public.md)
- Authentification par clé API configurée dans l'interface
- Types supportés :
Headers, Query params, None
- Header
x-user-id automatiquement ajouté à chaque requête
📖 Cas d'usage courants
Chatbot Support Client
→ iframe-examples.md - Widget flottant avec design moderne
Assistant IA Embedé
→ iframe.md - Intégration complète dans une page
Connexion à votre CRM/ERP
→ tools.md - Custom Tool avec authentification API
Recherche dans votre Base de Données
→ tools.md - Tool avec validation Zod des paramètres
Webhook sur événement
→ tools.md - Tool POST vers votre service
🔗 Ressources complémentaires
Documentation API
Guides d'intégration
SDK et outils
💬 Support
🎓 Exemples complets
Tous les fichiers de cette section incluent des exemples de code complets et prêts à l'emploi :