Dash Documentation Boilerplate - Release

Dash Python
, ,
1

intro_img
intro_img673×202 33.2 KB

:books: Dash Documentation Boilerplate v0.4.0 – Stop Fighting Docs, Start Writing Them

TL;DR: I built a limited working example of the markdown-powered documentation system for Dash apps that actually makes writing docs… dare I say… enjoyable?

Live Demo • GitHub

What Is This?

Ever needed to document your Dash components, data workflows, or applications and thought “there’s got to be a better way than manually maintaining a static site”, did you realize ai can not actually render your applications url?

Meet Dash Documentation Boilerplate – a production-ready project that turns markdown files into beautiful, interactive documentation pages with zero configuration.

Inspired by the need for more amazing dash documentation like the beloved dmc-docs and a want for better SEO discoverability and ai llms friendly documentation

The Magic :sparkles:

Write markdown like this:

---
name: My Component
endpoint: /components/my-component
---

## Overview
Here's what it does...

.. exec::docs.my-component.example
.. source::docs/my-component/example.py

Get a fully interactive documentation page with:

  • Live component demos with working callbacks
  • Syntax-highlighted source code
  • Automatic navigation
  • Light/dark themes that persist
  • Mobile-responsive design

Why You Might Care

:rocket: New in v0.4.0: Added an LLM Copy Button – users can now click a button to copy your documentation’s llms.txt URL and paste it directly into ChatGPT or Claude for instant, context-aware help. Your docs become AI-friendly by default.

Other cool stuff:

  • Custom Directives: .. toc:: for table of contents, .. exec:: for live components, .. kwargs:: for auto-generated props tables
  • AI/LLM Ready: Auto-generates llms.txt, page.json, sitemap.xml, and robots.txt (powered by dash-improve-my-llms)
  • Theme-Aware Charts: All Plotly charts automatically switch templates with light/dark mode
  • Production Ready: Docker support, Gunicorn server, SEO-optimized HTML template

Tech Stack

  • Dash 3.2.0
  • DMC 2.4.0 (Mantine 8.3.6)
  • React 18
  • Python 3.11+

Real Talk

I built this project out after realizing llms are not able to see or understand the contents of our dash applications. Theirs also an underlying travesty of bad documentation. Understanding this, the project and its contents will single handily save your application from the internet void. As llms are only able to operate to the degree of the quality of the project knowledge given. Designing documentation in a manner as to allow llms to actually see your applications content is important. Outside of that theirs also an added benefit of SEO, increasing traffic and discoverability to what you build.

Please check out my previous post for more insight to this:

The solution to bypass the llms not being able to render javascript issue was to include a templates/index.html which bypasses the default add a noscript and a with not being able to render your dash application directly, any llm can now navigate your application and understand what it is, what it does, how its configured:

<noscript>
        <div style="padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 0 auto; line-height: 1.6;">
            <h1>Dash Documentation Boilerplate</h1>
            <p><strong>This application requires JavaScript to run.</strong></p>

            <h2>For AI/LLM Access and Documentation:</h2>
            <p>This site provides comprehensive documentation in multiple formats optimized for both humans and AI assistants:</p>

            <ul style="margin: 20px 0;">
                <li><a href="/llms.txt" style="color: #12B886; text-decoration: none;"><strong>llms.txt</strong></a> - LLM-friendly documentation format</li>
                <li><a href="/page.json" style="color: #12B886; text-decoration: none;"><strong>page.json</strong></a> - Technical architecture and components</li>
                <li><a href="/architecture.txt" style="color: #12B886; text-decoration: none;"><strong>architecture.txt</strong></a> - Application structure overview</li>
                <li><a href="/sitemap.xml" style="color: #12B886; text-decoration: none;"><strong>sitemap.xml</strong></a> - Complete site structure for search engines</li>
                <li><a href="/robots.txt" style="color: #12B886; text-decoration: none;"><strong>robots.txt</strong></a> - Crawler instructions</li>
            </ul>

            <p>These endpoints provide detailed information about the application structure, components, functionality, and usage patterns in formats optimized for automated processing.</p>

            <h2>Features:</h2>
            <ul>
                <li>Markdown-based documentation with custom directives</li>
                <li>Interactive component examples with live code</li>
                <li>Data visualization with Plotly integration</li>
                <li>Dark/light theme support</li>
                <li>Mobile-responsive design</li>
                <li>LLM-friendly documentation formats</li>
            </ul>
        </div>
    </noscript>

