> ## 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.
# Interactive applets: embed AI-generated mini-apps
> Applets are live HTML/CSS/JS mini-apps the agent generates and embeds directly on your canvas — charts, calculators, visualizations, games, and more.
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:
Line charts, bar charts, pie charts, and area charts. Include specific data in your prompt and the applet will render it accurately.
Data visualizations beyond standard charts — scatter plots, network graphs, and custom data displays.
Interactive widgets and demos — sliders, toggles, configurators, and custom input components.
Calculation tools with inputs and outputs — BMI calculators, unit converters, financial estimators, and more.
Simple browser games — memory games, quizzes, click targets, and other playable mini-games.
Physics simulations, animation demos, and generative art — anything that runs as a dynamic visual.
## create\_applet tool parameters
| Parameter | Type | Required | Description |
| -------------- | ------ | -------- | -------------------------------------------------------------------------- |
| `appletType` | string | Yes | One of: `chart`, `graph`, `interactive`, `calculator`, `game`, `demo` |
| `description` | string | Yes | Detailed description of what to build, including any specific data values |
| `requirements` | string | No | Extra 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, South $85k, East $97k, West $143k". If the data needs to come from the web, ask the agent to search first.
## Example prompts
### Charts and data visualizations
```text theme={null}
Build a line chart applet showing monthly active users: Jan 1200, Feb 1850, Mar 2400, Apr 3100, May 3800
```
```text theme={null}
Create a pie chart showing market share: iOS 57%, Android 41%, Other 2%
```
```text theme={null}
Search for 2025 global EV adoption statistics, then build a bar chart applet with the actual data
```
### Calculators and tools
```text theme={null}
Build a BMI calculator with height and weight inputs that shows the result and category
```
```text theme={null}
Create a compound interest calculator with principal, rate, years, and a results chart
```
```text theme={null}
Make a Pomodoro timer with 25-minute work intervals and 5-minute breaks
```
### Interactive widgets
```text theme={null}
Create a color palette generator with a hue slider and hex code output
```
```text theme={null}
Build a poll widget for "What's your preferred work style?" with three options and a live results bar
```
```text theme={null}
Make an interactive periodic table that shows element details on hover
```
### Games and demos
```text theme={null}
Build a simple memory card matching game with 8 pairs
```
```text theme={null}
Create a particle physics demo where particles bounce off the canvas edges
```
```text theme={null}
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.
```text theme={null}
Search for the current top 10 programming languages by popularity, then build a horizontal bar chart applet
```
```text theme={null}
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
```text theme={null}
Update the chart applet to use a dark background and teal accent color
```
```text theme={null}
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.