Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Webhook guide: build a Discussion bot with LLM replies","local":"webhook-guide-build-a-discussion-bot-with-llm-replies","sections":[{"title":"Create your Webhook in your user profile","local":"create-your-webhook-in-your-user-profile","sections":[],"depth":2},{"title":"Create a new Bot user profile","local":"create-a-new-bot-user-profile","sections":[],"depth":2},{"title":"Create a Space that will react to your Webhook","local":"create-a-space-that-will-react-to-your-webhook","sections":[],"depth":2},{"title":"Configure your Webhook to send events to your Space","local":"configure-your-webhook-to-send-events-to-your-space","sections":[],"depth":2},{"title":"Result","local":"result","sections":[],"depth":2}],"depth":1}"> | |
| <link href="/docs/hub/pr_2521/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/scheduler.409792a1.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/singletons.1ece723a.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.0f0d9f26.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/paths.a67d9216.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/preload-helper.78e52d9f.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.92d389ff.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/0.7799902b.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/256.5a029491.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/CopyLLMTxtMenu.dcf7fb47.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.0c189c7e.js"> | |
| <link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/CodeBlock.5ed269c1.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Webhook guide: build a Discussion bot with LLM replies","local":"webhook-guide-build-a-discussion-bot-with-llm-replies","sections":[{"title":"Create your Webhook in your user profile","local":"create-your-webhook-in-your-user-profile","sections":[],"depth":2},{"title":"Create a new Bot user profile","local":"create-a-new-bot-user-profile","sections":[],"depth":2},{"title":"Create a Space that will react to your Webhook","local":"create-a-space-that-will-react-to-your-webhook","sections":[],"depth":2},{"title":"Configure your Webhook to send events to your Space","local":"configure-your-webhook-to-send-events-to-your-space","sections":[],"depth":2},{"title":"Result","local":"result","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="webhook-guide-build-a-discussion-bot-with-llm-replies" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#webhook-guide-build-a-discussion-bot-with-llm-replies"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Webhook guide: build a Discussion bot with LLM replies</span></h1> <p data-svelte-h="svelte-iiob56">Here’s a short guide on how to use Hugging Face Webhooks to build a bot that replies to Discussion comments on the Hub with a response generated by an LLM of your choice via <a href="https://huggingface.co/docs/inference-providers/en/index" rel="nofollow">Hugging Face Inference Providers</a>.</p> <h2 class="relative group"><a id="create-your-webhook-in-your-user-profile" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#create-your-webhook-in-your-user-profile"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Create your Webhook in your user profile</span></h2> <p data-svelte-h="svelte-15jch62">First, let’s create a Webhook from your <a href="https://huggingface.co/settings/webhooks" rel="nofollow">settings</a>.</p> <ul data-svelte-h="svelte-7wrx85"><li>Input a few target repositories that your Webhook will listen to.</li> <li>You can put a dummy Webhook URL for now, but defining your webhook will let you look at the events that will be sent to it (and you can replay them, which will be useful for debugging).</li> <li>Input a secret as it will be more secure.</li> <li>Subscribe to Community (PR & discussions) events, as we are building a Discussion bot.</li></ul> <p data-svelte-h="svelte-1kjjv0e">Your Webhook will look like this:</p> <p data-svelte-h="svelte-1qn956z"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/webhook-creation.png" alt="webhook-creation"></p> <h2 class="relative group"><a id="create-a-new-bot-user-profile" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#create-a-new-bot-user-profile"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Create a new Bot user profile</span></h2> <p data-svelte-h="svelte-yy1y6h">In this guide, we create a separate user account to host a Space and to post comments:</p> <p data-svelte-h="svelte-1ihxq2p"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/discussion-bot-profile.png" alt="discussion-bot-profile"></p> <blockquote class="tip" data-svelte-h="svelte-yptivr"><p>When creating a bot that will interact with other users on the Hub, we ask that you clearly label the account as a “Bot” (see profile screenshot).</p></blockquote> <h2 class="relative group"><a id="create-a-space-that-will-react-to-your-webhook" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#create-a-space-that-will-react-to-your-webhook"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Create a Space that will react to your Webhook</span></h2> <p data-svelte-h="svelte-10hvkux">The third step is actually to listen to the Webhook events.</p> <p data-svelte-h="svelte-66j7b7">An easy way is to use a Space for this. We use the user account we created, but you could do it from your main user account if you wanted to.</p> <p data-svelte-h="svelte-18f75oa">The Space’s code is <a href="https://huggingface.co/spaces/discussion-bot/webhook/tree/main" rel="nofollow">here</a>.</p> <p data-svelte-h="svelte-18swlk4">We used NodeJS and Typescript to implement it, but any language or framework would work equally well. Read more about Docker Spaces <a href="https://huggingface.co/docs/hub/spaces-sdks-docker" rel="nofollow">here</a>.</p> <p data-svelte-h="svelte-13dfin0"><strong>The main <code>server.ts</code> file is <a href="https://huggingface.co/spaces/discussion-bot/webhook/blob/main/server.ts" rel="nofollow">here</a></strong></p> <p data-svelte-h="svelte-1pwq3vv">Let’s walk through what happens in this file:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-ts "><!-- HTML_TAG_START -->app.<span class="hljs-title function_">post</span>(<span class="hljs-string">"/"</span>, <span class="hljs-keyword">async</span> (req, res) => { | |
| <span class="hljs-keyword">if</span> (req.<span class="hljs-title function_">header</span>(<span class="hljs-string">"X-Webhook-Secret"</span>) !== process.<span class="hljs-property">env</span>.<span class="hljs-property">WEBHOOK_SECRET</span>) { | |
| <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">"incorrect secret"</span>); | |
| <span class="hljs-keyword">return</span> res.<span class="hljs-title function_">status</span>(<span class="hljs-number">400</span>).<span class="hljs-title function_">json</span>({ <span class="hljs-attr">error</span>: <span class="hljs-string">"incorrect secret"</span> }); | |
| } | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-fjo3lx">Here, we listen to POST requests made to <code>/</code>, and then we check that the <code>X-Webhook-Secret</code> header is equal to the secret we had previously defined (you need to also set the <code>WEBHOOK_SECRET</code> secret in your Space’s settings to be able to verify it).</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-ts "><!-- HTML_TAG_START --> <span class="hljs-keyword">const</span> event = req.<span class="hljs-property">body</span>.<span class="hljs-property">event</span>; | |
| <span class="hljs-keyword">if</span> ( | |
| event.<span class="hljs-property">action</span> === <span class="hljs-string">"create"</span> && | |
| event.<span class="hljs-property">scope</span> === <span class="hljs-string">"discussion.comment"</span> && | |
| req.<span class="hljs-property">body</span>.<span class="hljs-property">comment</span>.<span class="hljs-property">content</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-variable constant_">BOT_USERNAME</span>) | |
| ) { | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-9uldfr">The event’s payload is encoded as JSON. Here, we specify that we will run our Webhook only when:</p> <ul data-svelte-h="svelte-170dc9y"><li>the event concerns a discussion comment</li> <li>the event is a creation, i.e. a new comment has been posted</li> <li>the comment’s content contains <code>@discussion-bot</code>, i.e. our bot was just mentioned in a comment.</li></ul> <p data-svelte-h="svelte-1wkfczu">In that case, we will continue to the next step:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-ts "><!-- HTML_TAG_START --> <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">CHAT_API_URL</span> = | |
| <span class="hljs-string">"https://router.huggingface.co/v1/chat/completions"</span>; | |
| <span class="hljs-keyword">const</span> <span class="hljs-variable constant_">SYSTEM_PROMPT</span> = <span class="hljs-string">`You are a helpful bot that replies to discussions about machine learning. Keep your responses concise and friendly.`</span>; | |
| <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-variable constant_">CHAT_API_URL</span>, { | |
| <span class="hljs-attr">method</span>: <span class="hljs-string">"POST"</span>, | |
| <span class="hljs-attr">headers</span>: { | |
| <span class="hljs-string">"Authorization"</span>: <span class="hljs-string">`Bearer <span class="hljs-subst">${process.env.HF_TOKEN}</span>`</span>, | |
| <span class="hljs-string">"Content-Type"</span>: <span class="hljs-string">"application/json"</span>, | |
| }, | |
| <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ | |
| <span class="hljs-attr">model</span>: <span class="hljs-string">"moonshotai/Kimi-K2.6"</span>, | |
| <span class="hljs-attr">messages</span>: [ | |
| { <span class="hljs-attr">role</span>: <span class="hljs-string">"system"</span>, <span class="hljs-attr">content</span>: <span class="hljs-variable constant_">SYSTEM_PROMPT</span> }, | |
| { <span class="hljs-attr">role</span>: <span class="hljs-string">"user"</span>, <span class="hljs-attr">content</span>: req.<span class="hljs-property">body</span>.<span class="hljs-property">comment</span>.<span class="hljs-property">content</span> }, | |
| ], | |
| <span class="hljs-attr">max_tokens</span>: <span class="hljs-number">500</span>, | |
| }), | |
| }); | |
| <span class="hljs-keyword">if</span> (response.<span class="hljs-property">ok</span>) { | |
| <span class="hljs-keyword">const</span> output = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>(); | |
| <span class="hljs-keyword">const</span> continuationText = output.<span class="hljs-property">choices</span>[<span class="hljs-number">0</span>].<span class="hljs-property">message</span>.<span class="hljs-property">content</span>; | |
| ...<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-6bo7f7">This is the coolest part: using <a href="https://huggingface.co/docs/inference-providers/chat-completions" rel="nofollow">Hugging Face Inference Providers</a>, we call an open-weight model (<code>moonshotai/Kimi-K2.6</code>) with a system prompt and the user’s comment. The model generates a reply, which we extract from <code>choices[0].message.content</code>.</p> <p data-svelte-h="svelte-3riqyn">You can pick any model from the <a href="https://huggingface.co/inference/models" rel="nofollow">list of available models</a> — just swap the <code>model</code> field.</p> <p data-svelte-h="svelte-7n9emh">Finally, we will post it as a reply in the same discussion thread:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-ts "><!-- HTML_TAG_START --> <span class="hljs-keyword">const</span> commentUrl = req.<span class="hljs-property">body</span>.<span class="hljs-property">discussion</span>.<span class="hljs-property">url</span>.<span class="hljs-property">api</span> + <span class="hljs-string">"/comment"</span>; | |
| <span class="hljs-keyword">const</span> commentApiResponse = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(commentUrl, { | |
| <span class="hljs-attr">method</span>: <span class="hljs-string">"POST"</span>, | |
| <span class="hljs-attr">headers</span>: { | |
| <span class="hljs-title class_">Authorization</span>: <span class="hljs-string">`Bearer <span class="hljs-subst">${process.env.HF_TOKEN}</span>`</span>, | |
| <span class="hljs-string">"Content-Type"</span>: <span class="hljs-string">"application/json"</span>, | |
| }, | |
| <span class="hljs-attr">body</span>: <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">comment</span>: continuationText }), | |
| }); | |
| <span class="hljs-keyword">const</span> apiOutput = <span class="hljs-keyword">await</span> commentApiResponse.<span class="hljs-title function_">json</span>();<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="configure-your-webhook-to-send-events-to-your-space" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#configure-your-webhook-to-send-events-to-your-space"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Configure your Webhook to send events to your Space</span></h2> <p data-svelte-h="svelte-dskcrn">Last but not least, you’ll need to configure your Webhook to send POST requests to your Space.</p> <p data-svelte-h="svelte-51uzae">Let’s first grab our Space’s “direct URL” from the contextual menu. Click on “Embed this Space” and copy the “Direct URL”.</p> <p data-svelte-h="svelte-8upc7q"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/embed-space.png" alt="embed this Space"> <img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/direct-url.png" alt="direct URL"></p> <p data-svelte-h="svelte-xwubul">Update your webhook to send requests to that URL:</p> <p data-svelte-h="svelte-15slbem"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/webhook-creation.png" alt="webhook settings"></p> <h2 class="relative group"><a id="result" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#result"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Result</span></h2> <p data-svelte-h="svelte-1bgc7bn"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/webhooks-guides/001-discussion-bot/discussion-result.png" alt="discussion-result"></p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/webhooks-guide-discussion-bot.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p> | |
| <script> | |
| { | |
| __sveltekit_1bollga = { | |
| assets: "/docs/hub/pr_2521/en", | |
| base: "/docs/hub/pr_2521/en", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js"), | |
| import("/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 256], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 29.5 kB
- Xet hash:
- c35056273178134316bb843f6c71f541482253094fe5d88e9da632a3b64d22d9
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.