---
title: Send MCP Message
sidebarTitle: "MCP: Send Message"
description: Send a message to the chat from a UI interaction.
icon: paper-plane
---

import { ComponentPreview } from '/snippets/component-preview.mdx'

`SendMessage` puts words in the user's mouth — when triggered, it sends a message to the conversation as if the user typed it. This is useful for creating quick-action buttons that trigger follow-up questions or commands.

<ComponentPreview json={{"view":{"type":"Button","label":"Summarize","variant":"default","size":"default","disabled":false,"onClick":{"action":"sendMessage","content":"Please summarize the data above."}}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQnV0dG9uCmZyb20gcHJlZmFiX3VpLmFjdGlvbnMubWNwIGltcG9ydCBTZW5kTWVzc2FnZQoKQnV0dG9uKCJTdW1tYXJpemUiLCBvbl9jbGljaz1TZW5kTWVzc2FnZSgiUGxlYXNlIHN1bW1hcml6ZSB0aGUgZGF0YSBhYm92ZS4iKSkK">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Button
from prefab_ui.actions.mcp import SendMessage

Button("Summarize", on_click=SendMessage("Please summarize the data above."))
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "type": "Button",
    "label": "Summarize",
    "variant": "default",
    "size": "default",
    "disabled": false,
    "onClick": {"action": "sendMessage", "content": "Please summarize the data above."}
  }
}
```
</CodeGroup>
</ComponentPreview>

The message appears in the chat attributed to the user, which means the AI assistant will respond to it naturally.

## Quick Action Buttons

Build a row of follow-up actions that save the user from typing:

<ComponentPreview json={{"view":{"cssClass":"gap-3","type":"Column","children":[{"content":"Quick Actions","type":"H3"},{"cssClass":"gap-2","type":"Row","children":[{"type":"Button","label":"Summarize","variant":"outline","size":"default","disabled":false,"onClick":{"action":"sendMessage","content":"Summarize these results."}},{"type":"Button","label":"Explain Further","variant":"outline","size":"default","disabled":false,"onClick":{"action":"sendMessage","content":"Explain these results in more detail."}},{"type":"Button","label":"Compare Options","variant":"outline","size":"default","disabled":false,"onClick":{"action":"sendMessage","content":"Compare the top options and recommend one."}}]}]}}} playground=" ">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Button, Row, H3, Column
from prefab_ui.actions.mcp import SendMessage

with Column(gap=3):
    H3("Quick Actions")
    with Row(gap=2):
        Button("Summarize", variant="outline",
               on_click=SendMessage("Summarize these results."))
        Button("Explain Further", variant="outline",
               on_click=SendMessage("Explain these results in more detail."))
        Button("Compare Options", variant="outline",
               on_click=SendMessage("Compare the top options and recommend one."))
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-3",
    "type": "Column",
    "children": [
      {"content": "Quick Actions", "type": "H3"},
      {
        "cssClass": "gap-2",
        "type": "Row",
        "children": [
          {
            "type": "Button",
            "label": "Summarize",
            "variant": "outline",
            "size": "default",
            "disabled": false,
            "onClick": {"action": "sendMessage", "content": "Summarize these results."}
          },
          {
            "type": "Button",
            "label": "Explain Further",
            "variant": "outline",
            "size": "default",
            "disabled": false,
            "onClick": {"action": "sendMessage", "content": "Explain these results in more detail."}
          },
          {
            "type": "Button",
            "label": "Compare Options",
            "variant": "outline",
            "size": "default",
            "disabled": false,
            "onClick": {
              "action": "sendMessage",
              "content": "Compare the top options and recommend one."
            }
          }
        ]
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## Dynamic Messages with State

Combine with state interpolation to include UI context in the message:

<ComponentPreview json={{"view":{"cssClass":"gap-3","type":"Column","children":[{"name":"question","type":"Input","inputType":"text","placeholder":"Ask a follow-up question...","disabled":false,"readOnly":false,"required":false},{"type":"Button","label":"Ask","variant":"default","size":"default","disabled":false,"onClick":{"action":"sendMessage","content":"{{ question }}"}}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgSW5wdXQsIEJ1dHRvbiwgQ29sdW1uCmZyb20gcHJlZmFiX3VpLmFjdGlvbnMubWNwIGltcG9ydCBTZW5kTWVzc2FnZQoKd2l0aCBDb2x1bW4oZ2FwPTMpOgogICAgcXVlc3Rpb24gPSBJbnB1dChuYW1lPSJxdWVzdGlvbiIsIHBsYWNlaG9sZGVyPSJBc2sgYSBmb2xsb3ctdXAgcXVlc3Rpb24uLi4iKQogICAgQnV0dG9uKCJBc2siLCBvbl9jbGljaz1TZW5kTWVzc2FnZShxdWVzdGlvbi5yeCkpCg==">
<CodeGroup>
```python Python icon="python"
from prefab_ui.components import Input, Button, Column
from prefab_ui.actions.mcp import SendMessage

with Column(gap=3):
    question = Input(name="question", placeholder="Ask a follow-up question...")
    Button("Ask", on_click=SendMessage(question.rx))
```
```json Protocol icon="brackets-curly"
{
  "view": {
    "cssClass": "gap-3",
    "type": "Column",
    "children": [
      {
        "name": "question",
        "type": "Input",
        "inputType": "text",
        "placeholder": "Ask a follow-up question...",
        "disabled": false,
        "readOnly": false,
        "required": false
      },
      {
        "type": "Button",
        "label": "Ask",
        "variant": "default",
        "size": "default",
        "disabled": false,
        "onClick": {"action": "sendMessage", "content": "{{ question }}"}
      }
    ]
  }
}
```
</CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="SendMessage Parameters">
<ParamField body="content" type="str" required>
  Message text to send to the conversation. Can be passed as a positional argument. Supports `{{ key }}` interpolation.
</ParamField>
</Card>

## Protocol Reference

```json SendMessage
{
  "action": "sendMessage",
  "content": "string (required)"
}
```

For the complete protocol schema, see [SendMessage](/protocol/send-message).
