Vendor packs

Preview. Vendor packs are implemented as a schema, a registry, and a renderer. The registry is in memory and is filled at startup. You link a bot to a pack in the bot’s Look setting (Edit bot), and bot chat then shows the vendor header. The bot’s vendorPackId is saved with the rest of its profile. There is no submission path for vendor packs yet. Treat this page as a description of the format, which may change.

A vendor pack is a small vendor-pack.json file that says how one vendor looks inside Allternit. It has three tiers. The tier is a property of the file, so a pack can move up a tier by editing its JSON.

Tier	Name	What you supply	What Allternit does
1	Open MCP App	An MCP server URL with `ui://` resources	Installs it as a connector and renders your Views with the MCP Apps host.
2	Tokens	Design tokens in DTCG format	Applies them to a vendor surface.
3	Look pack	A look profile: avatar, bubbles, header, composer, wording	Renders the vendor surface from the profile.

Tier 1 is the destination. If you can build an MCP server with a View, do that.

What a pack cannot change

The “via Allternit” badge is always shown. viaBadge.enabled must be true. You can change the label text (up to 32 characters).
The Allternit provenance header is not restyled. It sits outside the pack’s styling and uses none of the pack’s variables.
Logos are shown as supplied. logo.recolor must be false. Allternit does not recolor or distort a logo.

A pack that tries to turn the badge off or recolor a logo fails validation.

`vendor-pack.json`

{
  "id": "example-tokens",
  "version": "1.0.0",
  "vendor": { "id": "example", "displayName": "Example" },
  "tier": 2,
  "logo": { "placement": "both" },
  "viaBadge": { "enabled": true, "label": "via Allternit" },
  "tokens": {
    "color": {
      "$type": "color",
      "brand": { "$value": "#1f6feb" },
      "onBrand": { "$value": "#ffffff" },
      "bubble": { "$value": "{color.brand}" },
      "surface": { "$value": "#ffffff" }
    },
    "font": {
      "body": { "$type": "fontFamily", "$value": ["Inter", "system-ui", "sans-serif"] },
      "weight": { "$type": "fontWeight", "$value": "500" }
    },
    "radius": { "$type": "dimension", "bubble": { "$value": "14px" }, "card": { "$value": "10px" } },
    "spacing": { "$type": "dimension", "sm": { "$value": "8px" }, "md": { "$value": "12px" } }
  }
}

Field	Type	Rule
`id`	string	Lowercase letters, digits, and dashes. 2 to 63 characters, starting with a letter or digit.
`version`	string	Semantic version, `major.minor.patch`.
`vendor.id`	string	Same format as `id`.
`vendor.displayName`	string	1 to 60 characters.
`vendor.legalName`	string	Optional, up to 120 characters.
`tier`	`1`, `2`, or `3`	Required.
`tokens`	object	DTCG tokens. Required for tier 2. Optional accent tokens for tier 3.
`look`	object	Look profile. Required for tier 3.
`logo.asset`	string	An `https://` URL or an absolute app path. Without it a monogram is drawn.
`logo.placement`	`header`, `avatar`, or `both`	Default `both`.
`logo.minSizePx`	integer	12 to 64. Default 16.
`viaBadge`	object	`enabled` must be `true`. `label` defaults to `via Allternit`.
`mcpServerUrl`	string	An `https://` URL. Required for tier 1.

Tier 1: open MCP App

{
  "id": "example-app",
  "version": "1.0.0",
  "vendor": { "id": "example", "displayName": "Example" },
  "tier": 1,
  "mcpServerUrl": "https://mcp.example.com/mcp"
}

Allternit installs the server as a connector, through the same path as the connector marketplace, so authentication, tool discovery, and permission prompts work as for any other plugin. Nothing in the pack renders the app. The pack supplies the URL and the vendor identity (badge, logo) around it.

Tier 2: tokens

tokens is a DTCG document. The importer supports the color, fontFamily, fontWeight, number, and dimension types. The name of the top-level group decides how a token is used: color (or colors), font (fonts, typography), radius (radii, borderRadius), and spacing (space). It also supports:

$type inherited from parent groups.
{alias} references, such as {color.brand}, resolved with cycle detection.
Dimension values as strings ("14px") or objects.

Each token becomes a CSS variable named --vp-<path>, for example color.brand becomes --vp-color-brand. Variables are scoped to [data-vendor-pack="<id>"], so they apply to the vendor surface only. A value that could carry unsafe CSS is skipped and reported.

Tier 3: look pack

{
  "id": "example-look",
  "version": "1.0.0",
  "vendor": { "id": "example", "displayName": "Example" },
  "tier": 3,
  "tokens": {
    "color": { "$type": "color", "brand": { "$value": "#0f766e" } }
  },
  "look": {
    "avatarTreatment": "rounded",
    "bubbleStyle": "outlined",
    "headerLayout": "centered",
    "composerStyle": "pill",
    "terminology": { "thread": "chat", "task": "routine" },
    "statusVocabulary": { "working": "Thinking", "done": "All set" }
  }
}

