{"id":91,"date":"2026-05-30T15:36:31","date_gmt":"2026-05-30T13:36:31","guid":{"rendered":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/"},"modified":"2026-05-30T15:36:31","modified_gmt":"2026-05-30T13:36:31","slug":"guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia","status":"publish","type":"post","link":"https:\/\/shop.bluedolomites.com\/en\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/","title":{"rendered":"Guide : Creer un dashboard web pour surveiller votre agent IA"},"content":{"rendered":"

Un agent IA autonome a besoin d un tableau de bord pour visualiser son activite, ses logs et ses alertes. Voici comment construire un dashboard web minimaliste avec Flask en moins de 100 lignes de code.<\/p>\n

Le setup minimal<\/h2>\n
pip install flask\n\n# dashboard.py\nfrom flask import Flask, render_template_string, jsonify\nimport datetime, json, os\n\napp = Flask(__name__)\nLOG_FILE = \"agent_logs.json\"\n\ndef get_logs():\n    try:\n        with open(LOG_FILE) as f:\n            return json.load(f)\n    except:\n        return []\n\n@app.route(\"\/\")\ndef index():\n    logs = get_logs()[-50:]  # 50 derniers\n    html = \"\"\"\n    <html>\n    <head><title>Agent IA Dashboard<\/title>\n    <meta http-equiv='refresh' content='30'>\n    <style>\n    body{font-family:sans-serif;max-width:900px;margin:0 auto;padding:20px;background:#1a1a2e;color:#eee}\n    h1{color:#e94560}\n    .log{padding:10px;margin:5px 0;border-radius:8px;background:#16213e}\n    .info{border-left:4px solid #0f3460}\n    .warning{border-left:4px solid #e94560}\n    .error{border-left:4px solid #ff0000}\n    .time{color:#888;font-size:12px}\n    .status{display:flex;gap:20px;margin:20px 0}\n    .card{background:#16213e;padding:20px;border-radius:10px;flex:1;text-align:center}\n    .card h3{margin:0;color:#e94560}\n    <\/style><\/head>\n    <body>\n    <h1>Agent IA Dashboard<\/h1>\n    <div class='status'>\n      <div class='card'><h3>{{ logs|length }}<\/h3>Actions<\/div>\n      <div class='card'><h3>{{ warnings }}<\/h3>Alertes<\/div>\n      <div class='card'><h3>{{ uptime }}<\/h3>Uptime<\/div>\n    <\/div>\n    {% for log in logs|reverse %}\n    <div class='log {{ log.level }}'>\n      <span class='time'>{{ log.time }}<\/span> {{ log.message }}\n    <\/div>\n    {% endfor %}\n    <\/body><\/html>\n    \"\"\"\n    warnings = len([l for l in logs if l.get('level') == 'warning'])\n    return render_template_string(html, logs=logs, warnings=warnings, uptime=\"24h\")\n\nif __name__ == \"__main__\":\n    app.run(host=\"127.0.0.1\", port=8080)<\/code><\/pre>\n
Ajouter des logs depuis l agent<\/h2>\n
import json, datetime\n\ndef log_action(message, level=\"info\"):\n    entry = {\n        \"time\": datetime.datetime.now().strftime(\"%d\/%m %H:%M:%S\"),\n        \"message\": message,\n        \"level\": level\n    }\n    try:\n        with open(\"agent_logs.json\") as f:\n            logs = json.load(f)\n    except:\n        logs = []\n    logs.append(entry)\n    logs = logs[-500:]  # garder les 500 derniers\n    with open(\"agent_logs.json\", \"w\") as f:\n        json.dump(logs, f)\n\n# Dans votre agent :\nlog_action(\"Rapport matinal envoye\", \"info\")\nlog_action(\"Stock bas detecte sur OldPatoun\", \"warning\")\nlog_action(\"Backup IONOS termine \u2014 4 sites\", \"info\")<\/code><\/pre>\n
Acceder a distance<\/h2>\n
Pour acceder au dashboard depuis votre telephone, utilisez un tunnel Cloudflare (gratuit) :<\/p>\n
# Installer cloudflared\n# Puis :\ncloudflared tunnel --url http:\/\/localhost:8080<\/code><\/pre>\n
Vous obtenez une URL publique type https:\/\/random-name.trycloudflare.com<\/code> accessible de partout.<\/p>\n
Materiel<\/h2>\n
Le dashboard tourne sur n importe quoi \u2014 meme un Raspberry Pi 5<\/a>. Pour un setup complet agent + dashboard, un mini PC<\/a> avec un ecran 4K<\/a> est ideal.<\/p>\n","protected":false},"excerpt":{"rendered":"
Un agent IA autonome a besoin d un tableau de bord pour visualiser son activite, ses logs et ses alertes. Voici comment construire un dashboard web minimaliste avec Flask en moins de 100 lignes de code. Le setup minimal pip install flask # dashboard.py from flask import Flask, render_template_string, jsonify import datetime, json, os app […]<\/p>\n","protected":false},"author":0,"featured_media":114,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-91","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides-pratiques"],"yoast_head":"\nGuide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/shop.bluedolomites.com\/en\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop\" \/>\n<meta property=\"og:description\" content=\"Un agent IA autonome a besoin d un tableau de bord pour visualiser son activite, ses logs et ses alertes. Voici comment construire un dashboard web minimaliste avec Flask en moins de 100 lignes de code. Le setup minimal pip install flask # dashboard.py from flask import Flask, render_template_string, jsonify import datetime, json, os app […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/shop.bluedolomites.com\/en\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/\" \/>\n<meta property=\"og:site_name\" content=\"Blue Dolomites Shop\" \/>\n<meta property=\"article:published_time\" content=\"2026-05-30T13:36:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"533\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Guide : Creer un dashboard web pour surveiller votre agent IA\",\"datePublished\":\"2026-05-30T13:36:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/\"},\"wordCount\":105,\"publisher\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img-shopbluedolomites-91.jpg\",\"articleSection\":[\"Guides Pratiques\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/\",\"url\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/\",\"name\":\"Guide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img-shopbluedolomites-91.jpg\",\"datePublished\":\"2026-05-30T13:36:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img-shopbluedolomites-91.jpg\",\"contentUrl\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/img-shopbluedolomites-91.jpg\",\"width\":800,\"height\":533},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/shop.bluedolomites.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guide : Creer un dashboard web pour surveiller votre agent IA\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#website\",\"url\":\"https:\\\/\\\/shop.bluedolomites.com\\\/\",\"name\":\"Blue Dolomites Shop\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/shop.bluedolomites.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#organization\",\"name\":\"Blue Dolomites Shop\",\"url\":\"https:\\\/\\\/shop.bluedolomites.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/logo-bd.png\",\"contentUrl\":\"https:\\\/\\\/shop.bluedolomites.com\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/logo-bd.png\",\"width\":540,\"height\":59,\"caption\":\"Blue Dolomites Shop\"},\"image\":{\"@id\":\"https:\\\/\\\/shop.bluedolomites.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Guide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/shop.bluedolomites.com\/en\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/","og_locale":"en_US","og_type":"article","og_title":"Guide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop","og_description":"Un agent IA autonome a besoin d un tableau de bord pour visualiser son activite, ses logs et ses alertes. Voici comment construire un dashboard web minimaliste avec Flask en moins de 100 lignes de code. Le setup minimal pip install flask # dashboard.py from flask import Flask, render_template_string, jsonify import datetime, json, os app […]","og_url":"https:\/\/shop.bluedolomites.com\/en\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/","og_site_name":"Blue Dolomites Shop","article_published_time":"2026-05-30T13:36:31+00:00","og_image":[{"width":800,"height":533,"url":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#article","isPartOf":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/"},"author":{"name":"","@id":""},"headline":"Guide : Creer un dashboard web pour surveiller votre agent IA","datePublished":"2026-05-30T13:36:31+00:00","mainEntityOfPage":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/"},"wordCount":105,"publisher":{"@id":"https:\/\/shop.bluedolomites.com\/#organization"},"image":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#primaryimage"},"thumbnailUrl":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg","articleSection":["Guides Pratiques"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/","url":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/","name":"Guide : Creer un dashboard web pour surveiller votre agent IA - Blue Dolomites Shop","isPartOf":{"@id":"https:\/\/shop.bluedolomites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#primaryimage"},"image":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#primaryimage"},"thumbnailUrl":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg","datePublished":"2026-05-30T13:36:31+00:00","breadcrumb":{"@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#primaryimage","url":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg","contentUrl":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/img-shopbluedolomites-91.jpg","width":800,"height":533},{"@type":"BreadcrumbList","@id":"https:\/\/shop.bluedolomites.com\/guide-creer-un-dashboard-web-pour-surveiller-votre-agent-ia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/shop.bluedolomites.com\/"},{"@type":"ListItem","position":2,"name":"Guide : Creer un dashboard web pour surveiller votre agent IA"}]},{"@type":"WebSite","@id":"https:\/\/shop.bluedolomites.com\/#website","url":"https:\/\/shop.bluedolomites.com\/","name":"Blue Dolomites Shop","description":"","publisher":{"@id":"https:\/\/shop.bluedolomites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/shop.bluedolomites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/shop.bluedolomites.com\/#organization","name":"Blue Dolomites Shop","url":"https:\/\/shop.bluedolomites.com\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/shop.bluedolomites.com\/#\/schema\/logo\/image\/","url":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/logo-bd.png","contentUrl":"https:\/\/shop.bluedolomites.com\/wp-content\/uploads\/2026\/05\/logo-bd.png","width":540,"height":59,"caption":"Blue Dolomites Shop"},"image":{"@id":"https:\/\/shop.bluedolomites.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":0,"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/media\/114"}],"wp:attachment":[{"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shop.bluedolomites.com\/en\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}