@n8n/chat 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +69 -4
  2. package/package.json +7 -1
package/README.md CHANGED
@@ -6,6 +6,8 @@ Create a n8n workflow which you want to execute via chat. The workflow has to be
6
6
 
7
7
  [See example workflow](/resources/workflow.json)
8
8
 
9
+ > Make sure the workflow is **Active.**
10
+
9
11
  ### How it works
10
12
  Each Chat request is sent to the n8n Webhook endpoint, which then sends back a response.
11
13
 
@@ -17,15 +19,75 @@ We use the `Switch` node to handle the different actions.
17
19
 
18
20
  ## Installation
19
21
 
20
- ### Embed HTML
22
+ ### a. CDN Embed
23
+ Add the following code to your HTML page.
24
+
21
25
  ```html
26
+ <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/style.css" type="text/css" />
22
27
  <script type="module">
23
- import { createChat } from '@n8n/chat';
28
+ import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/chat.js';
29
+
30
+ createChat({
31
+ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
32
+ });
33
+ </script>
34
+ ```
35
+
36
+ ### b. Import Embed
37
+ Install and save n8n Chat as a production dependency.
38
+
39
+ ```sh
40
+ npm install @n8n/chat
41
+ ```
42
+
43
+ Import the CSS and use the `createChat` function to initialize your Chat window.
44
+
45
+ ```ts
46
+ import '@n8n/chat/style.css';
47
+ import { createChat } from '@n8n/chat';
24
48
 
49
+ createChat({
50
+ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
51
+ });
52
+ ```
53
+
54
+ ##### Vue.js
55
+
56
+ ```html
57
+ <script lang="ts" setup>
58
+ // App.vue
59
+ import { onMounted } from 'vue';
60
+ import '@n8n/chat/style.css';
61
+ import { createChat } from '@n8n/chat';
62
+
63
+ onMounted(() => {
25
64
  createChat({
26
- webhookUrl: 'http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183'
65
+ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
27
66
  });
67
+ });
28
68
  </script>
69
+ <template>
70
+ <div></div>
71
+ </template>
72
+ ```
73
+
74
+ ##### React
75
+
76
+ ```tsx
77
+ // App.tsx
78
+ import { useEffect } from 'react';
79
+ import '@n8n/chat/style.css';
80
+ import { createChat } from '@n8n/chat';
81
+
82
+ export const App = () => {
83
+ useEffect(() => {
84
+ createChat({
85
+ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
86
+ });
87
+ }, []);
88
+
89
+ return (<div></div>);
90
+ };
29
91
  ```
30
92
 
31
93
  ## Options
@@ -61,7 +123,10 @@ createChat({
61
123
  ### `webhookUrl`
62
124
  - **Type**: `string`
63
125
  - **Required**: `true`
64
- - **Description**: The URL of the n8n Webhook endpoint
126
+ - **Examples**:
127
+ - `https://yourname.app.n8n.cloud/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183`
128
+ - `http://localhost:5678/webhook/513107b3-6f3a-4a1e-af21-659f0ed14183`
129
+ - **Description**: The URL of the n8n Webhook endpoint. Should be the production URL.
65
130
 
66
131
  ### `webhookConfig`
67
132
  - **Type**: `{ method: string, headers: Record<string, string> }`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@n8n/chat",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "main": "./chat.umd.cjs",
5
5
  "module": "./chat.js",
6
6
  "types": "./types/index.d.ts",
@@ -56,6 +56,12 @@
56
56
  "vitest": "^0.33.0",
57
57
  "vue-tsc": "^1.8.6"
58
58
  },
59
+ "repository": {
60
+ "type": "git",
61
+ "url": "git+https://github.com/n8n-io/n8n.git"
62
+ },
63
+ "license": "fair-code",
64
+ "homepage": "https://n8n.io",
59
65
  "scripts": {
60
66
  "dev": "npm run storybook",
61
67
  "build": "run-p type-check build:vite && npm run build:prepare",