AsyncAPI Protocol Bindings

Overview

The protocol bindings package provides a modular architecture for rendering protocol-specific metadata across servers, channels, operations, and messages in AsyncAPI Document Processing specifications. It translates raw protocol configuration objects into structured user interface components with protocol labels, version badges, summaries, and field rows.

Sources: packages/asyncapi/src/ui/bindings/accordion-bindings.tsx:40-94, packages/asyncapi/src/ui/bindings/shared.tsx:181-203

Protocol binding architecture

Protocol Registry and Binding Definitions

The public API surface revolves around the protocolBindings registry and registration helpers packages/asyncapi/src/ui/bindings/protocols/index.ts:25-45, which map bound transport protocols to strongly typed ProtocolBindingDefinition interfaces packages/asyncapi/src/ui/bindings/shared.tsx:12-22. Every protocol entry defines React components for the four AsyncAPI specification levels (Server, Channel, Operation, and Message) alongside optional summary generator functions (getServerSummary, getChannelSummary, getOperationSummary, and getMessageSummary) packages/asyncapi/src/ui/bindings/shared.tsx:12-22.

The protocol registry contains the exact runtime identifiers supported by the rendering layer, mapping each string key to its corresponding configuration module packages/asyncapi/src/ui/bindings/protocols/index.ts:25-45.

Sources: packages/asyncapi/src/ui/bindings/protocols/index.ts:25-45, packages/asyncapi/src/ui/bindings/shared.tsx:12-22

Fallback Resolution and Extension Parsing

When a protocol string is absent from the static protocolBindings record, getProtocolBinding falls back to unknownBinding while dynamically injecting the raw protocol string as the display label packages/asyncapi/src/ui/bindings/protocols/index.ts:47-55.

Copyexport function getProtocolBinding(protocol: string): ProtocolBindingDefinition {
  const v = protocolBindings[protocol as never];
  if (v) return v;
 
  return {
    ...unknownBinding,
    label: protocol,
  };
}

Sources: packages/asyncapi/src/ui/bindings/protocols/index.ts:47-55

Simultaneously, getBindingEntries inspects raw binding dictionaries, filtering out non-plain objects and separating standard protocol objects from custom vendor extensions prefixed with x- packages/asyncapi/src/ui/bindings/protocols/index.ts:62-77.

Sources: packages/asyncapi/src/ui/bindings/protocols/index.ts:62-77, packages/asyncapi/src/ui/bindings/accordion-bindings.tsx:122-154

Shared binding UI primitives

Core Rendering Helpers and Scalar Formatting

The core formatting functions and layout components normalize raw record values into structured definition lists, labels, and tagged elements. The formatBindingScalar function handles primitive JavaScript types, converting null and undefined to empty strings, booleans to 'Yes' or 'No', arrays recursively, and serializing complex objects via JSON.stringify packages/asyncapi/src/ui/bindings/shared.tsx:24-34. The hasBindingFields helper checks if a binding dictionary contains actionable configuration keys, explicitly ignoring bindingVersion and any vendor extensions starting with x- packages/asyncapi/src/ui/bindings/shared.tsx:36-43.

Copyexport function formatBindingScalar(value: unknown): string {
  if (value === null || value === undefined) return '';
  if (typeof value === 'boolean') return value ? 'Yes' : 'No';
  if (typeof value === 'number') return String(value);
  if (typeof value === 'string') return value;
  if (Array.isArray(value)) {
    return value.map((item) => formatBindingScalar(item)).join(', ');
  }
 
  return JSON.stringify(value);
}
 
export function hasBindingFields(
  binding: Record<string, unknown>,
  ignore: string[] = ['bindingVersion'],
): boolean {
  return Object.keys(binding).some(
    (key) => !ignore.includes(key) && !key.startsWith('x-') && binding[key] !== undefined,
  );
}

Sources: packages/asyncapi/src/ui/bindings/shared.tsx:24-43

Sources: packages/asyncapi/src/ui/bindings/shared.tsx:36-43

UI Layout Components and Value Primitives

Layout rendering relies on specialized components that structure fields into definition lists and groups. BindingFields renders a dl element with the not-prose class packages/asyncapi/src/ui/bindings/shared.tsx:52-60, while BindingFieldRow constructs a responsive CSS grid separating terms (dt) from descriptions (dd) with bottom border dividers packages/asyncapi/src/ui/bindings/shared.tsx:81-101. Additional specialized wrappers handle scalar values, tag lists, schema definitions, and empty states.

Sources: packages/asyncapi/src/ui/bindings/shared.tsx:52-166

Kafka messaging and operation bindings

Server and Channel Configuration

