Ai tools

content/en/docs/02.getting-started.md

@@ -16,7 +16,7 @@ There are two easy ways to begin working with the framework: forking [the exampl
 
 :youtube-video{name="getting-started"}
 
-## Prerequisites
+## Prerequisites {#prerequisites}
 
 Before diving into Rete.js, it's important to have an understanding of JavaScript or TypeScript fundamentals. The framework is primarily designed with TypeScript in mind, with examples and guides showcasing code in this language. However, for newcomers to TypeScript or those looking to quickly prototype, it's still possible to use Rete.js directly in JavaScript code.
 
@@ -27,6 +27,18 @@ If TypeScript is your preferred choice, make sure you have TypeScript version 4.
 - [Codesandbox](https://codesandbox.io/s/rete-js-v2-yrzxe5)
 - [Codepen](https://codepen.io/Ni55aN/pen/rNZKejd)
 
+## AI Assistance {#ai-assistance}
+
+Get intelligent, context-aware help in your AI-powered IDE. Use your IDE's agent or command execution feature (available in Cursor, GitHub Copilot Chat, Windsurf, and similar tools) and simply ask your AI assistant:
+
+```prompt
+Run npx rete-kit ai for [your intention]
+```
+
+Replace `[your intention]` with your actual goal, such as "learning Rete.js", "creating a new app", or "adding to my existing project". The AI agent will automatically determine the right options based on your intent. This generates IDE-specific instructions that help AI assistants understand Rete.js patterns and provide relevant guidance.
+
+For more details, see the [AI Assistance](/docs/development/ai-assistance) documentation.
+
 ## Creating an application using devkit {#devkit}
 
 Use [Rete Kit](/docs/development/rete-kit) to quickly set up a Rete.js application. It lets you select a stack (**React.js**, **Vue.js**, **Angular**, **Svelte** or **Lit**) and the set of features.

content/en/docs/04.guides/02.renderers/1.react.md

@@ -286,7 +286,7 @@ render.addPreset(Presets.contextMenu.setup({
 }))
 ```
 
-## Other presets {#other presets}
+## Other presets {#other-presets}
 
 - [context menu](/docs/guides/context-menu)
 - [minimap](/docs/guides/minimap)

content/en/docs/04.guides/02.renderers/2.vue.md

@@ -208,7 +208,7 @@ In order to customize the context menu for this rendering plugin, one can overri
 
 Since `rete-vue-plugin` creates independent Vue.js instance for nodes, sockets, controls, etc., it doesn't inherit plugins from your project's main Vue instance. To bridge this gap, the plugin offers a solution: injecting a custom Vue application instance. This capability ensures that any Vue plugins or global components you wish to employ within your Rete-specific Vue components are accessible, enabling seamless sharing between your Vue.js application and Rete.js editor.
 
-### Vue.js 3
+### Vue.js 3 {#vue-js-3}
 
 The following example demonstrates how to configure custom Vue.js 3 instance:
 
@@ -229,7 +229,7 @@ const render = new VuePlugin<Schemes, AreaExtra>({
 
 where `yourPlugin` is an instance of any plugin (like [Vuetify](https://vuetifyjs.com/en/getting-started) or [Vue I18N](https://vue-i18n.intlify.dev/))
 
-### Vue.js 2
+### Vue.js 2 {#vue-js-2}
 
 Since the initialization for Vue.js 2 is slightly different, let's take a look at the following example:
 
@@ -248,7 +248,7 @@ const render = new VuePlugin<Schemes, AreaExtra>({
 
 where `yourPlugin` is an instance of any plugin (like [Vuetify](https://vuetifyjs.com/en/getting-started) or [Vue I18N](https://kazupon.github.io/vue-i18n/))
 
-## Other presets {#other presets}
+## Other presets {#other-presets}
 
 - [context menu](/docs/guides/context-menu)
 - [minimap](/docs/guides/minimap)

content/en/docs/04.guides/02.renderers/3.angular.md

@@ -233,7 +233,7 @@ To take advantage of these features, make sure to use the version-specific impor
 import { AngularPlugin, Presets, AngularArea2D } from "rete-angular-plugin/20";
 ```
 
-## Other presets {#other presets}
+## Other presets {#other-presets}
 
 - [context menu](/docs/guides/context-menu)
 - [minimap](/docs/guides/minimap)

content/en/docs/04.guides/02.renderers/4.svelte.md

@@ -202,7 +202,7 @@ In order to customize the context menu for this rendering plugin, one can overri
 }
 ```
 
-## Other presets {#other presets}
+## Other presets {#other-presets}
 
 - [context menu](/docs/guides/context-menu)
 - [minimap](/docs/guides/minimap)

content/en/docs/04.guides/02.renderers/5.lit.md

@@ -201,7 +201,7 @@ render.addPreset(Presets.classic.setup({
 }))
 ```
 
-## Other presets {#other presets}
+## Other presets {#other-presets}
 
 - [context menu](/docs/guides/context-menu)
 - [minimap](/docs/guides/minimap)

content/en/docs/04.guides/04.data-structures.md

@@ -78,7 +78,7 @@ Array.from(new Set(incomers))
 Array.from(new Set(outgoers))
 ```
 
-## Advanced methods
+## Advanced methods {#advanced-methods}
 
 The previously mentioned approaches are fairly flexible, but they require the implementation of more advanced methods on your own. Fortunately, the [`rete-structures` package](https://github.com/retejs/structures) offers such methods divided into 4 categories:
 

content/en/docs/04.guides/05.arrange.md

@@ -89,7 +89,7 @@ const applier = new ArrangeAppliers.TransitionApplier<Schemes, AreaExtra>({
 await arrange.layout({ applier })
 ```
 
-## Arrange options
+## Arrange options {#arrange-options}
 
 Additionally, you can make use of [global options for elk.js](https://eclipse.dev/elk/reference/options.html). For instance, this empowers you to alter the spacing between nodes
 

content/en/docs/04.guides/05.selectable/1.connections.md

@@ -13,7 +13,7 @@ This guide is based on the [Basic](/docs/guides/basic) guide. It is recommended
 :ref-guide{title="Selectable" link="/docs/guides/selectable"}
 ::
 
-## Getting types ready
+## Getting types ready {#getting-types-ready}
 
 Introducing an optional `selected` field to the connection type will allow us to specify programmatically added connections as selected
 
@@ -28,7 +28,7 @@ class Connection extends ClassicPreset.Connection<
 type Schemes = GetSchemes<ClassicPreset.Node, Connection>;
 ```
 
-## Custom connection
+## Custom connection {#custom-connection}
 
 Our first step is to implement a custom connection that is clickable and capable of changing color when selected.
 
@@ -76,7 +76,7 @@ connection.selected = true;
 area.update("connection", connection.id);
 ```
 
-## Synchronization of selected connections
+## Synchronization of selected connections {#synchronization-of-selected-connections}
 
 Let's get the selector ready
 

content/en/docs/04.guides/06.context-menu.md

@@ -137,7 +137,7 @@ const contextMenu = new ContextMenuPlugin<Schemes>({
 
 where `context` is `'root'`, node instance or connection instance
 
-## Open the menu programmatically #{trigger-context-menu}
+## Open the menu programmatically {#trigger-context-menu}
 
 To manually open the context menu, you need to create a `PointerEvent` with the required coordinates and call the `area.emit()` method:
 

content/en/docs/04.guides/08.scopes.md

@@ -88,7 +88,7 @@ The ordering of nested nodes is a bit different as parent nodes shouldn't overla
 
 The same [Arrange nodes](/docs/guides/arrange) guide can be used for automated positioning of nodes in relation to one another, as the plugin used within also supports nested nodes.
 
-## Dynamically changing relationships
+## Dynamically changing relationships {#dynamically-changing-relationships}
 
 After the nodes have been added to the editor, to change the bindings between nodes, in addition to changing `node.parent` you need to explicitly call the update method
 

content/en/docs/20.development/1.index.md

@@ -19,6 +19,12 @@ This tool aims to enhance efficiency during plugin or project development using
 
 Check out the [Rete Kit](/docs/development/rete-kit) article for details.
 
+## AI Assistance {#ai-assistance}
+
+Enhance your Rete.js development workflow with AI-powered coding assistants. Get context-aware help for learning, creating applications, or developing plugins.
+
+Check out the [AI Assistance](/docs/development/ai-assistance) article for details.
+
 ## Style guide {#style-guide}
 
 ESLint is used to ensure code style consistency across all packages. The configuration is provided by [Rete CLI](#rete-cli) and comprises rules that are deemed more suitable by the maintainers. If necessary, you can customize the configuration by adding required rules

content/en/docs/20.development/3.rete-kit.md

@@ -26,6 +26,7 @@ It offers the following features:
 - **Plugin creating**: use this feature to create a basic plugin structure instantly, without the need for setting up a build system, linter, or test runner
 - **Application creation**: choose the framework to build your application, specify the version and desired features and get a ready-to-use application to jumpstart your development process
 - **Batch build**: select copies of repositories containing the source code of the plugins being developed and this tool will start building them in a watch mode, as well as synchronizing their dependencies
+- **AI assistance**: generate context-aware instructions for AI-powered code editors to get intelligent help when learning or developing with Rete.js. See the [AI Assistance](/docs/development/ai-assistance/rete-kit-ai) documentation for details
 
 ## Install {#install-rete-kit}
 
@@ -99,3 +100,20 @@ rete-kit build --folders my-plugin-1,my-plugin-1,my-project
 ```
 
 Please note that to use the hot reload feature to its fullest, you will need to disable the cache for the relevant dependencies. Otherwise, any changes made will not be applied on the fly. To accomplish this in Webpack, you can specify `snapshot.managedPaths`. If the project still doesn't update, it may be necessary to manually clear the cache of compiled modules.
+
+## AI assistance {#ai-assistance-rete-kit}
+
+Generate context-aware instructions for AI-powered code editors (Cursor, GitHub Copilot, Windsurf, etc.) to get intelligent help when learning or developing with Rete.js. Use your IDE's agent or command execution feature and simply ask your AI assistant:
+
+```prompt
+Run npx rete-kit ai for [your intention]
+```
+
+Replace `[your intention]` with your actual goal, such as "learning Rete.js", "creating a new app", or "adding to my existing project". The AI agent will automatically determine the right options based on your intent.
+
+See the [AI Assistance](/docs/development/ai-assistance/rete-kit-ai) documentation for complete details.
+
+## Related Documentation {#related-documentation}
+
+- [AI Assistance](/docs/development/ai-assistance) - Generate context-aware instructions for AI-powered code editors
+- [Rete CLI](/docs/development/rete-cli) - Build tool for plugin development

content/en/docs/20.development/4.ai-assistance/1.index.md

@@ -0,0 +1,58 @@
+---
+description: Empower your AI coding assistant with Rete.js knowledge - Learn how to integrate AI tools for smarter node editor development
+keywords: ai assistance,ai development,llms.txt,rete kit ai,cursor,windsurf,copilot,visual programming ai
+---
+
+# AI Assistance
+
+Enhance your Rete.js development workflow with AI-powered coding assistants. This section covers different approaches to integrate AI tools with Rete.js documentation and development patterns.
+
+## Quick Start {#quick-start}
+
+The fastest way to get AI assistance for Rete.js development is to use your AI-powered IDE's agent or command execution feature (available in Cursor, GitHub Copilot Chat, Windsurf, and similar tools). Simply ask your AI assistant:
+
+```prompt
+Run npx rete-kit ai for [your intention]
+```
+
+Replace `[your intention]` with your actual goal, such as "learning Rete.js", "creating a new app", or "adding to my existing project". The AI agent will automatically determine the right tool and context options based on your description. This generates context-aware instructions for your IDE's AI assistant.
+
+For manual usage or more details, see the [Rete Kit AI](/docs/development/ai-assistance/rete-kit-ai) documentation.
+
+## Available Options {#available-options}
+
+### Rete Kit AI {#rete-kit-ai}
+
+**Best for:** Automated, context-aware IDE integration
+
+The `npx rete-kit ai` command (or `rete-kit ai` if installed globally) generates IDE-specific instruction files that provide contextually appropriate help based on your current situation:
+
+- **Learning Rete.js** → `onboard` context
+- **Creating new apps** → `boot` context  
+- **Working with existing code** → `dev` context
+- **Plugin development** → `plugin` context
+
+Check out the [Rete Kit AI](/docs/development/ai-assistance/rete-kit-ai) guide for complete documentation.
+
+### LLMs.txt Integration {#llms-txt}
+
+**Best for:** Manual integration with any AI tool
+
+LLMs.txt provides Rete.js documentation in a format optimized for AI consumption. You can reference these URLs in your AI conversations or configuration files:
+
+- **[llms.txt](https://retejs.org/llms.txt)** - Essential concepts and quick reference
+- **[llms-full.txt](https://retejs.org/llms-full.txt)** - Complete documentation
+
+See the [LLMs.txt](/docs/development/ai-assistance/llms) guide for integration examples.
+
+## Which Should I Use? {#which-should-i-use}
+
+- **Use Rete Kit AI** if you want automated setup with context-aware instructions for your IDE
+- **Use LLMs.txt** if you prefer manual integration or need to reference documentation in AI conversations
+
+Both approaches can be used together for comprehensive AI assistance.
+
+## Related Documentation {#related-documentation}
+
+- [Rete Kit](/docs/development/rete-kit) - Other Rete Kit features
+- [Getting Started](/docs/getting-started) - Quick start with AI assistance

content/en/docs/021.llms.md → content/en/docs/20.development/4.ai-assistance/2.llms.md

@@ -32,13 +32,31 @@ These endpoints are continuously updated to reflect the latest in node editor de
 
 You can integrate Rete.js documentation with any AI coding assistant by providing the LLMs.txt URLs as context. This gives the AI comprehensive knowledge about node editor development patterns and best practices.
 
-### Basic integration steps
+::alert{type="info"}
+[Rete Kit AI](/docs/development/ai-assistance/rete-kit-ai) automates this integration process by generating IDE-specific instruction files that reference LLMs.txt. If you're using Cursor, GitHub Copilot, Windsurf, or similar tools, consider using `npx rete-kit ai` for context-aware, automated setup.
+::
+
+### Automated Setup with Rete Kit AI {#automated-setup-with-rete-kit-ai}
+
+For automated IDE integration, use Rete Kit AI which generates context-aware instructions that reference LLMs.txt:
+
+```bash
+npx rete-kit ai --tool cursor --context onboard
+```
+
+This creates IDE-specific instruction files that automatically include references to LLMs.txt endpoints. See the [Rete Kit AI](/docs/development/ai-assistance/rete-kit-ai) documentation for details.
+
+### Manual Integration {#manual-integration}
+
+You can manually integrate LLMs.txt URLs with any AI tool by referencing them in your conversations or configuration files. This approach gives you full control over how and when the documentation is used.
+
+#### Basic integration steps {#basic-integration-steps}
 
 1. Copy the LLMs.txt URL: `https://retejs.org/llms.txt` (or `llms-full.txt` for complete docs)
 2. Reference it in your AI tool's context or conversation
 3. Ask questions about Rete.js development, node editor patterns, or get code suggestions
 
-### VS Code GitHub Copilot
+### VS Code GitHub Copilot {#vs-code-github-copilot}
 
 Add the LLMs.txt URL to your workspace for enhanced context-aware suggestions:
 
@@ -55,20 +73,25 @@ Add the LLMs.txt URL to your workspace for enhanced context-aware suggestions:
 
 3. Copilot will now understand Rete.js concepts when providing code completions and suggestions
 
-### Google Gemini Chat
+### Google Gemini Chat {#google-gemini-chat}
 
 Reference the documentation directly in your conversation:
 
-```
+```prompt
 I'm building a node editor with Rete.js. Please review the documentation at https://retejs.org/llms-full.txt and help me create a custom node that processes image data through multiple transformation steps.
 ```
 
-### Model Context Protocol (MCP)
+### Model Context Protocol (MCP) {#model-context-protocol-mcp}
+
+MCP-compatible tools (such as Context7, Claude Desktop, and other MCP-enabled applications) can fetch the Rete.js documentation as context for AI models:
+
+1. Configure your MCP tool to use the Rete.js LLMs.txt endpoints as resources
+2. Once configured, the complete Rete.js documentation is available as context for AI conversations
+3. AI models have persistent access to node editor patterns, plugin architecture, and best practices
 
-MCP-compatible tools like Context7 automatically discover and fetch the Rete.js documentation as context to AI models:
+To set up MCP integration, add the Rete.js LLMs.txt URLs (`https://retejs.org/llms.txt` or `https://retejs.org/llms-full.txt`) as resources in your MCP-compatible tool's configuration. Check your MCP tool's documentation for specific setup instructions.
 
-1. The complete Rete.js documentation is automatically loaded as context for AI conversations
-2. AI models have persistent access to node editor patterns, plugin architecture, and best practices
-3. No manual setup required - the context is always available
+## Related Documentation {#related-documentation}
 
-This approach ensures every AI interaction has comprehensive Rete.js knowledge without any configuration.
+- [Rete Kit AI](/docs/development/ai-assistance/rete-kit-ai) - Automated IDE integration
+- [AI Assistance Overview](/docs/development/ai-assistance) - All AI integration options