Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.asquareportal.com/llms.txt

Use this file to discover all available pages before exploring further.

Applets are self-contained interactive applications that Portal Agent generates and embeds on your canvas as cards. They are built from HTML, CSS, and JavaScript, so they run live — you can click buttons, hover over data points, and interact with them just like a real app. Applets are generated in Compose mode and placed as cards in your workspace.

​
What applets are

When you ask the agent to “build a chart”, “create a calculator”, or “visualize this data”, it calls create_applet to generate a complete, working mini-app from your description. The result appears as a card on the canvas that you can resize, move, and interact with immediately. Applets are not static images or embeds from external services — they are generated code that runs locally inside your workspace.

​
Applet types

The create_applet tool supports six categories of applets:

chart

Line charts, bar charts, pie charts, and area charts. Include specific data in your prompt and the applet will render it accurately.

graph

Data visualizations beyond standard charts — scatter plots, network graphs, and custom data displays.

interactive

Interactive widgets and demos — sliders, toggles, configurators, and custom input components.

calculator

Calculation tools with inputs and outputs — BMI calculators, unit converters, financial estimators, and more.

game

Simple browser games — memory games, quizzes, click targets, and other playable mini-games.

demo

Physics simulations, animation demos, and generative art — anything that runs as a dynamic visual.

​
create_applet tool parameters

ParameterTypeRequiredDescription
appletTypestringYesOne of: chart, graph, interactive, calculator, game, demo
descriptionstringYesDetailed description of what to build, including any specific data values
requirementsstringNoExtra requirements like color theme, specific features, or animation style
The more specific your description, the better the result. For data applets, include the actual numbers — for example: “bar chart showing Q1 sales: North 120k,South120k, South 85k, East 97k,West97k, West 143k”. If the data needs to come from the web, ask the agent to search first.

​
Example prompts

​
Charts and data visualizations

Build a line chart applet showing monthly active users: Jan 1200, Feb 1850, Mar 2400, Apr 3100, May 3800

Create a pie chart showing market share: iOS 57%, Android 41%, Other 2%

Search for 2025 global EV adoption statistics, then build a bar chart applet with the actual data

​
Calculators and tools

Build a BMI calculator with height and weight inputs that shows the result and category

Create a compound interest calculator with principal, rate, years, and a results chart

Make a Pomodoro timer with 25-minute work intervals and 5-minute breaks

​
Interactive widgets

Create a color palette generator with a hue slider and hex code output

Build a poll widget for "What's your preferred work style?" with three options and a live results bar

Make an interactive periodic table that shows element details on hover

​
Games and demos

Build a simple memory card matching game with 8 pairs

Create a particle physics demo where particles bounce off the canvas edges

Generate a typing speed test game with a 30-second timer

​
How applets are generated

Applets are generated through the Compose engine, which produces complete HTML/CSS/JS output as a streaming render. The agent:
  1. Receives your description and any data you provide (or fetches it via web_search first)
  2. Calls create_applet with the type and a detailed description
  3. The Compose engine generates the full applet code
  4. The applet is embedded as a live card on your canvas
Applets are generated using the same AI pipeline as Compose mode app generation. If you want a full-page application rather than a canvas card, switch to Compose mode and generate an app there directly.

​
Using web search to power applets with real data

The most powerful applet workflow combines web_search with create_applet. Ask the agent to find real data, then immediately visualize it. 
Search for the current top 10 programming languages by popularity, then build a horizontal bar chart applet

Find the latest inflation rate data for the US, EU, and UK, then create a comparison chart applet
The agent handles both steps automatically — you do not need to copy and paste any data.

​
Interacting with applets on the canvas

Once an applet is placed on the canvas, you can:
  • Click and interact — all buttons, inputs, and hover states work as normal
  • Resize — drag the card corners to resize the applet viewport
  • Move — drag the card to reposition it anywhere on the canvas
  • Update — ask the agent to modify the applet by describing the change you want
Update the chart applet to use a dark background and teal accent color

Add a download button to the calculator applet
Applets run locally inside your workspace and do not make external network requests unless you explicitly prompt the agent to include live data fetching in the applet code. Data shown in applets reflects what was available at generation time.