The Kafka protocol binding implementation processes server, channel, operation, and message bindings to render specific metadata packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:189-199. The KafkaServerBinding component inspects server binding definitions for registry metadata packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:75-94. If fields are missing, it falls back to BindingEmpty packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:76. Otherwise, it outputs rows for schemaRegistryUrl and schemaRegistryVendor packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:80-91. Summary generation via getKafkaServerSummary joins these registry properties using joinBindingSummary packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:23-25.

Copyfunction getKafkaServerSummary(binding: NoReference<KafkaServerBinding>): string | undefined {
  return joinBindingSummary(binding.schemaRegistryUrl, binding.schemaRegistryVendor);
}
 
function getKafkaChannelSummary(binding: NoReference<KafkaChannelBinding>): string | undefined {
  const parts: string[] = [];
  if (binding.topic) parts.push(binding.topic);
  if (typeof binding.partitions === 'number') {
    parts.push(`${binding.partitions} partition${binding.partitions === 1 ? '' : 's'}`);
  }
  if (typeof binding.replicas === 'number') {
    parts.push(`${binding.replicas} replica${binding.replicas === 1 ? '' : 's'}`);
  }
  return parts.length > 0 ? parts.join(' · ') : undefined;
}

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:23-37

The KafkaChannelBinding component renders topic details, partition counts, replica counts, and nested topic settings packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:96-133. When topicConfiguration is present, it constructs a BindingGroup titled 'Kafka topic settings' containing key-value pairs rendered through BindingScalarValue packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:113-130.

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:96-133

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:27-37

Operation and Message Bindings

Operation bindings manage consumer group identifiers and client configurations packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:135-154. The KafkaOperationBinding component renders groupId and clientId schemas using the BindingSchema component packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:140-152.

Copyfunction getKafkaOperationSummary(binding: NoReference<KafkaOperationBinding>): string | undefined {
  const parts: string[] = [];
  const groupId = getBindingSchemaSummary(binding.groupId);
  const clientId = getBindingSchemaSummary(binding.clientId);
  if (binding.groupId) parts.push(`group: ${groupId}`);
  if (clientId) parts.push(`client: ${clientId}`);
  return parts.length > 0 ? parts.join(' · ') : undefined;
}

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:39-46

Message bindings configure message keys and serialization schemas packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:156-187. KafkaMessageBinding inspects four specific properties to build its field rows packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:156-187.

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:156-187

Sources: packages/asyncapi/src/ui/bindings/protocols/kafka.tsx:48-68

MQTT protocol binding configurations

MQTT Server, Operation, and Message Bindings

The MQTT protocol binding renderer manages configuration parameters across servers, operations, and messages through dedicated binding components defined in mqtt.tsx and mqtt5.tsx. For servers, fields such as clientId, cleanSession, keepAlive, sessionExpiryInterval, and maximumPacketSize are evaluated and rendered using scalar values or schema components depending on their type packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:48-94. The lastWill property creates a nested binding group containing its own topic, quality of service, message, and retain flags packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:95-129. Additionally, mqtt5Binding supplies an isolated server binding component that processes sessionExpiryInterval fields for MQTT 5 specifications packages/asyncapi/src/ui/bindings/protocols/mqtt5.tsx:14-33.

Sources: packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:48-129, packages/asyncapi/src/ui/bindings/protocols/mqtt5.tsx:14-33

Sources: packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:20-25

Quality of Service and Payload Formats

Operation bindings handle MQTT delivery guarantees and retention settings, exposing quality of service levels, retain flags, and message expiry intervals packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:134-164. Message bindings format payload characteristics, supporting payload format indicators via formatPayloadFormatIndicator, correlation data, content types, and response topics packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:167-207.

Sources: packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:53-204

Sources: packages/asyncapi/src/ui/bindings/protocols/mqtt.tsx:27-31

AMQP and SQS messaging bindings

AMQP Channel, Operation, and Message Bindings

The AMQP protocol binding renderer manages configuration parameters across channels, operations, and messages through dedicated components defined in amqp.tsx. Channel bindings process binding targets, exchanges, and queues via helper functions like formatAmqpIs and getAmqpChannelSummary packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:19-37. Exchange fields evaluate names, types, durability, auto-deletion, and virtual hosts, while queue fields handle name, durability, exclusivity, auto-deletion, and virtual host settings packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:46-103. Operation bindings expose message TTL, user ID, CC, BCC, priority, delivery mode, mandatory flags, timestamps, and acknowledgements, utilizing formatAmqpDeliveryMode to map values 1 and 2 to non-persistent and persistent modes packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:25-29, 141-192. Message bindings process content encoding and message types, combining them into summary strings via getAmqpMessageSummary packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:39-44, 195-214.

Sources: packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:19-214

Sources: packages/asyncapi/src/ui/bindings/protocols/amqp1.tsx:1-3

