# Building your first add-on

To help you get started with building an add-on using JavaScript we've created a sample project which you can clone down from GitHub.  This project has all the lifecycle hooks set up and includes the Squirrel Helper Library for you.  

### Clone the project from GitHub

```
git clone https://github.com/Squirrel-365/Squirrel-Addon-JS.git
```

### Run the add-on

{% hint style="info" %}
To be able to view the add-on in Squirrel you need to be running the add-on in a web server.  If you do not have a web server on your machine there are a number of options:

* [WAMP ](https://en.wikipedia.org/wiki/WampServer)or [LAMP](https://en.wikipedia.org/wiki/LAMP_\(software_bundle\))
* [http-server](https://www.npmjs.com/package/http-server) for node

For this guide we will be using http-server.
{% endhint %}

Once cloned, cd into the project folder and run

```
http-server -c-1 -p 8080
```

This will run the addon on <http://localhost:8080/> and disable any page caching.&#x20;

### Testing the addon in Squirrel

Open Squirrel and add the "Add-on Developer Program" component to the canvas

![](/files/CMWBwXFfhp8ueuZlRTq2)

Once added, enter the addon URL (<http://localhost:8080/>) in the properties panel and click the "Get json files" button .

{% hint style="danger" %}
*ensure you add a slash at the end of the URL*
{% endhint %}

*This will load up the properties panel, and show the addon web application*

![](/files/bvIEqy4sVcZfC8amGc40)


---

# 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://learn.squirrel365.io/squirrel-addon-documentation/squirrel-helper-library/javascript/getting-started/building-your-first-add-on.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.