# How Claude Artifacts Integrate with MCP Servers: A Complete Slack Integration Guide

> Learn how Claude artifacts integrate with MCP servers using Slack. Discover how to invoke tools and embed results in persistent artifacts for seamless workflow automation. Read our complete guide now.

- Repository: [Ásgeir Thor Johnson/system_prompts_leaks](https://github.com/asgeirtj/system_prompts_leaks)
- Tags: how-to-guide
- Published: 2026-02-16

---

**Claude's artifacts system integrates with MCP (Model-Context Protocol) servers by declaring external service endpoints in the `mcp_servers` array, allowing Claude to emit `mcp_tool_use` blocks that invoke service-specific tools like Slack's `slack_send_message`, with results returned as `mcp_tool_result` blocks that can be embedded into persistent artifacts.**

The `asgeirtj/system_prompts_leaks` repository provides authoritative source code revealing how Anthropic's Claude models handle external tool integration through the Model-Context Protocol. This analysis examines how Claude's artifacts system—described in [`Anthropic/old/claude-sonnet-4.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md)—interacts with MCP servers as specified in [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md), using Slack as the canonical implementation example.

## Understanding Claude's Artifacts and MCP Architecture

### What Are Claude Artifacts?

According to the system prompts in [`Anthropic/old/claude-sonnet-4.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md), Claude's **artifacts system** creates self-contained pieces of content—code, markdown, HTML, SVG, or React components—that persist across conversation turns. These artifacts can be created, updated, or referenced throughout a session, enabling complex multi-step workflows where content evolves based on external data.

### What Is the Model Context Protocol (MCP)?

The **Model-Context Protocol (MCP)** defines a standardized interface for connecting Claude to external services. As documented in [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md), an MCP server is a thin HTTP endpoint exposing a JSON-RPC-style API. Each server advertises a set of tools—strongly-typed functions with defined input schemas—that Claude can invoke during content generation.

## How MCP Server Integration Works

The integration between Claude artifacts and MCP servers follows a five-step execution flow:

1. **Client configures MCP servers** – The API request includes the `mcp_servers` array containing server URLs and authentication details.

2. **Claude generates tool calls** – During response generation, Claude emits `mcp_tool_use` blocks specifying the server, tool name, and input parameters.

3. **Client executes the tool call** – The client application forwards the tool invocation to the MCP server's HTTP endpoint.

4. **MCP server processes the request** – The server translates the generic tool call into service-specific API requests (e.g., Slack's `chat.postMessage`) and returns structured JSON.

5. **Claude receives the result** – The client includes the `mcp_tool_result` block in the next API request, allowing Claude to parse the response and embed it into an artifact or conversational response.

## Slack MCP Integration Example

### Configuring the Slack MCP Server

To enable Slack functionality, the client includes the Slack MCP server in the `mcp_servers` array as defined in [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md):

```json
{
  "mcp_servers": [
    {
      "type": "url",
      "url": "https://mcp.slack.com/mcp",
      "name": "slack-mcp"
    }
  ]
}

```

This configuration advertises to Claude that Slack-specific tools are available for invocation.

### Invoking Slack Tools

When Claude determines that posting a message to Slack is necessary, it generates an `mcp_tool_use` block. The repository reveals that Slack tools follow the naming convention `Slack:slack_send_message`, `Slack:slack_read_channel`, and `Slack:slack_create_canvas`:

```json
{
  "type": "mcp_tool_use",
  "name": "Slack:slack_send_message",
  "input": {
    "channel_id": "C0123456789",
    "message": "Hello from Claude! :wave:"
  }
}

```

### Handling Tool Results

After the MCP server executes the Slack API call, it returns a result that the client forwards back to Claude as an `mcp_tool_result` block:

```json
{
  "type": "mcp_tool_result",
  "content": [
    {
      "type": "text",
      "text": "{ \"ok\": true, \"channel\": \"C0123456789\", \"ts\": \"1708101234.000200\", \"message\": { \"text\": \"Hello from Claude! :wave:\" } }"
    }
  ]
}

```

According to the source code in [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md), Claude extracts data from these results by type rather than position, enabling robust parsing of complex responses.

## Code Implementation Examples

### Complete API Request with Slack MCP Integration

```json
{
  "model": "claude-sonnet-4-20250514",
  "max_tokens": 1000,
  "messages": [
    { 
      "role": "user", 
      "content": "Post a quick update to #general about the new feature rollout." 
    }
  ],
  "mcp_servers": [
    {
      "type": "url",
      "url": "https://mcp.slack.com/mcp",
      "name": "slack-mcp"
    }
  ]
}

```

### Processing MCP Results in JavaScript

The repository recommends extracting tool results by type. This pattern handles multiple concurrent tool calls:

```javascript
// `data` represents the Claude API response object
const toolResults = data.content
  .filter(item => item.type === "mcp_tool_result")
  .map(item => item.content?.[0]?.text || "")
  .join("\n");

// Embed results into a markdown artifact
const artifactContent = `

# Slack Update Log

Message posted to <https://slack.com/app_redirect?channel=C01GENERAL>:

${toolResults}
`;

```

### Creating Artifacts from MCP Data

Claude can create persistent artifacts containing Slack interaction logs:

```json
{
  "command": "create",
  "type": "markdown",
  "title": "Slack Update Log",
  "content": "# Slack Update Log\n\nMessage posted successfully.\n\n{{toolResults}}"

}

```

To append new Slack interactions to an existing artifact:

```json
{
  "command": "update",
  "id": "artifact-1234",
  "old_str": "## Log End",

  "new_str": "## Log End\n- 2024‑02‑16: Posted rollout announcement to #general"

}

```

## Key Source Files in system_prompts_leaks

The following files from the `asgeirtj/system_prompts_leaks` repository contain the authoritative specifications for Claude's MCP and artifacts integration:

| File | Description | Link |
|------|-------------|------|
| [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md) | Defines the `mcp_servers` payload format, Slack tool specifications (`slack_send_message`, `slack_create_canvas`), and result handling patterns. | [View source](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md) |
| [`Anthropic/old/claude-sonnet-4.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md) | Documents the artifacts system lifecycle: creation, updating, and referencing of persistent content blocks. | [View source](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md) |
| [`readme.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/readme.md) | Repository overview and index of leaked system prompt files. | [View source](https://github.com/asgeirtj/system_prompts_leaks/blob/main/readme.md) |

## Summary

- **Claude's artifacts system** creates persistent, self-contained content blocks that can be updated throughout a conversation, as defined in [`Anthropic/old/claude-sonnet-4.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md).

- **MCP servers** provide a standardized JSON-RPC interface for external tool integration, configured via the `mcp_servers` array in API requests documented in [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md).

- **Slack integration** demonstrates the complete workflow: configuring the server URL, invoking `Slack:slack_send_message` via `mcp_tool_use` blocks, processing `mcp_tool_result` responses, and embedding results into persistent markdown artifacts.

- **Result handling** should extract data by type rather than position for robust parsing of complex MCP responses.

## Frequently Asked Questions

### How do I configure Slack MCP integration in Claude API requests?

Include the Slack MCP server endpoint in the `mcp_servers` array of your API request payload. According to [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md), you must specify the server type as `"url"`, provide the HTTPS endpoint (e.g., `https://mcp.slack.com/mcp`), and assign a unique name like `"slack-mcp"`. This configuration advertises Slack tools to Claude before generation begins.

### What is the difference between mcp_tool_use and mcp_tool_result blocks?

The `mcp_tool_use` block is generated by Claude when it decides to invoke an external tool, containing the tool name (e.g., `Slack:slack_send_message`) and input parameters. The `mcp_tool_result` block is created by the client application after executing the tool call against the MCP server, containing the structured JSON response from the external service. Claude requires these result blocks in subsequent conversation turns to continue the workflow.

### Can Claude update existing artifacts with data from MCP tool results?

Yes, Claude can update existing artifacts using MCP data through the artifacts command system documented in [`Anthropic/old/claude-sonnet-4.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/old/claude-sonnet-4.md). After receiving an `mcp_tool_result` containing Slack message confirmations or channel data, Claude can issue an `update` command with the artifact ID, specifying `old_str` to match existing content and `new_str` to append the new MCP-derived information, creating persistent logs of external interactions.

### Which Slack tools are available through the MCP server?

According to [`Anthropic/claude-opus-4.6.md`](https://github.com/asgeirtj/system_prompts_leaks/blob/main/Anthropic/claude-opus-4.6.md), the Slack MCP connector exposes multiple tools including `slack_send_message` for posting to channels, `slack_read_channel` for retrieving conversation history, and `slack_create_canvas` for generating collaborative documents. These tools follow the naming convention `Slack:tool_name` and accept strongly-typed parameters such as `channel_id`, `message`, and formatting options, enabling comprehensive Slack workspace automation through Claude's artifact workflows.