원클릭으로 Manus에서 모든 스킬 실행

agentic-app

스타4

포크1

업데이트2026년 6월 13일 04:43

Build an interactive Agentic-App (output.html) that the user sees next to the chat and that can send prompts back into the conversation. Use when the user asks for a page, dashboard, form, report, or any visual/interactive result.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

the-agentic-company

the-agentic-company/bap

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Agentic-App

An Agentic-App is a single self-contained HTML file you write to /app/output.html. Bap collects it automatically (you do not need to mention it in your answer) and renders it beside the conversation in a sandboxed iframe. Buttons and forms inside the page can send a prompt back into the conversation — the prompt becomes a real user message, exactly as if the user had typed it.

Rules for output.html

Write exactly /app/output.html (case-sensitive basename output.html).
One self-contained document: inline all CSS and JavaScript. No external files, no relative assets. Keep it under 2 MB.
The iframe is sandboxed with allow-scripts allow-forms only: your script cannot make network calls to Bap, cannot read cookies, and cannot navigate the parent page. The ONLY channel back to Bap is the prompt protocol below.

Sending a prompt back into the conversation

Post a message to the parent window:

parent.postMessage(
  { type: "bap:agentic-app-prompt", version: 1, prompt: "Send the weekly email to the team" },
  "*",
);

