MCP Apps screens and live webhooks
Answer me with artifact · 2026-11-03 20:43

MCP Apps screens and live webhooks

Lead: For apps without their own screen, Allternit draws one: the vendor's brand look plus a fixed layout per tool. No model runs to draw it. Webhooks get a public address, real signature checks, a bot run per event, and one guided setup in place of three broken forms.

A

What already exists

table
| Piece | State | Where || --- | --- | --- || Brand look packs | ok 1,189 packs (colour, logo, radius) | src/lib/vendor-packs || Screen views per tool | warn slot exists, 0 filled | vendor pack `views` || View kit (card, table, list, detail, chart, form) | ok draws tool results in chat | view-kit/ViewKit.tsx || OpenUI components | ok 38 components, 70 templates | src/lib/openui || Capture a real result and map it | ok Studio (MCP Apps › Build) | StudioBuilder.tsx || A page to open an app | no only inline in chat | AciMiniAppFrameView |
B

How an app screen is made

// resource?: checkfoundnonealwaysTool resultHas uiScreen map for this toolAllternit screen in thevendor lookShape rules (list, record,numbers)

The same tool result always draws the same screen. A screen map names the layout and fields: for example, Linear list_issues is a board grouped by state with assignee and priority. Maps live in the vendor pack, so one fix reaches every user.

C

MCP Apps Discover

React · MCP Apps › Discover

Cards show a preview of the real screen instead of a bare logo. The badge names the screen kind. "Has a screen" lists vendor screens and Allternit screens. The rest of the 1,156 connectors follow below it.

D

An app opened: Linear

React · ACI › Linear (Allternit screen)

Clicking a card opens its record view. Buttons such as "Move to Done" call the vendor's own tool, and each one asks you first. The footer always says the screen is Allternit's, not the vendor's.

E

How deep for the whole catalogue

table
| Tier | Which apps | Screen | How it is made || --- | --- | --- | --- || 1 Vendor | Apps that ship ui:// | Theirs | Shown as is || 2 Curated | Top 50 by use | Hand-tuned map per main tool | Run each tool on a test account, map it, review it || 3 Captured | Every app you connect | Map made from your first real result | Studio's capture-and-map, saved to the pack and offered to all after review || 4 Shape rules | Everything else | List, record or numbers view | Today's heuristics, in the vendor look |

The catalogue grows by itself. Each tier-3 capture goes to the Review tab, and an approved map is shared with everyone. A nightly job lists the apps people use most that have no map yet.

How deep do we go first?
F

Webhooks: what is broken, what changes

table
| Step | Today | After the fix || --- | --- | --- || Create | no 422 from all 3 forms | ok Name and bot required; the rest has defaults; secret made for you || Public address | no page origin; 405 or 404 | ok https://api.allternit.com/channels/in/key, relayed to your computer, queued while it sleeps || Signature | no the secret travels in every request | ok GitHub, Stripe, Linear, Shopify and Allternit signatures checked on your computer || No-signature senders | no impossible | ok Zapier, Make and forms: the private address is the key || Event filter | no ignored | ok only the events you picked || Bot run | no a ticket nothing reads | ok a task thread for the bot; tools still ask first || Bad signature | warn HTTP 200 | ok HTTP 401, logged || Tests | no none | ok signature, filter, relay and run |
G

Webhooks: guided setup

React · Customize › Webhooks › New from GitHub

Each source has its own steps: GitHub, Stripe, Linear, Shopify, Zapier or Make, a form, and your own code with a signing snippet. The page turns green when the first delivery arrives. After setup, the trigger page shows every delivery with its status and a link to the bot's thread. The bot's page and Settings › Webhooks use this same component, so the 3 broken forms become 1.

Build the webhooks setup like this?
H

Order of work

  1. Webhooks, now: fix the API, then the cloud relay route.
  2. Webhooks, now: build the guided setup on all three surfaces, with docs and tests.
  3. Webhooks: show you one preview before the deploy.
  4. MCP Apps, after you pick the depth: build the open-app page and the Discover previews.
  5. MCP Apps: make maps for the first 10 apps and show them to you before the next 40.