MCPNEW

McpToolCall

Tool execution card: idle → running → done/error with retry.

Available inreactangularvue

Preview

Live previewreal component

unknown

idle

Install

TerminalBash

$ npx mcp-elements add mcp-tool-call

Usage

mcp-tool-call-example.tsxTSX

import { McpToolCall } from '@mcp-elements/react'
import { createToolState } from '@mcp-elements/core'

const state = createToolState()
state.start({ tool: 'search', args: { query: 'MCP protocol' } })

export function Example() {
  return <McpToolCall state={state} onRetry={() => state.reset()} />
}

mcp-tool-call.component.tsTS

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

@Component({
  selector: 'app-tool-call-example',
  standalone: true,
  imports: [McpeMcpToolCallComponent],
  template: `<mcpe-mcp-tool-call [state]="state" (onRetry)="onRetry()" />`,
})
export class ToolCallExampleComponent {
  state = createToolState()
  constructor() {
    this.state.start({ tool: 'search', args: { query: 'MCP protocol' } })
  }
  onRetry() {
    this.state.reset()
    this.state.start({ tool: 'search', args: { query: 'MCP protocol' } })
  }
}

mcp-tool-call.vueVue

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

const state = createToolState()
state.start({ tool: 'search', args: { query: 'MCP protocol' } })

function onRetry() {
  state.reset()
  state.start({ tool: 'search', args: { query: 'MCP protocol' } })
}
</script>

<template>
  <McpeMcpToolCall :state="state" @retry="onRetry" />
</template>

Props

Prop	Type	Default	Description
`state *`	`ToolStateApi`	—	ToolStateApi instance from createToolState()
`toolName`	`string`	—	Fallback tool name when state.tool is undefined
`args`	`Record<string, unknown>`	—	Fallback args when state.args is undefined
`onRetry`	`() => void`	—	Callback for the Retry button shown on error