# Agent Diff Tool Setup Guide

This guide explains how to configure your agent (n8n workflow) to use the diff tool functionality.

## How It Works

The chat interface now supports diff tool calls that get converted into beautiful, interactive diff displays. When the agent wants to show code changes, it can call the `show_diff` tool, which will be automatically converted to the proper markdown format.

## Agent Tool Call Format

Your agent should return tool calls in this JSON format:

```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "function hello() {\n  console.log('Hello, World!');\n}",
    "newCode": "function hello(name = 'World') {\n  console.log(`Hello, ${name}!`);\n}",
    "title": "Updated hello function",
    "language": "javascript"
  }
}
```

## Parameters

- **oldCode** (required): The original code as a string with `\n` for line breaks
- **newCode** (required): The modified code as a string with `\n` for line breaks
- **title** (optional): A descriptive title for the diff (defaults to "Code Changes")
- **language** (optional): The programming language for syntax highlighting (defaults to "text")

## n8n Workflow Configuration

### Option 1: Direct Tool Call Response

In your n8n workflow, when you want to show a diff, return:

```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "const x = 1;",
    "newCode": "const x = 1;\nconst y = 2;",
    "title": "Added new variable",
    "language": "javascript"
  }
}
```

### Option 2: Mixed Response with Tool Calls

You can also mix regular text with tool calls:

```json
{"type": "item", "content": "Here are the changes I made:\n\n"}

{"type": "tool_call", "name": "show_diff", "args": {"oldCode": "old code", "newCode": "new code", "title": "Changes"}}

{"type": "item", "content": "\n\nThese changes improve the functionality by..."}
```

### Option 3: Inline Tool Call

You can also return a single JSON object:

```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "function example() {\n  return 'old';\n}",
    "newCode": "function example() {\n  return 'new and improved';\n}",
    "title": "Function improvement",
    "language": "javascript"
  }
}
```

## Example Use Cases

### 1. Code Refactoring
```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "if (user) {\n  return user.name;\n}",
    "newCode": "if (user && user.name) {\n  return user.name;\n} else {\n  return 'Anonymous';\n}",
    "title": "Added null safety check",
    "language": "javascript"
  }
}
```

### 2. Bug Fix
```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "const result = a + b;",
    "newCode": "const result = Number(a) + Number(b);",
    "title": "Fixed type coercion bug",
    "language": "javascript"
  }
}
```

### 3. Feature Addition
```json
{
  "type": "tool_call",
  "name": "show_diff",
  "args": {
    "oldCode": "function calculate(x) {\n  return x * 2;\n}",
    "newCode": "function calculate(x, multiplier = 2) {\n  return x * multiplier;\n}",
    "title": "Added configurable multiplier",
    "language": "javascript"
  }
}
```

## n8n Node Configuration

In your n8n workflow, use a "Respond to Webhook" node with:

1. **Response Body**: Set to the JSON format above
2. **Response Headers**: Set `Content-Type` to `application/json`
3. **Response Code**: Set to `200`

## Testing

To test the diff tool:

1. Send a message to your agent asking for code changes
2. Configure your agent to return a `show_diff` tool call
3. The chat interface will automatically render the diff

## Error Handling

If the tool call is malformed, the API will return an error message instead of breaking. Make sure to:

- Include both `oldCode` and `newCode`
- Use proper JSON formatting
- Escape newlines as `\n`
- Use valid JSON structure

## Advanced Usage

You can also combine multiple tool calls in a single response by returning multiple JSON objects on separate lines:

```
{"type": "item", "content": "Here's the first change:\n\n"}
{"type": "tool_call", "name": "show_diff", "args": {...}}
{"type": "item", "content": "\n\nAnd here's the second change:\n\n"}
{"type": "tool_call", "name": "show_diff", "args": {...}}
```

This allows you to show multiple diffs in a single response.