30 lines
1.6 KiB
Plaintext
30 lines
1.6 KiB
Plaintext
# Create a Custom Widget
|
|
|
|
The workbench provides editors for general metadata, API sources, requests, widget options, JSX, and preview data. Raw
|
|
JSON is available when direct editing is faster.
|
|
|
|
## Workflow
|
|
|
|
1. Configure each API source, network scope, authentication method, and credential.
|
|
2. Add named queries and actions. Values can reference widget options or invocation parameters.
|
|
3. Define widget options and their defaults.
|
|
4. Write JSX using `data`, `status`, `options`, and temporary `inputs`.
|
|
5. Run **Test and preview**, inspect the response data and redacted request journal, then save.
|
|
|
|
Changing the definition, options, or credentials invalidates the previous preview. Preview actions are simulated unless
|
|
**Run actions against the configured API** is enabled for that preview session.
|
|
|
|
Widget options support text, textarea, number, switch, select, multi-select, slider, date, time, color, icon, URL,
|
|
duration, time zone, and JSON controls. Dynamic choices can come from a load query.
|
|
|
|
See the [safe JSX runtime](./custom-jsx), [component reference](./component-reference), and
|
|
[request reference](./requests-and-security) for the authoring contract.
|
|
|
|
## Create with another AI service
|
|
|
|
**Create or fix with any AI** copies a self-contained prompt for an ordinary ChatGPT or Claude conversation. The model
|
|
must return one fenced `json` block containing the complete definition. Paste that block into the workbench, add
|
|
credentials separately, and validate it against a real preview.
|
|
|
|
For an MCP-connected agent, use the [Homarr Custom Widget skill](./agent-authoring) instead.
|