docs: update docs

Author: Ehesp

docs/storage-image-processing-api/index.mdx

@@ -132,37 +132,21 @@ const url = `https://{LOCATION}-{PROJECT_ID}.cloudfunctions.net/ext-storage-imag
 
 ### JavaScript utility library
 
-Additionally, a utility library exists to provide a fully typed interface for constructing options.
-
-Firstly, install the [library](https://www.npmjs.com/package/@invertase/storage-image-processing-api) via npm:
-
-```bash
-npm i --save @invertase/storage-image-processing-api
-```
-
-Use the `builder` function to return a `StorageImageProcessingApi` instance which can be used to build an array of operations:
+Additionally, a utility library exists to provide a fully typed interface for constructing options:
 
 ```ts
 import { builder } from '@invertase/storage-image-processing-api';
 
 const output = builder()
-  // Input required
   .input({
     source: 'https://example.com/image.jpg',
   })
-  .flip()
-  .grayscale()
   .rotate({ angle: 90 })
-  // Output required
   .output({
     format: 'png',
   });
-```
 
-Once created, the api provides the means to return the operations as JSON, a JSON string or an encoded JSON string suitable for GET requests in your browser.
+console.log(output.toJSON());
+```
 
-```ts
-const json = output.toJSON();
-const jsonString = output.toJSONString();
-const encodedJsonString = output.toEncodedJSONString();
-```
+For more details, [view the documentation](/utility-library).

docs/storage-image-processing-api/utility-libray.mdx

@@ -0,0 +1,67 @@
+# Utilty Library
+
+To assist with the usage of this Extension, a [utility library](https://www.npmjs.com/package/@invertase/storage-image-processing-api) exists
+to help provide a typed API interface for easily constructing operations to send to the API.
+
+## Installation
+
+```bash
+npm i --save @invertase/storage-image-processing-api
+```
+
+## Usage
+
+Once installed, import the `builder` function from the library:
+
+```ts
+import { builder } from '@invertase/storage-image-processing-api';
+```
+
+The `builder` function returns a new `StorageImageProcessingApi` instance which provides a API for constructing operations to send to the API.
+At a minimum, you must provide an `input` and `output` operation as required by the extension itself:
+
+```ts
+import { builder } from '@invertase/storage-image-processing-api';
+
+const build = builder()
+  .input({
+    url: 'https://example.com/image.jpg',
+  })
+  .output({
+    format: 'png',
+  });
+```
+
+To provide additional operations, you can chain them together. For example,
+to apply a blur, grayscale and flip the provided input image, and return a new PNG image:
+
+```ts
+const output = builder()
+  .input({
+    url: 'https://example.com/image.jpg',
+  })
+  .blur()
+  .grayscale()
+  .flip()
+  .output({
+    format: 'png',
+  });
+```
+
+Please refer to the [operations](/operations) documentatuion for a full list of available operations, their API and examples.
+
+Once you have constructed your operations, you can return the operations as JSON, a JSON string or encoded JSON string value:
+
+```ts
+const json = output.toJSON();
+const jsonString = output.toJSONString();
+const encodedJsonString = output.toEncodedJSONString();
+```
+
+The encoded JSON string value can be passed directly to the extension as the `operations` parameter:
+
+```ts
+const encodedJsonString = output.toEncodedJSONString();
+
+const url = `https://{LOCATION}-{PROJECT_ID}.cloudfunctions.net/ext-storage-image-processing-api-handler/process?operations=${encodedJsonString}`
+```