McpServerStatus

import { McpServerStatus } from '@mcp-elements/react'

export function Example() {
  return (
    <div className="flex gap-3 flex-wrap">
      <McpServerStatus status="connected" serverName="github-mcp" />
      <McpServerStatus status="connecting" />
      <McpServerStatus status="disconnected" />
      <McpServerStatus status="error" />
    </div>
  )
}

import { Component } from '@angular/core'
import { McpeMcpServerStatusComponent } from '@mcp-elements/angular'

@Component({
  selector: 'app-server-status-example',
  standalone: true,
  imports: [McpeMcpServerStatusComponent],
  template: `
    <div class="flex gap-3 flex-wrap">
      <mcpe-mcp-server-status status="connected" serverName="github-mcp" />
      <mcpe-mcp-server-status status="connecting" />
      <mcpe-mcp-server-status status="disconnected" />
      <mcpe-mcp-server-status status="error" />
    </div>
  `,
})
export class ServerStatusExampleComponent {}

<script setup lang="ts">
import { McpeMcpServerStatus } from '@mcp-elements/vue'
</script>

<template>
  <div class="flex gap-3 flex-wrap">
    <McpeMcpServerStatus status="connected" server-name="github-mcp" />
    <McpeMcpServerStatus status="connecting" />
    <McpeMcpServerStatus status="disconnected" />
    <McpeMcpServerStatus status="error" />
  </div>
</template>