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) {
// Add default styles for iframe
await iframe.addDefaultStyles();
// 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');
}
The addDefaultStyles method adds a set of default styles to the iframe, ensuring a consistent appearance for content rendered inside the iframe. By default, it applies styles for the page background, text, links, scrollbars, and Tabulator tables. If you want to exclude specific styles, you can pass an options object with boolean flags to control which styles are applied.
Example of excluding specific default styles:
await iframe.addDefaultStyles({
excludeHtmlElementsStyles: true,
excludeTabulatorStyles: true,
excludeScrollbarStyles: true
});
Options for addDefaultStyles
Option |
Type |
Description |
|---|---|---|
|
boolean |
Exclude styles for HTML elements like link color, etc. |
|
boolean |
Exclude Tabulator theme styles for Tabulator tables. |
|
boolean |
Exclude custom scrollbar styles for the iframe. |
If you do not need to exclude any styles, you can call addDefaultStyles() without arguments to apply all default styles.
await iframe.addDefaultStyles();
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();