Resources¶
You can add various resources to your Agentic Interface project in Alan AI Studio, including images, scripts, stylesheets, fonts, or JSON files. These resources enhance your Agentic Interface’s functionality.
Adding Resources¶
To add resources to your project:
Open the Agentic Interface project in Alan AI Studio.
In the left panel, click the Add button in the Resources section.
Drag and drop the files into the designated area, or directly drag and drop resources into the project workspace.
Note
Ensure that each resource file has a unique name to avoid conflicts.
Using Resources in Dialog Scripts¶
Once resources are added to the project, you can reference them in the dialog script.
Use the api.resourceURL function to generate the correct public URL for a resource. This function takes a single argument, which is the path to the resource relative to the Resources folder.
Example:
api.resourceURL('data.json');
The api.resourceURL function is available within the dialog script and can be used in any JavaScript code block.
Common Use Cases¶
Fetching Data from a JSON File¶
To fetch data from a JSON file added as a resource, use the following example:
function fetchData() {
fetch(api.resourceURL('data.json'))
.then(response => response.json())
.then(data => {
console.log('Fetched data:', data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
Using Resources in Iframes¶
You can also use resources in iframe responses created via the transforms mechanism.
async function initIframe(iframe) {
// Load an external resource from a CDN
await iframe.addScript('https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js');
// Load a local project-specific resource
await iframe.addScript('resource://lib.test.js');
// Load a predefined shared resource available across all projects
await iframe.addScript('studio-resource://d3/7.9.0/d3.min.js');
}
If you need to use resources in functions other than initIframe, you can retrieve the correct URLs using api.resourceURL and api.studioResourceURL:
// Returns the URL for the project resource 'lib.test.js'
let resourceURL = api.resourceURL('lib.test.js');
// Equivalent: api.resourceURL('resource://lib.test.js')
// Returns the base URL for project resources
let baseProjectResourceURL = api.resourceURL();
// Returns the URL for the shared studio resource 'd3.min.js'
let studioResourceURL = api.studioResourceURL('d3/7.9.0/d3.min.js');
// Equivalent: api.studioResourceURL('studio-resource://d3/7.9.0/d3.min.js')
// Returns the base URL for shared studio resources
let baseStudioResourceURL = api.studioResourceURL();