I tested this configuration with making this request I made on ChatGPT , Gemini and Claude :

I'm trying to test if an ai can read and easily navigate this application I've built when given this url please make a request on this url https://dash-documentation-boilerplate.onrender.com/ what can you tell me about the application? Please output the requested raw html and check if their is any ai specific navigation that you easily recognize and could use to get more insight on the purpose of the application and its contents

Claude response: :man_shrugging:

ChatGPT response: :white_check_mark:

Google Gemini Response: :white_check_mark:

The most interesting insight was from google, although ChatGPT also quickly had a great understanding of the dash application in testing via chatbots apis and prompting. Claude was a bit confusing of a response, it understood the link in a broad sense but seems to be getting snagged in a strange place in i’m assuming might be a claude specific issue:

Note: The network restrictions prevented me from fetching the specific /llms.txt endpoint directly, but the page clearly advertises these AI-friendly features, which is exactly what you'd want for testing AI discoverability!

Get Started in 3 Commands

git clone https://github.com/pip-install-python/Dash-Documentation-Boilerplate.git
cd Dash-Documentation-Boilerplate
pip install -r requirements.txt && npm install
python run.py

Visit localhost:8550 and you’ve got docs.

Questions? Feedback? Want to roast my code? Drop a comment below!

1 Like
2

Hey @PipInstallPython, thanks for sharing!

I’m a simple guy, what I understood out of all this:

  • AI can’t access the content of dash apps right now.
  • To make it visible for AI, you create a static (automatically generated) markdown file which documents the app content and functionality

Imagine I have the simplest app and wanted to make it visible to AI- how would i use what you developed?

2 Likes
3

:waving_hand: Great question! Let me clarify the difference between my two projects:

For the Simplest Setup: dash-improve-my-llms

If you just want to make your existing Dash app visible to AI assistants, you want the dash-improve-my-llms package. Here’s the complete setup:

1. Install the package:

pip install dash-improve-my-llms

2. Add 4 lines to your existing Dash app:

from dash import Dash
from dash_improve_my_llms import add_llms_routes

app = Dash(__name__, use_pages=True)
add_llms_routes(app)  # ✨ That's it!

What it does automatically:

  • Generates llms.txt (AI-readable documentation)
  • Creates page.json (component architecture)
  • Builds sitemap.xml (SEO structure)
  • Sets up robots.txt (crawler policies)
  • Updates everything as your app grows - no maintenance needed!

Now AI assistants like Claude and ChatGPT can discover and understand your app when users share the URL.

For Full Documentation Sites: dash-documentation-boilerplate

This is a completely different project - it’s a documentation website template for people who want to create professional docs (like the DMC docs site).

Use this if you want:

  • A full documentation site with markdown pages
  • Interactive code examples
  • Component reference pages
  • SEO-optimized documentation hosting

The process is manual - you fork the repo, delete the example docs, and write your own markdown documentation. It includes dash-improve-my-llms integration, but the documentation content itself is something you create.

TL;DR: For making your app AI-visible with minimal effort, use dash-improve-my-llms - it’s literally pip install + 1 line of code. The boilerplate is for when you want to build a full documentation website.

Hope that helps! :rocket:

4

@PipInstallPython even I understood it now :rofl:

Thank you very much. It would be stupid not to use your first package.

1 Like
5

I was reading a doc that was using gitbook and it had this nice dropdown link to doc MCP server. MCP servers for published docs | GitBook Documentation

image
image578×1146 65.8 KB

6

I looked into MCP servers prior to starting this project but their are some underlying issues with MCP servers in general that i found concerning. This project was designed to be practical, useful and limited in nature. Its documentation, that looks professional, includes the ideal dependencies and offers markdown render design which makes it easy to scale and build out.

The ai specific endpoints I designed work, I’ve tested it with multiple ai’s and I continued development of this project building it into a revamp of https://pip-install-python.com within this documentation i just launched you’ll notice ai directly integrated within the documentation. Where the pages are machine readable but theirs also a chat feature within the documentation which leverages the /llms.txt endpoints and provides useful context and information when prompted.

Eventually we’ll be able to define api endpoints for ai and llms to autonomously interact within our applications but prior to that being a reality we need to define and solve the javascript issue with ai’s not capable of reading or understanding the contents of our applications. Imo MCP servers have not matured enough to be the defined way forward within the space and theirs still much evolution awaiting dash prior to defining workflows to allow agents to interact with our software.