Widget Development

What is a widget?

A widget is a web page rendered inside a sandboxed iframe in AccessAgent’s center panel. It is plain HTML, JavaScript, and CSS — no framework required, no build step, no component library.

When the agent builds a widget, it writes files into your project’s workspace directory (projects/{projectId}/). The iframe loads index.html from that directory. When the agent updates a file, the iframe reloads.

What you can build

Because widgets are plain web pages, anything that runs in a browser works:

• Dashboards — charts, stat cards, KPI displays
• Data tables — filterable, sortable, paginated
• Forms — data entry, surveys, calculators
• Interactive tools — configurators, estimators, planning tools
• Reports — formatted printable documents
• Visualisations — maps, graphs, diagrams
• Games — yes, actual games

Using JavaScript libraries

The agent can include any library via CDN. Mention the library you want and the agent will include it:

Add a world map showing our office locations using Leaflet.js

Build a rich text editor using Quill

Add a date picker using Flatpickr

Popular libraries the agent uses well:

• Charts: Chart.js, ApexCharts, ECharts
• Maps: Leaflet, Mapbox GL
• Tables: DataTables, AG Grid (community)
• UI: Bootstrap, Bulma (for quick layouts)
• Dates: Flatpickr, Day.js

Fetching data

Widgets can fetch data from any URL accessible from the user’s browser. If your internal API has CORS enabled:

Fetch data from https://api.company.com/sales and display it in a table.
The API returns: { sales: [{ id, date, rep, amount, stage }] }

For APIs that require auth headers, the agent can include them:

The API requires an Authorization header with value "Bearer my-token".
Include that in all fetch calls.

Best practices for prompting

Be specific about layout. “Three cards in a row” is clearer than “some cards”.

Describe your data early. Share the shape of your API response before asking the agent to connect to it.

Iterate in steps. Build the structure first, then add data, then add interactivity.

Name things clearly. “The revenue card” is clearer than “that card” in follow-up messages.

Ask for explanations. “Explain how the filter works” helps you understand and maintain the widget later.

Sandboxing

The widget iframe runs with these sandbox attributes:

sandbox="allow-scripts allow-forms allow-popups"

This allows JavaScript execution and form submissions, but prevents the widget from accessing parent page state, local storage outside the iframe, or navigating the parent window.