> ## Documentation Index > Fetch the complete documentation index at: https://docs.cognigy.com/llms.txt > Use this file to discover all available pages before exploring further. # Advanced: Build a Custom xApp Node > Advanced guide for building a custom xApp Node using the Cognigy Extension SDK, giving full control over xApp display and dialog Flow logic. If you need more control and flexibility than what the **xApp: Show Adaptive Card** or **xApp: Show HTML** offer, you can create your own customized Node. To create a custom xApp extension, you will need to build an [Extension](/ai/for-developers/extensions) from scratch using a [template](https://github.com/Cognigy/Extensions/tree/master/docs/example) provided in the Cognigy repository on GitHub. Below is the code snippet that you can use within the Extension. This code snippet helps to create a custom Node that displays text content and allows you to cancel or continue the dialog. ```js theme={null} export const xappDialogNode = createNodeDescriptor({ type: "xapp-dialog", fields: [ { key: "content", label: "Content", type: "cognigyText", }, ], function: (params) => { const { cognigy, config } = params; const { content } = config as any; // About the HTML code: // - Load the "app page SDK" from /sdk/app-page-sdk.js, which is always available for "generic HTML" apps. There's no need to include the SDK code within the HTML content. // - After the "app page SDK" line, you can use the SDK globally as it is now initialized. // - Use plain "onclick" handlers for the buttons to submit a result from the app by calling "SDK.submit({ action: '' })". // - Clicking one of the buttons closes the app and triggers an "inject" message. The value of "input.data._cognigy._xapp.result" is equal to the parameters you provided in "SDK.submit" ({ action: '' }). const getDialogHtml = (content) => `

${content}

`; // @ts-ignore cognigy.api.setAppState("generic-html", { html: getDialogHtml(content), }); }, }); ``` Use the [setAppState API](/xApps/api) with an `app template URL` set to `generic-html` and `app template data` that contain the HTML code generated. Once implemented, the generated HTML will appear within the app screen, similar to the **xApp: Show HTML** Node. This approach allows you to edit a specific part of the page through node fields, rather than modifying the entire page content. This streamlined process is focused on the necessary changes for the dialog. ## More Information * [xApp Nodes](/ai/agents/develop/node-reference/xApp/overview) * [Build an xApp](/xApps/build/overview) * [xApps](/xApps/overview)