> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/image-content-provider/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/image-content-provider/developer/develop-with-icp.md).

# Develop with ICP

### Getting started

ICP gives you methods to use in your plugin to be able to build image sources by passing image identifier.

ICP register it's own methods with [Dashboard Actions](https://docs.infomaker.io/dashboard-plugin/agent/actions)

You can use any of these actions in your plugin.

### Available actions

| ID                         | Descriptions                                                                |
| -------------------------- | --------------------------------------------------------------------------- |
| com.naviga.icp:getInstance | An action returns the instance of @plugin\_name with ImageProvider methods. |
| com.naviga.icp:getImageSrc | An action to build image src with requested identifier and provider.        |

#### With getInstance action you will get class that has a main function:

* **getImageProvider**

Depending on the provider name you pass from the config to **getImageProvider()** you will get back one of two classes **Imengine** or **Imgix**

Both of them has a main function that will build your image url called **getImageSrc()**

{% hint style="info" %}
The getImageSrc action is basically splitted method from ImageProviderHandler instance that you get from getImageSrc action.
{% endhint %}

###

### An example to how to get ICP instance

In your plugin you can import **useAction** from Dashboard, so you can "import" ICP actions to your plugin.

{% tabs %}
{% tab title="Hook component" %}

```jsx
import { useAction } from 'Dashboard'
import { useRef, useEffect } from 'react'

const MyAwesomeComponent = props => {
    const ICP = useRef()
    
    useEffect(() => {
        const getInstance = useAction('com.naviga.icp:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        ICP.current = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }, [])
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        ICP.current.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = ICP.current.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}
```

{% endtab %}

{% tab title="Class component" %}

```jsx
import { Component } from 'react'
import { useAction } from 'Dashboard'

class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props)
        
        this.ICP = null
    }
    
    componentDidMount() {
        const getInstance = useAction('com.naviga.content-agent:getInstance')
        const Instance = getInstance()
        const handler = new Instance()
        
        this.ICP = handler.getImageProvider('name-of-image-provider') // i.e. "imengine-provider" from example config
    }
    
    /**
        Now you can use ICP all around your plugin.
        In order to build an image src call:
        this.ICP.getImageSrc(ICP_FUNCTION, IMAGE_PARAMS)
        
        const imgSrc = this.ICP.getImageSrc('crop', {
            identifier: "123e4567-e89b-12d3-a456-426655440000",
            width: 400,
            height: 300,
            x: 20,
            y: 45	
        })
        
        imgSrc === https://domain/imengine/image.php?uuid=123e4567-e89b-12d3-a456-426655440000&type=preview&function=cropresize&width=400&height=300&x=20&y=45&crop_w=400&crop_h=300&q=80
    */
}
```

{% endtab %}
{% endtabs %}

Here we used `com.naviga.icp:getInstance` action to get and initiate our ICP instance

{% hint style="info" %}
getImageSrc action works the same as accessing it from ICP.getImageProvider(PROVIDER\_NAME).getImageSrc()

by passing the provider as first argument and the icp function as a second argument and the image params as a third argument
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.navigaglobal.com/image-content-provider/developer/develop-with-icp.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.