Make Bot UI

Builds a local web UI that wakes a Grok Bot through a webhook routine over Tailscale.

2|Updated Jun 27, 2026
One-click install
npx skills add https://github.com/imjasonh/playground --skill make-bot-ui-imjasonh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Make Bot UI
Source: https://github.com/imjasonh/playground/tree/main/.cursor/skills/make-bot-ui
Command: npx skills add https://github.com/imjasonh/playground --skill make-bot-ui-imjasonh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides the creation of a custom page or dashboard whose buttons trigger a Grok Bot via a webhook routine, while keeping the webhook sender key on a local server instead of exposing it in the browser or chat. ## Core Features & Use Cases - Webhook Routine Setup: Creates a webhook-triggered routine with a prompt that treats the POST body as untrusted data and names the JSON fields the UI sends. - Secret Handling: Requests the sender key through a secret-request card so the key never appears in chat, logs, or browser code. - Local Server & Tailscale Hosting: Hosts the page on a server bound to 0.0.0.0 that proxies POSTs to the webhook with Bearer authorization, then exposes it on the tailnet with hostname and 100.x URLs. - Use Case: Build a dashboard button that, when clicked from any Tailscale device, POSTs JSON to wake a bot routine that performs an action and reports back. ## Quick Start Build me a small page with a button that wakes my Grok Bot through a webhook and serve it over Tailscale.

Frequently Asked Questions about Make Bot UI

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I trigger a bot from a custom web page using a webhook?▼

Create a webhook-triggered routine, then have a local server POST JSON to the routine's webhook URL with the sender key in the Authorization and X-Automation-Key headers. The browser talks only to the local server, never directly to the webhook.

How do I keep a webhook sender key out of the browser?▼

Store the key in a server-side config file in the UI's own directory and let the local server attach it to outbound POSTs. Request the key through a secret-request card so it is never pasted in chat, printed, or logged.

Can I expose a local web UI to other devices with Tailscale?▼

Yes. Bind the server to 0.0.0.0 rather than 127.0.0.1, bring the Tailscale node online with tailscale up, and share both the hostname.ts.net and 100.x IPv4 URLs over plain HTTP.

Why can't Tailscale peers reach my local server?▼

The server is likely bound to 127.0.0.1, which only accepts localhost connections. Rebind it to 0.0.0.0 on your chosen port so tailnet peers can reach it through the node's Tailscale IP.

What headers does the webhook POST request require?▼

The POST needs Content-Type application/json, Authorization Bearer with the sender key, and X-Automation-Key with the same key. Use an 8-second timeout, a single attempt with no retry, and expect HTTP 200 when the routine wakes.