🎬 New Dash Video: Making Dash Apps AI-Friendly + Dash-Flows Node Based Component

Hey Dash community! :waving_hand:

I just released a new video walking through several interconnected projects I’ve been working on to help make Dash applications more discoverable by AI systems and easier to document. I wanted to share the progress here and get your feedback!

:television: Watch the Video:


:robot: dash-improve-my-llms (v1.1.0)

The Problem: When users share Dash app URLs with ChatGPT, Claude, or other AI assistants, the bots see nothing but “Loading…” because they can’t execute JavaScript. This makes it impossible for AI to help users understand or troubleshoot your app.

The Solution: dash-improve-my-llms automatically generates AI-friendly documentation and SEO resources for your Dash application with just two lines of code:

from dash_improve_my_llms import add_llms_routes
add_llms_routes(app)  # That's it! 🎉

What you get:

  • /llms.txt - Comprehensive markdown optimized for LLM understanding
  • /llms.toon - Token-optimized format (50-60% fewer tokens!)
  • /page.json - Technical architecture with interactivity and data flow
  • /architecture.txt - ASCII art representation of your entire app
  • /robots.txt - Intelligent bot control (blocks AI training, allows AI search)
  • /sitemap.xml - SEO-optimized sitemap with smart priority inference
  • Static HTML for bots with Schema.org structured data

New in v1.1.0:

  • Enhanced TOON format v3.1 with lossless semantic compression (40-50% token reduction)
  • Application context with related pages
  • Human-readable callback descriptions
  • Synthesized page summaries

:package: Install: pip install dash-improve-my-llms


:books: dash-documentation-boilerplate (v0.6.0)

A modern, responsive documentation system for Dash applications built with Dash Mantine Components. This is the template I use for all my component documentation.

:globe_with_meridians: Live Demo: https://dash-documentation-boilerplate.onrender.com/

Features:

  • Markdown-driven documentation with Python integration
  • Custom directives for interactive examples (.. exec::, .. source::, .. kwargs::)
  • Dark/light theme with automatic preference persistence
  • Built-in AI/LLM integration via dash-improve-my-llms
  • Docker and production-ready with Gunicorn
  • Built on Dash 3.2.0 + DMC 2.4.0

Perfect for documenting your own Dash components or creating project documentation sites.

:package: GitHub: GitHub - pip-install-python/Dash-Documentation-Boilerplate: This project is designed to help developers quickly create well-organized documentation for their Dash components, data science workflows, and entire Dash applications.


:house: pip-docs (pip-install-python.com)

This is my personal documentation hub showcasing 18 custom Dash component libraries with comprehensive docs, live examples, and real-time download statistics from PyPI.

:globe_with_meridians: Live Site: https://pip-install-python.com/

Currently Maintained Components (11):

  • dash-summernote (Rich text WYSIWYG Editor)
  • dash-insta-stories (Instagram Stories Component)
  • dash-image-gallery (Image Gallery)
  • dash-fullcalendar (FullCalendar wrapper)
  • dash-gauge (Gauge Component)
  • dash-emoji-mart (Slack-like Emoji Picker)
  • dash-dock (Dynamic dock windows/tabs)
  • dash-pannellum (360 Panorama Viewer)
  • dash-planet (Interactive orbital menu)
  • dash-model-viewer (3D Model Viewer)
  • dash-excalidraw (Freeform Drawing/Notebook)

The site automatically aggregates download statistics across all packages using the pypistats.org API.


:shuffle_tracks_button: dash-flows (Pre-Release - Looking for Feedback!)

A powerful React Flow 12+ integration for Plotly Dash, providing interactive node-based flow diagrams. This is currently in pre-release (v1.1.0) and I’m looking for community input before the official 1.0.0 release!

Features:

  • 6 Node Types: Input, Output, Default, Group, Toolbar, Resizable
  • 7 Edge Types: Bezier, Smooth Step, Step, Straight, Animated SVG, Button, Data
  • DashIconify Integration: Custom icons with dynamic updates
  • Glass Morphism Theme: Beautiful modern UI with 6 color schemes
  • Status Indicators: Visual loading, success, and error states
  • ELK Layout Support: Automatic graph layouts
  • Interactive Features: Drag-and-drop, copy/paste, context menus, and more

dash-flows-lwe

from dash_flows import DashFlows

DashFlows(
    id='flow',
    nodes=nodes,
    edges=edges,
    fitView=True,
    style={'width': '100%', 'height': '600px'}
)

What I’m looking for:

  • Bug reports and edge cases
  • Feature requests
  • API feedback (is the node/edge structure intuitive?)
  • Use case ideas

:package: Install: pip install dash-flows


:loudspeaker: Questions? Feedback?

I’d love to hear your thoughts on any of these projects! Drop a comment below or reach out through the links below.


:link: Links


Build Something Amazing :sign_of_the_horns::moai:

3 Likes

This is very interesting, @PipInstallPython . Does this mean that you simply have to add the line of code to your app add_llms_routes(app) and it will autogenerate a doc for it?

Its a hook with one line of code you will automatically generate these routs:

/robots.txt - Bot Management

Controls which bots can access your application:

  • :white_check_mark: Allows/Blocks: AI search bots (ChatGPT-User, ClaudeBot, PerplexityBot)

  • :cross_mark: Allows/Blocks: AI training bots (GPTBot, CCBot, anthropic-ai, Google-Extended)

  • :white_check_mark:Allows:/Blocks Traditional search engines (Googlebot, Bingbot)

Visit: /robots.txt

This is the first entry point any bot, ai or webcrawler reaches when first reaching the application, this instructs that trafic which endpoints they have access into.

Then you have the index directory route:

/architecture.txt - ASCII Overview

A text-based visual representation of your application structure.

Visit: /architecture.txt

This will give you an overview of the applications routes, number of components, dependencies and basic outline of the architecture of the application.

Finally for the real content, with this hook it builds on a page render so with every dash page thats created, their are specific routes that are automatically generated to allow a <noscript> raw understanding of the pages contents to the bots, ai and webscrapers that visit your applications.

1. /llms.txt - AI-Friendly Documentation

A markdown file optimized for Large Language Models that includes a complete understanding of the dash application page in raw text.

Visit: /llms.txt

2. /page.json - Technical Architecture

Building on top the Dash->Json->React magic, I also included a JSON route with the technical details of the components and app structure which can be accessed via a route within the dash application:

Visit: /page.json to get an idea of what this looks like.
This allows any ai or llm to quickly look at a dash application with this endpoint and understnad the components and design that went into the page and how to re-create that page from the dash components that made it up.

3. /llms.toon - Token-Optimized Format (NEW in v1.0.0!)

TOON (Token-Oriented Object Notation) format provides
50-60% fewer tokens

The file markdown structure changes to look like:

meta:
  path: /equipment
  name: Equipment Catalog
interactive:
  inputs[2]{id,type,placeholder}:
    equipment-search,TextInput,Search equipment...
    equipment-category,Select,

Visit: /llms.toon for a full understanding

However this is a custom encoder I built which retains ~95% of the pages content and project knowledge while saving on token count, as the way this is structured allows you to share the link with an ai or llm and it will understand the same content from the /llms.txt but it will do it costing you 1/2 as few input tokens.

Lastly theirs also an /sitemap.xml - SEO Optimization

An SEO-optimized sitemap with intelligent priority inference.

Visit: /sitemap.xml

This was just included to improve SEO and the google indexing of the dash application.

So with that one line add_llms_routes(app) but it is building 5 new useful routes per page, documentation and endpoints for ai and llms increasing the applications footprint and allowing it more capabilities and understanding.

2 Likes