162 lines
4.2 KiB
Markdown
162 lines
4.2 KiB
Markdown
# 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.
|