prompt must be a non-empty string. It is sent as a user message with the conversation's existing settings; you cannot attach files or change the model.
Prompts only take effect as a direct result of real user interaction (a click or key press inside the page) while the app is shown in the live chat panel. Posts on page load, on a timer, or in a background loop are rejected, so always send from a real click or submit handler.
The same page may also be shown in read-only views (for example a coworker's info page) where there is no prompt channel and no acknowledgement ever arrives. Always handle a never-arriving ack: re-enable the button after a short timeout instead of leaving it stuck in a "Sending…" state.
Bap replies with an acknowledgement so you can show honest button state:

window.addEventListener("message", (event) => {
  const data = event.data;
  if (!data || data.type !== "bap:agentic-app-prompt-result") return;
  // data.status is "sent" or "rejected"
  // on rejection, data.reason may be "rate_limited", "no_user_activation", or "invalid"
});

sent means the prompt is now a user message in the conversation (a new agent run starts, or it queues behind the current one). rate_limited means slow down — disable the button briefly. no_user_activation means the send did not come from a real user interaction.

Complete example

<!doctype html>
<html>
  <body>
    <button id="send">Send the weekly email</button>
    <script>
      const btn = document.getElementById("send");
      let ackTimer = null;
      btn.addEventListener("click", () => {
        btn.disabled = true;
        btn.textContent = "Sending…";
        parent.postMessage(
          { type: "bap:agentic-app-prompt", version: 1, prompt: "Send the weekly email" },
          "*",
        );
        // Recover if no ack arrives (e.g. rendered in a read-only view).
        ackTimer = setTimeout(() => {
          btn.textContent = "Try again";
          btn.disabled = false;
        }, 3000);
      });
      window.addEventListener("message", (event) => {
        const data = event.data;
        if (!data || data.type !== "bap:agentic-app-prompt-result") return;
        clearTimeout(ackTimer);
        if (data.status === "sent") {
          btn.textContent = "Sent ✓";
        } else {
          btn.textContent = "Try again";
          btn.disabled = false;
        }
      });
    </script>
  </body>
</html>

Build prompts dynamically from form values when useful (for example, interpolate a recipient and subject the user typed into the page), but always send them from a click or submit handler.

이 저장소의 다른 Skills

같은 저장소

worktree

the-agentic-company/bap

Guides agents through isolated Git worktree setup, lifecycle commands, process cleanup, and per-worktree local development state. Use when creating, starting, stopping, inspecting, cleaning up, or troubleshooting Git worktree development environments or when a repository includes a worktree lifecycle CLI.

2026-06-274

babysit-ci-release

the-agentic-company/bap

Continuously watch and fix release main CI until the branch is fully green and verified working. Use when asked to babysit CI, babysit CI release, monitor release main, run /loop for CI, run /goal until checks pass, or keep iterating until release main is green.

2026-06-214

fix-flaky-tests

the-agentic-company/bap

Fix flaky tests by repeatedly running the suite, collecting intermittent failures, and proving stability. Use when asked to fix flaky tests or require repeated/consecutive green test runs.

2026-06-194

the-agentic-company/bap

Manage LinkedIn messaging, profiles, posts, connections, and company pages via Unipile. Use for networking, content publishing, and lead engagement.

2026-06-184

commit

the-agentic-company/bap

Scoped commit workflow with a bundled committer script that prevents accidental broad staging. Use when the user asks to commit, commit all, create a git commit, or handle commit-time staging in this repository.

2026-06-184

the-agentic-company/bap

Systematically QA a web application like a real user, triage issues by severity, fix scoped bugs when asked, verify fixes with evidence, and report ship readiness. Use when asked to QA, test a site or app, find bugs, test and fix, or check whether a feature works.

2026-06-134

name	agentic-app
description	Build an interactive Agentic-App (output.html) that the user sees next to the chat and that can send prompts back into the conversation. Use when the user asks for a page, dashboard, form, report, or any visual/interactive result.

Agentic-App

Rules for output.html

Write exactly /app/output.html (case-sensitive basename output.html).
One self-contained document: inline all CSS and JavaScript. No external files, no relative assets. Keep it under 2 MB.
The iframe is sandboxed with allow-scripts allow-forms only: your script cannot make network calls to Bap, cannot read cookies, and cannot navigate the parent page. The ONLY channel back to Bap is the prompt protocol below.

Sending a prompt back into the conversation

Post a message to the parent window:

parent.postMessage(
  { type: "bap:agentic-app-prompt", version: 1, prompt: "Send the weekly email to the team" },
  "*",
);

prompt must be a non-empty string. It is sent as a user message with the conversation's existing settings; you cannot attach files or change the model.
Prompts only take effect as a direct result of real user interaction (a click or key press inside the page) while the app is shown in the live chat panel. Posts on page load, on a timer, or in a background loop are rejected, so always send from a real click or submit handler.
The same page may also be shown in read-only views (for example a coworker's info page) where there is no prompt channel and no acknowledgement ever arrives. Always handle a never-arriving ack: re-enable the button after a short timeout instead of leaving it stuck in a "Sending…" state.
Bap replies with an acknowledgement so you can show honest button state:

window.addEventListener("message", (event) => {
  const data = event.data;
  if (!data || data.type !== "bap:agentic-app-prompt-result") return;
  // data.status is "sent" or "rejected"
  // on rejection, data.reason may be "rate_limited", "no_user_activation", or "invalid"
});

sent means the prompt is now a user message in the conversation (a new agent run starts, or it queues behind the current one). rate_limited means slow down — disable the button briefly. no_user_activation means the send did not come from a real user interaction.

Complete example

<!doctype html>
<html>
  <body>
    <button id="send">Send the weekly email</button>
    <script>
      const btn = document.getElementById("send");
      let ackTimer = null;
      btn.addEventListener("click", () => {
        btn.disabled = true;
        btn.textContent = "Sending…";
        parent.postMessage(
          { type: "bap:agentic-app-prompt", version: 1, prompt: "Send the weekly email" },
          "*",
        );
        // Recover if no ack arrives (e.g. rendered in a read-only view).
        ackTimer = setTimeout(() => {
          btn.textContent = "Try again";
          btn.disabled = false;
        }, 3000);
      });
      window.addEventListener("message", (event) => {
        const data = event.data;
        if (!data || data.type !== "bap:agentic-app-prompt-result") return;
        clearTimeout(ackTimer);
        if (data.status === "sent") {
          btn.textContent = "Sent ✓";
        } else {
          btn.textContent = "Try again";
          btn.disabled = false;
        }
      });
    </script>
  </body>
</html>

Build prompts dynamically from form values when useful (for example, interpolate a recipient and subject the user typed into the page), but always send them from a click or submit handler.