`look` field	Values	Default
`avatarTreatment`	`circle`, `rounded`, `square`	`circle`
`bubbleStyle`	`filled`, `outlined`, `plain`	`filled`
`headerLayout`	`left`, `centered`	`left`
`composerStyle`	`pill`, `box`	`box`
`terminology`	Map of Allternit term to your word (each up to 40 characters)	none
`statusVocabulary`	Map of Allternit thread state to your wording (each up to 40 characters)	none

How a vendor supplies design tokens

Export your tokens from your design tool or repository as DTCG JSON.
Keep to the supported types and group names above. Use aliases for semantic names (bubble pointing at brand) so one change updates everything.
Put them under tokens in vendor-pack.json and set tier to 2.
Validate the file against the field rules above.

Use real, contrasting colors. Allternit does not adjust a pack for accessibility, so check contrast for text on your brand color yourself.

Not yet available

Persisting packs on the server. The registry is in memory.
A submission or review flow for vendor packs.
Look-profile fields beyond those listed above, such as approval-card and computer-view styling.

Built-in thread looks

The workspace also carries compiled React look packs in src/lib/gateway/look-packs/, separate from the JSON pack format above. Built-ins cover every vendor listed under Subscriptions, including each vendor’s adapter aliases. Unrecognised vendors use a neutral default look. Channel threads have looks for Slack, Telegram, Discord, WhatsApp, Microsoft Teams, email, and SMS. The host keeps the via Vendor provenance chip outside pack styling. Packed threads omit the decorative dot-grid backdrop. Bubbles wrap long text and fenced code scrolls inside its block at phone width. A vendor look does not establish that its connection is working: Gemini and Copilot are new, use best-effort ui_bridge, and have not yet been verified against the live services. Connect them under Settings → Subscriptions after reading the terms warning.

Opt-in host composer skin

Vendor threads keep Allternit’s composer by default, including send, stop, attachment, voice, and action behaviour. The single opt-in flag is useVendorComposerSkin.enabled in src/lib/gateway/look-packs/composer-skin.ts, default false. Application code can turn it on with:

import { useVendorComposerSkin } from '@/lib/gateway/look-packs/composer-skin';

useVendorComposerSkin.getState().setEnabled(true);
// Return to Allternit's composer:
useVendorComposerSkin.getState().setEnabled(false);

This is an in-memory developer setting, not a persistent Settings toggle. It resets on reload. isVendorComposerSkinEnabled() reads the flag outside React. composerSkinFor() supplies a supported pack’s radius, colours, placeholder, send style, leading mark, and optional model-name slot. Packs without a skin keep the host composer. Neither the flag nor a JSON composerStyle replaces the host’s interaction behaviour.

Add a compiled vendor look

Use createLookPack from src/lib/gateway/look-packs/pack-kit.tsx. Supply a CreateLookPackSpec: stable vendorId and surfaceKey, wordmark and logo or monogram, status vocabulary, light tokens and light/dark page colours, user/agent row shapes, and composer shape. The factory builds transcript, message, activity, approval, content, and composer components. Define the pack’s scoped light and dark CSS variables in look-packs.css; register it with registerLookPack() in builtin.ts. Register carried vendor aliases against the same surfaceKey. Keep host provenance visible, retain actual approval handlers, and verify narrow screens, long unbroken text, fenced code, streaming, and the default host composer. Phone pane controls belong to the host, outside the pack; both phone surfaces use those controls.

Get Started

Allternit Factory

Workspace workflows

Architecture

Work Runtime

Cognitive Runtime

Context & Memory

Tools & Execution

Verification & Safety

Observability & Evaluation

Kernel Contracts

Build on Allternit

Operations

Reference

Core Concepts

Gizzi Code CLI

Tools & ACI

Security & Enterprise

Admin API

BYOC Runtime

Surfaces

CI CD

Guides

Cookbooks

Release Notes

What a pack cannot change

`vendor-pack.json`

Tier 1: open MCP App

Tier 2: tokens

Tier 3: look pack

How a vendor supplies design tokens

Not yet available

Built-in thread looks

Opt-in host composer skin

Add a compiled vendor look

​What a pack cannot change

​vendor-pack.json

​Tier 1: open MCP App

​Tier 2: tokens

​Tier 3: look pack

​How a vendor supplies design tokens

​Not yet available

​Built-in thread looks

​Opt-in host composer skin

​Add a compiled vendor look

What a pack cannot change

`vendor-pack.json`

Tier 1: open MCP App

Tier 2: tokens

Tier 3: look pack

How a vendor supplies design tokens

Not yet available

Built-in thread looks

Opt-in host composer skin

Add a compiled vendor look