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:

{
  "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:

{
  "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:

{"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:

{
  "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

{
  "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

{
  "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

{
  "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:

Response Body: Set to the JSON format above
Response Headers: Set Content-Type to application/json
Response Code: Set to 200

Testing

To test the diff tool:

Send a message to your agent asking for code changes
Configure your agent to return a show_diff tool call
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.

4.2 KiB Raw Blame History