Resources¶
You can add various resources to your AI agent project in Alan AI Studio, including images, scripts, stylesheets, fonts, or JSON files. These resources enhance your AI agent’s functionality.
Adding Resources¶
To add resources to your project:
Open the AI agent 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 iframes that are added to responses via transforms.
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');
}