O**Prompt for AI Coding Assistant: Create an Interactive LLM Context Builder Page** **Objective:** Your task is to create an interactive HTML webpage with JavaScript functionality that allows users to select and combine different `crawl4ai` LLM context files into a single downloadable Markdown (`.md`) file. This tool will empower users to craft tailored context for their AI assistants based on their specific needs. **Core Functionality:** 1. **Display `crawl4ai` Components:** The page will list all available `crawl4ai` documentation components. 2. **Select Context Types:** For each component, users can select which types of context they want to include: * Memory (API facts) * Reasoning (How-to/why) * Examples (Code snippets) (All should be selected by default for each initially selected component). 3. **Special "Aggregate" Contexts:** Include options for special, pre-combined contexts: * "Vibe Coding" (a curated mix for general AI prompting) * "All Library Context" (a comprehensive aggregation of all memory, reasoning, and examples for the entire library). 4. **Fetch and Concatenate:** When the user clicks a "Download Combined Context" button: * The JavaScript will fetch the content of all selected Markdown files from the server (from a predefined folder, e.g., `/llmtxt/`). * It will concatenate the content of these files into a single string. 5. **Client-Side Download:** The concatenated content will be offered to the user as a download (e.g., `custom_crawl4ai_context.md`). **Input/Assumptions:** * **Context Files Location:** All individual context Markdown files are located on the server in a publicly accessible folder named `llmtxt/`. * **File Naming Convention:** Files follow the pattern: `crawl4ai_{{component_name}}_[memory|reasoning|examples]_content.llm.md`. * `{{component_name}}` can contain underscores (e.g., `deep_crawling`, `config_objects`). * The special contexts will have names like `crawl4ai_vibe_content.llm.md` and `crawl4ai_all_content.llm.md`. * **Component List:** You will be provided with a list of `crawl4ai` components. For this implementation, use the following list: * `core` * `config_objects` * `deep_crawling` * `deployment` (covers Installation & Docker Deployment) * `extraction` (covers Structured Data Extraction) * `markdown` (covers Markdown Generation Algorithm) * `pdf_processing` * *(No separate "Vibe Coding" or "All Library Context" in this list, as they are special top-level selections)* **Detailed UI/UX Requirements:** 1. **Main Page Structure:** * **Header:** "Crawl4AI Interactive LLM Context Builder" * **Introduction:** Briefly explain the purpose of the tool (from the `USING_LLM_CONTEXTS.md` content you helped draft: "Supercharging Your AI Assistant..."). * **Selection Area:** * **Special Aggregate Contexts (Radio Buttons or Prominent Checkboxes):** * [ ] "Vibe Coding Context" (`crawl4ai_vibe_content.llm.md`) * [ ] "All Library Context (Comprehensive)" (`crawl4ai_all_content.llm.md`) * *Behavior:* Selecting one of these might disable individual component selections (or vice-versa) to avoid redundancy, or simply add them to the list. Consider user experience here. A simple approach is that if an aggregate is selected, it's the *only* thing downloaded. * **Individual Component Selection (Table or List of Checkboxes):** * A section titled "Select Individual Components & Context Types:" * For each component in the provided list: * A master checkbox for the component itself (e.g., `[ ] Core Functionality`). Selected by default. * Nested checkboxes (indented or grouped) for context types, enabled only if the parent component is checked: * `[x] Memory (API Facts)` * `[x] Reasoning (How-to/Why)` * `[x] Examples (Code Snippets)` (These three sub-checkboxes should be selected by default if the parent component is selected). * **Action Button:** * A button: "Generate & Download Combined Context" * **Status/Feedback Area:** (Optional, but good UX) * Display messages like "Fetching files...", "Combining context...", "Download starting..." or error messages. **Final Output:** * A single HTML file (e.g., `interactive_context_builder.html`). * Associated JavaScript code (can be inline within `