An AI widget on your website
The widget is where visitors meet the assistant.
What you will learn
- Explain: a bounded agent loop
- Apply the idea in an example: An AI widget on your website
- Recognize limitations and verify the exercise outcome
The widget is where visitors meet the assistant. Combine clarity, the correct target and permitted access.
These steps refer to features identified in the application code. This material has not been validated on a live instance; check the documentation and the options in your version.
How it works, step by step
A bounded agent loop
An agent combines a model with tools, a goal and state. It observes the request, chooses a step, receives a result and decides whether to continue. A chatbot may only generate text; an agent may request an external action. Commercial definitions vary, so inspect actual control. Define success and stopping: a verified result, a maximum step count, repeated errors or an exhausted budget. Use narrow capabilities and minimal permissions. Useful autonomy means freedom within boundaries enforced by software.
Check access before use
Permissions must be enforced by servers and the data layer. Do not let the model decide whether a user may see a document. Filter sources before they enter context, not after generating the answer. Use minimal-access credentials, keep them out of prompts, screenshots and browser code, and rotate exposed keys. A widget domain allowlist does not replace API authentication. Authentication identifies you; authorization determines the operations and data you can use. Test denied access too.
Define success before optimizing
Prepare representative requests and expected answers or properties. Include ordinary cases, ambiguity, missing data and tool errors. For RAG, measure evidence retrieval separately from answer correctness. Recall@k measures the share of relevant evidence found in the first k results; precision@k measures the share of returned results that are relevant. For agents, also track actions, permissions and stopping. An LLM-as-judge can speed evaluation but needs calibration against humans. Do not change prompt, model and index simultaneously if you want to understand what improved results.
The visual map
Follow the solid arrows for the main flow. Dashed blue arrows supply data or context; dashed pink arrows show feedback or returning results. Colors and shapes distinguish models, stores, decisions and outputs. On smaller screens, scroll horizontally to follow the entire diagram.
A complete example
In Widgets choose agent, workflow or RAG, customize colors and greeting, check preview and allowed domains. Use the integration snippet supplied by your application version.
Try it yourself
- Test on one permitted and one denied test domain, then on mobile.
- Record the input, source and expected outcome before running the experiment. Use only the fictional data in the example.
- Follow the diagram stages. At every step record what information is received and produced; do not confuse intermediate output with the final outcome.
- Repeat after removing necessary information or making the input ambiguous. Check whether the system clarifies, stops or invents an answer.
- Compare with the explained solution. Keep the configuration, date, result and an explanation for differences. Change one thing and retest.
An explained solution
The widget responds on permitted domains with contrast, readable text and a clear role description. A successful exercise lets you show the connection between input, stages and outcome. When information is missing, a cautious answer is more useful than invented details. Compare more than style: check conditions, sources and operations too.
When it helps and what can go wrong
Do not place private API keys in browser snippets. Choose this approach when it improves a measured need. Keep a simple baseline and compare outcomes using identical inputs. One successful example does not establish reliability in every situation.
Check your understanding
Does more autonomy always give a better result?
No. It also increases room for errors, costs and unnecessary actions.
Why is removing a private source after answering too late?
The data has already entered model context and can be disclosed.
What outcome should this exercise produce?
The widget responds on permitted domains with contrast, readable text and a clear role description.
Words to remember
- Agent: A system that can choose steps and use tools toward a goal.
- Autorizare / Authorization: Checking the right to access an operation or resource.
- Regresie / Regression: A change that breaks a previously correct case.
Sources and your next step
To prepare: U04 — Conversations and feedback