Build a public-information AI helper with safe output handling

Prepare the project and choose a narrow job

You need basic HTML and JavaScript, an understanding of promises and a project you are authorized to use. For a live connection, use your own verified individual account, a registered HTTPS domain and the documented SDK. Account verification may take around ten days, so begin with the local interface and fictional replies while onboarding is pending.

Use this original fictional fact card: a study-desk workshop takes place online on Tuesday at 18:00 Cairo time and lasts 60 minutes. No price, seat count or cancellation policy is supplied. The assistant’s job is to explain those facts. An answer that invents an available seat fails the exercise even if it sounds helpful.

Create a text-only question and answer interface

Add the following markup to an exercise page. Load the SDK before your own application script. No initialization method or secret key is added. Complete the separate user-initiated login flow before enabling this form for live requests; do not launch a login popup on page load. Your login handler enables the question button after success and disables it on logout.

<form id="helper-form">
  <label for="question">Question about the example workshop</label>
  <input id="question" name="question" maxlength="600" required>
  <button type="submit" disabled>Ask</button>
</form>
<p id="helper-status" role="status"></p>
<p id="helper-answer"></p>
<script src="https://api.gammal.tech/sdk-web.js"></script>
<!-- Place your application script after the SDK. -->

Explain beside the form that questions are sent to the hosted service. Ask learners to use only fictional, non-sensitive text. Do not request passwords, identity documents, session tokens or real customer records. A short input limit keeps the exercise focused; it does not make arbitrary input trustworthy.

Send one request and display the returned string

Place this application code after the SDK and interface markup. It assumes the learner has already signed in. The documented ai.ask method returns a string, and its options include system_prompt and max_tokens. See the official API contract for current limits.

const form = document.getElementById('helper-form');
const status = document.getElementById('helper-status');
const answer = document.getElementById('helper-answer');
const button = form.querySelector('button'); button.disabled = !GammalTech.isLoggedIn();
const card = 'You are Gammal Tech Assistant. Fictional workshop: Tuesday 18:00 Cairo time, online, 60 minutes. '
  + 'Topic: arranging a study desk. No seat availability is supplied. '
  + 'Answer only from these facts. For unknowns say you do not know. '
  + 'Do not book, take payment, or claim to change any record.';
let pending = false;
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  if (!GammalTech.isLoggedIn()) { status.textContent = 'Please sign in first.'; return; }
  const message = form.elements.question.value.trim();
  if (pending || !message || message.length > 600) return;
  pending = true;
  button.disabled = true;
  answer.textContent = '';
  status.textContent = 'Checking your question...';
  try {
    const reply = await GammalTech.ai.ask(message, {
      system_prompt: card, max_tokens: 300
    });
    answer.textContent = reply;
    status.textContent = 'Review this answer before relying on it.';
  } catch {
    status.textContent = 'The helper is unavailable. Please try later.';
  } finally {
    pending = false; button.disabled = !GammalTech.isLoggedIn();
  }
});

The pending state reduces accidental duplicate submissions. It is not a spending control against a malicious user. No automatic retry loop is added. The SDK already includes network retry behavior. The response is assigned to textContent, so markup is shown as text instead of being interpreted as page content.

Evaluate answers before adding a live connection

First supply local sample replies to the answer element and verify their presentation. Then, if the project owner approves live usage and its budget, use the same cases to assess actual replies. Record the question, expected behavior, observed behavior and pass or fail. Keep tokens and real personal information out of the sheet.

Keep the prompt separate from security authority

The fact card is public browser code. It contains no secret and cannot authorize an operation. A person can change a request or ask the model to ignore the card. OWASP’s prompt-injection guidance explains why instructions alone are not a security boundary.

Keep the helper read-only. Do not execute its output, turn it into HTML or use it as an administrator decision. For unknown questions, show an ordinary contact route chosen by the project owner. The helper must not invent a handoff or claim it sent a message. A misleading response remains a quality failure even when the page displayed it safely.

Budget for requests and recognize service responses

As documented on 12 October 2026, signed-in AI includes 200 messages per project each month, followed by 0.20 EGP per message. The first guest-AI call consumes the remaining signed-in free allowance, so check actual project usage and balance. Check the current platform information before a live exercise. This lab uses the signed-in method only.

A resolved request is not proof that the answer is useful. The service may return a friendly balance-related message as ordinary text rather than throw an error. Review such output instead of treating it as a workshop answer. Use local sample replies for repeated interface testing, and set an owner-approved live test allowance.

Submit an evaluation pack with clear limitations

Your pack contains the fictional fact card, interface source, five completed test rows and a short note describing what the helper cannot do. Score four areas from zero to five: fact accuracy, handling unknowns, safe display and understandable failure handling. A full mark requires evidence, such as a sanitized screenshot or a recorded observation.

A good next step is studying input validation, content security controls and application authorization. Hosted AI removes the need to operate an AI backend for this task, but your website code, publishing accounts, data choices and spending oversight remain your responsibility. This lab demonstrates a bounded integration skill, not completion of cybersecurity training.

Common questions

Does a strong system prompt stop prompt injection?

It helps describe the intended task, but it does not enforce access control or make output reliable. Keep privileged actions outside this helper and evaluate answers against independent expectations.

Must I make paid requests to complete the exercise?

No. Build and test the interface with clearly labeled local sample replies. Connecting the documented live method is an optional step that requires the project owner’s approval and budget.