N8N Webhook Chat - VS Code Extension

🤖 Description

N8N Webhook Chat is a Visual Studio Code extension that provides a powerful chat interface connected to N8N webhooks. Designed for developers who want to integrate their VS Code environment with N8N automation workflows and custom AI assistants.

✨ Key Features

🔗 N8N Webhook Integration: Direct connection to your N8N workflows
� Real-time Chat: Instant communication with your automation systems
🎨 Modern Interface: Clean and intuitive design
📱 Responsive: Adapts to different panel sizes
💾 Persistence: Saves webhook configuration and chat history
⚡ Fast: Instant webhook responses without interrupting workflow
🔧 Configurable: Easy webhook URL configuration

🚀 Installation

From VS Code Marketplace:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X)
- Search for "N8N Webhook Chat"
- Click "Install"

Manual Installation:

code --install-extension dgtovar.n8n-webhook-chat

📖 Usage

Quick Access

Command Palette: Ctrl+Shift+P → "N8N Webhook Chat"
Sidebar: "N8N Webhook Chat" panel in explorer
Context Menu: Right-click on files

N8N Webhook Configuration

Open the chatbot
Configure your webhook URL in the top section
Click "Test Connection"
Done! The chatbot will use your custom webhook

Available Commands

chatbot.start: Open N8N Webhook Chat
chatbot.showInSidebar: Show in sidebar

🔧 Configuration

N8N Webhook

{
  "message": "Your question here",
  "timestamp": "2025-09-26T10:30:00.000Z",
  "source": "n8n-webhook-chat"
}

Expected Response:

JSON: {"response": "Bot response"}
Plain text: "Direct response"

🎨 Screenshots

Main interface with Purple Heart theme
Sidebar panel integrated in VS Code
N8N webhook configuration
Example conversation with code

🛠️ Development

Requirements

Node.js >= 16.x
TypeScript >= 4.9.x
VS Code >= 1.74.0

Local Installation

git clone https://github.com/diegogzt/hookn8n-vscode.git
cd hookn8n-vscode
npm install
npm run compile

Package

npm install -g vsce
vsce package

📝 Changelog

v1.0.0

🎉 Initial release
🔗 Complete N8N webhook integration
� Real-time chat interface
📱 Responsive and modern design
⚡ Performance optimization

🤝 Contributing

Contributions are welcome!

Fork the project
Create your branch: git checkout -b feature/new-feature
Commit your changes: git commit -m 'Add new feature'
Push to branch: git push origin feature/new-feature
Open a Pull Request

N8N Webhook Chat

dgtovar