Amazon SQS Channel and Operation Bindings

The Amazon SQS protocol binding renderer configures queues and dead-letter queues across channels and operations through sqs.tsx. Channel bindings check for standard queues and dead-letter queues, rendering each through SqsQueueFields inside binding field rows packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:62-81. Operation bindings map over an array of queues, rendering each queue dynamically based on its index and name packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:83-97. Queue configuration properties include name, FIFO queue status, visibility timeout, message retention period, and custom tags rendered via BindingTagList packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:17-47. Summary generators extract queue names for channels, while operations format multiple queues by appending overflow counts such as ${first.name} +${queues.length - 1} packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:50-60.

Sources: packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:17-97

Sources: packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:111-205, packages/asyncapi/src/ui/bindings/protocols/sqs.tsx:73-94

Sources: packages/asyncapi/src/ui/bindings/protocols/amqp.tsx:19-23

WebSockets and HTTP network bindings

WebSocket Channel Configuration

The WebSocket protocol binding renderer handles channel configurations through ws.tsx, exporting wsBinding with a label of WebSocket packages/asyncapi/src/ui/bindings/protocols/ws.tsx:42-46. The getWsChannelSummary function extracts the HTTP/WebSocket method directly from the binding object packages/asyncapi/src/ui/bindings/protocols/ws.tsx:14-16. The WsChannelBinding component checks for active fields via hasBindingFields; if none exist, it renders BindingEmpty packages/asyncapi/src/ui/bindings/protocols/ws.tsx:18-20. When fields are present, it wraps them in BindingFields and populates optional properties including method, query, and headers packages/asyncapi/src/ui/bindings/protocols/ws.tsx:21-39. Query parameters and headers are rendered using the BindingSchema component, while scalar methods use BindingScalarValue packages/asyncapi/src/ui/bindings/protocols/ws.tsx:23-37.

Sources: packages/asyncapi/src/ui/bindings/protocols/ws.tsx:1-46

HTTP Operation and Message Bindings

The HTTP protocol binding renderer processes operations and messages via http.tsx, exporting httpBinding with an HTTP label packages/asyncapi/src/ui/bindings/protocols/http.tsx:63-69. Operation bindings utilize getHttpOperationSummary to return the HTTP method string packages/asyncapi/src/ui/bindings/protocols/http.tsx:14-16, while message bindings use getHttpMessageSummary to convert numeric status codes into strings packages/asyncapi/src/ui/bindings/protocols/http.tsx:18-20. HttpOperationBinding renders method and query parameters through BindingScalarValue and BindingSchema packages/asyncapi/src/ui/bindings/protocols/http.tsx:22-41. HttpMessageBinding processes headers schema definitions and checks whether statusCode is explicitly defined before rendering scalar status codes packages/asyncapi/src/ui/bindings/protocols/http.tsx:43-62.

Sources: packages/asyncapi/src/ui/bindings/protocols/http.tsx:1-69

Sources: packages/asyncapi/src/ui/bindings/protocols/ws.tsx:23-37, packages/asyncapi/src/ui/bindings/protocols/http.tsx:27-59

Sources: packages/asyncapi/src/ui/bindings/protocols/http.tsx:18-20

Unsupported and fallback protocol rendering

Fallback Protocol Resolution

When a protocol identifier specified in an AsyncAPI document does not match any entry in the built-in protocolBindings registry, the UI falls back to a generic renderer packages/asyncapi/src/ui/bindings/protocols/index.ts:47-55. The lookup function getProtocolBinding checks the protocol key against the supported record, and if it is absent, returns a copy of unknownBinding with its label overridden by the unrecognized protocol string packages/asyncapi/src/ui/bindings/protocols/index.ts:47-55.

Sources: packages/asyncapi/src/ui/bindings/protocols/index.ts:47-55

Unknown Binding Content and Extensions

The fallback handler unknownBinding defines Server, Channel, Operation, and Message handlers using UnknownBindingContent packages/asyncapi/src/ui/bindings/protocols/unknown.tsx:11-17. This component serializes the raw binding object into a formatted JSON code block via JSON.stringify, wrapped in a ClientCodeBlock component packages/asyncapi/src/ui/bindings/protocols/unknown.tsx:6-9. Similarly, getBindingEntries separates custom vendor extensions starting with x- from standard protocol bindings, allowing both unknown protocols and extensions to be inspected as raw structured data packages/asyncapi/src/ui/bindings/protocols/index.ts:62-78.

Sources: packages/asyncapi/src/ui/bindings/protocols/unknown.tsx:6-17, packages/asyncapi/src/ui/bindings/protocols/index.ts:62-78

Sources: packages/asyncapi/src/ui/bindings/protocols/index.ts:69-76

Related

• AsyncAPI Document Processing