# Setting up LLMS.TXT

{% hint style="success" %}
We recommend creating this as a standard Webflow page, under `/data/llms` .

* The folder and page must be published and can not be password-protected.&#x20;
* The page should be excluded from the Sitemap, as it is not needed by search engines.&#x20;
  {% endhint %}

The LLMS page is a standard Webflow page that you manage in the designer- however its goal is to specify the content that you want in your `/llms.txt` and nothing else. &#x20;

<figure><img src="https://536357598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVQuEOlALOzn8bqKjkyEo%2Fuploads%2FE61jhnOiTkUjrtAC4WkC%2Fimage.png?alt=media&#x26;token=5f80d4c7-1b2e-4cb5-b3fe-31348c26d614" alt=""><figcaption></figcaption></figure>

Hyperflow LLMS converts the page to Markdown, following your content structure;

| e.g. HTML            | e.g. Markdown |   |
| -------------------- | ------------- | - |
| `<h1>Heading 1</h1>` | `# Heading 1` |   |
| `<li>List item</li>` | `* List item` |   |
|                      |               |   |

## The LLMS.TXT Formal Specification&#x20;

{% hint style="info" %}
Hyperflow LLMS gives you full flexibility on the structure and content of your page, however it's important to follow the Formal Specifical for LLMS.TXT page construction.&#x20;
{% endhint %}

The `/llms.txt` file is Markdown but follows a specific format;&#x20;

[https://llmstxt.org/#:\~:text=An%20H1%20with,about%20the%20file.](https://llmstxt.org)

* An H1 with the name of the project or site. This is the only required section
* A blockquote with a short summary of the project, containing key information necessary for understanding the rest of the file
* Zero or more markdown sections (e.g. paragraphs, lists, etc) of any type except headings, containing more detailed information about the project and how to interpret the provided files
* Zero or more markdown sections delimited by H2 headers, containing “file lists” of URLs where further detail is available
  * Each “file list” is a markdown list, containing a required markdown hyperlink `[name](url)`, then optionally a `:` and notes about the file.  &#x20;

Examples;

<https://developers.cloudflare.com/llms.txt>

<https://docs.anthropic.com/llms.txt>

<https://docs.perplexity.ai/llms.txt>

## Key Points

* Links should be suffixed with `.md` extension.&#x20;

## Best Practices&#x20;

*No visual styling or artwork are needed, and should be avoided.*&#x20;

For designer convenience, add this `<style>` block on your LLMS page for the best designer experience.&#x20;

```html
<style>
a { display: inline }
</style>
```

### Headings

Use Webflow's Heading elements, and arrange them in the correct hierarchical order;&#x20;

e.g.

```
H1 Fuzzy wuzzy was a bear
H2 Chapter 1
H3 In the beginning
H2 Chapter 2
```

### Lists&#x20;

{% hint style="success" %}
You can use regular Webflow List and List Item elements, however custom elements are more suitable for use in CMS-driven lists.&#x20;
{% endhint %}

We recommend an arrangement like this;&#x20;

<figure><img src="https://536357598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVQuEOlALOzn8bqKjkyEo%2Fuploads%2F9YfpJ1hQM6iW95ZLtncI%2Fimage.png?alt=media&#x26;token=e7d7df60-4833-4b08-8aa1-02e4ac8e85fc" alt=""><figcaption></figcaption></figure>

Key points;

1. Custom `<ul>` or `<ol>` element&#x20;
2. Inside of this, place your collection list if you are generating the list from the CMS
3. Custom `<li>` element&#x20;
4. Webflow Link element&#x20;
   1. The link can be bound to a CMS link field&#x20;
   2. The text should be bound to the text you want directly represented by the link&#x20;
5. Custom `<span>` , containing
6. Custom `<span>` with literal `:` ( colon-space ) text sequence&#x20;
7. Custom `<span>` element&#x20;
   1. Text is a brief description of the link content&#x20;

Or if you want more control over the formatting, you can use Embeds.&#x20;

<figure><img src="https://536357598-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVQuEOlALOzn8bqKjkyEo%2Fuploads%2FyT0bpMhp7n3C41jnfTsr%2Fimage.png?alt=media&#x26;token=6ca2d7ee-5c67-470a-8ae2-ffe7497e523f" alt=""><figcaption></figcaption></figure>

### Tables

Use an Embed element, with **HTML Table** content in it.&#x20;

Use cases;

* Hours of operation&#x20;
* A list of branch locations and addresses&#x20;
* Products, SKUs, Inventory and Pricing &#x20;

{% hint style="success" %}
You can also create your tables using a mix of custom elements and collection lists.&#x20;
{% endhint %}

```html
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
  </tbody>
</table>
```

Generates the following markdown; &#x20;

```markdown
|Header 1|Header 2|Header 3|
|---|---|---|
|Row 1, Col 1|Row 1, Col 2|Row 1, Col 3|
|Row 2, Col 1|Row 2, Col 2|Row 2, Col 3|
```

{% hint style="warning" %}
`<tfoot>` is not supported by the markdown converter. &#x20;
{% endhint %}

## Technical Notes

In `llms.txt`,&#x20;

Relative links will be converted to absolute links, using the same path.&#x20;

All links within the site will be suffixed with `.md` &#x20;

This is automatically handled by Hyperflow LLMS.&#x20;

## Designer CSS&#x20;

{% hint style="success" %}
**OPTIONAL.** Copy and paste this into an EMBED in your Webflow LLMS page. \
This will make your LLMS.TXT page consistent and readable with minimal site styling interference.&#x20;
{% endhint %}

```html
<style>
  /* RESET - Normalize spacing and inheritance */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
    font-family: system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: #fff;
    color: #222;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Clear Webflow-specific defaults */
  body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, blockquote, pre, code, table, th, td {
    all: unset;
    display: revert;
  }

  /* Typography container */
  body {
    padding: 2rem;
    max-width: 720px;
    margin: auto;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.5em;
  }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
  h5 { font-size: 1.1rem; }
  h6 { font-size: 1rem; }

  /* Paragraphs */
  p {
    margin-bottom: 1rem;
  }

  /* Lists */
  ul, ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
  }
  li {
    margin-bottom: 0.5rem;
  }

  /* Links */
  a {
    color: #0366d6;
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
  }

  /* Inline code */
  code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.95em;
  }

  /* Code blocks */
  pre {
    background: #f6f8fa;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
  }
  pre code {
    background: none;
    padding: 0;
  }

  /* Blockquotes */
  blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    color: #555;
    margin: 1rem 0;
    font-style: italic;
    font-size: 1em;
    line-height: inherit;
  }

  /* Tables */
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 0.5em 1em;
    text-align: left;
  }
  thead {
    background: #f0f0f0;
    font-weight: 600;
  }

  /* Horizontal rule */
  hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 2rem 0;
  }
</style>
```

## Future&#x20;

Exclude conditionally hidden content&#x20;
