# Creating samples

The [components section of the bridge catalog app](http://aurelia-ui-toolkits.github.io/demo-materialize/#/project-status) consists of usage samples for each component. These samples are created using a GitHub Gist running in [gist.run](https://gist.run).

When you create a sample, you actually create a Gist.

![](/files/-LA5G19b1L5m9_iGCcid)

In the top right corner of the example you find a "Play" button. When you click the "Play" button, a `gist.run` instance will open in a new tab. A very convenient feature of `gist.run` is the ability to create a fork. A fork is basically a copy of the current gist with a new ID.

## Creating a new sample

Probably the easiest way to crate a new sample is to fork an existing one.

Assign a meaningful name to the gist (to better find it later) and click the button "fork to public gist" 

![](/files/-LA5G1AMhmeg7akSdcY0)

## Adding the sample to the catalog

The components and gist IDs of the catalog app are stored in a file names [`components.json`](https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/sample/src/shared/components.json).

The `button` configuration in this file looks like this:

```javascript
"Button": {
      "status": "done",
      "samples": {
        "basic-use": {
          "default": true,
          "gist": "09534739133e8f53bbf5ad3fff6fa75a"
        },
        "fab": "8c5bcfc325dcced715e2ea5d70ff1b44",
        "fab-fixed": "94c6cf6fd564e68dc2cac0952261b320",
        "fab-fixed-toolbar": "1dd0131d47642edadf583e946e256f0b"
      }
    },
```

Note there's a `samples` property with a default entry `basic-use` and three other properties which have gist IDs as their value.

To add a sample here, create a new property as a child of the `samples` property and copy the ID of your gist from the previous section here.

If you refresh your catalog fork now, you should see a new entry on the `buttons` component page and when you click on it the app should load your gist along with its source files.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://aurelia-ui-toolkits-1.gitbook.io/materialize-bridge-docs/5.-contributing-bridge-developers-notes/creating-samples.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.