diff --git a/content/en/docs/02.getting-started.md b/content/en/docs/02.getting-started.md index f22cde21..d5bd4f26 100644 --- a/content/en/docs/02.getting-started.md +++ b/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. diff --git a/content/en/docs/04.guides/02.renderers/1.react.md b/content/en/docs/04.guides/02.renderers/1.react.md index e9ba365b..dc76e815 100644 --- a/content/en/docs/04.guides/02.renderers/1.react.md +++ b/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) diff --git a/content/en/docs/04.guides/02.renderers/2.vue.md b/content/en/docs/04.guides/02.renderers/2.vue.md index 05505365..63adab85 100644 --- a/content/en/docs/04.guides/02.renderers/2.vue.md +++ b/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({ 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({ 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) diff --git a/content/en/docs/04.guides/02.renderers/3.angular.md b/content/en/docs/04.guides/02.renderers/3.angular.md index 790a79e7..e80ab7e5 100644 --- a/content/en/docs/04.guides/02.renderers/3.angular.md +++ b/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) diff --git a/content/en/docs/04.guides/02.renderers/4.svelte.md b/content/en/docs/04.guides/02.renderers/4.svelte.md index 24ba21e0..71285b6f 100644 --- a/content/en/docs/04.guides/02.renderers/4.svelte.md +++ b/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) diff --git a/content/en/docs/04.guides/02.renderers/5.lit.md b/content/en/docs/04.guides/02.renderers/5.lit.md index 87e8767f..128bd46c 100644 --- a/content/en/docs/04.guides/02.renderers/5.lit.md +++ b/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) diff --git a/content/en/docs/04.guides/04.data-structures.md b/content/en/docs/04.guides/04.data-structures.md index d7db8ffd..7da93451 100644 --- a/content/en/docs/04.guides/04.data-structures.md +++ b/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: diff --git a/content/en/docs/04.guides/05.arrange.md b/content/en/docs/04.guides/05.arrange.md index 441749ab..37e4cdaa 100644 --- a/content/en/docs/04.guides/05.arrange.md +++ b/content/en/docs/04.guides/05.arrange.md @@ -89,7 +89,7 @@ const applier = new ArrangeAppliers.TransitionApplier({ 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 diff --git a/content/en/docs/04.guides/05.selectable/1.connections.md b/content/en/docs/04.guides/05.selectable/1.connections.md index 991f19b0..1f52c035 100644 --- a/content/en/docs/04.guides/05.selectable/1.connections.md +++ b/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; ``` -## 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 diff --git a/content/en/docs/04.guides/06.context-menu.md b/content/en/docs/04.guides/06.context-menu.md index f7a6adb7..6b014386 100644 --- a/content/en/docs/04.guides/06.context-menu.md +++ b/content/en/docs/04.guides/06.context-menu.md @@ -137,7 +137,7 @@ const contextMenu = new ContextMenuPlugin({ 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: diff --git a/content/en/docs/04.guides/08.scopes.md b/content/en/docs/04.guides/08.scopes.md index 7ad8de3c..78081358 100644 --- a/content/en/docs/04.guides/08.scopes.md +++ b/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 diff --git a/content/en/docs/20.development/1.index.md b/content/en/docs/20.development/1.index.md index 16f2b62d..03e7d4b8 100644 --- a/content/en/docs/20.development/1.index.md +++ b/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 diff --git a/content/en/docs/20.development/3.rete-kit.md b/content/en/docs/20.development/3.rete-kit.md index 064ef037..f0cb61bc 100644 --- a/content/en/docs/20.development/3.rete-kit.md +++ b/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 diff --git a/content/en/docs/20.development/4.ai-assistance/1.index.md b/content/en/docs/20.development/4.ai-assistance/1.index.md new file mode 100644 index 00000000..c15c224c --- /dev/null +++ b/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 diff --git a/content/en/docs/021.llms.md b/content/en/docs/20.development/4.ai-assistance/2.llms.md similarity index 58% rename from content/en/docs/021.llms.md rename to content/en/docs/20.development/4.ai-assistance/2.llms.md index b6121a0e..8ef5584f 100644 --- a/content/en/docs/021.llms.md +++ b/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 diff --git a/content/en/docs/20.development/4.ai-assistance/3.rete-kit-ai.md b/content/en/docs/20.development/4.ai-assistance/3.rete-kit-ai.md new file mode 100644 index 00000000..966a88c5 --- /dev/null +++ b/content/en/docs/20.development/4.ai-assistance/3.rete-kit-ai.md @@ -0,0 +1,116 @@ +--- +description: Get intelligent, context-aware help in your AI-powered IDE with Rete Kit's AI command. Generate IDE-specific instructions for learning and developing with Rete.js +keywords: rete kit ai,ai assistance,cursor,windsurf,copilot,ide instructions,context-aware ai +--- + +# Rete Kit AI + +::alert{type="warning"} +The AI command feature is currently **experimental**. The API and behavior may change in future versions. We welcome feedback and suggestions for improvement. Please share your experience on [GitHub Issues](https://github.com/retejs/rete-kit/issues). +:: + +Rete Kit includes an AI command that generates context-aware instructions for AI-powered code editors (Cursor, GitHub Copilot, Windsurf, etc.). These instructions help AI assistants understand your specific situation and provide more accurate, relevant help when learning or developing with Rete.js. + +## Quick Start {#quick-start} + +The fastest way to get started is to use your IDE's agent or command execution feature: + +```prompt +Run npx rete-kit ai for [your intention] +``` + +Replace `[your intention]` with your actual goal (e.g., "learning Rete.js", "creating a new app", "adding to my existing project"). The AI agent will automatically determine the right tool and context options. + +Or specify options manually: + +```bash +npx rete-kit ai --tool --context [options] +``` + +**Options:** +- `--tool, -t ` - IDE tool (cursor, github, windsurf, etc.) +- `--context, -c ` - Context (onboard, boot, dev, plugin) +- `--force, -f` - Overwrite existing instruction files without confirmation +- `--interactive, -i` - Interactive mode to select options + +Run `npx rete-kit ai --help` for detailed usage information. + +## Contexts {#contexts} + +Choose the context that matches your situation: + +| Context | When to Use | Description | +|---------|-------------|-------------| +| **onboard** | Learning Rete.js fundamentals | Provides conceptual explanations, core building blocks (nodes, connections, sockets), processing models, and educational guidance. Use when asking "What is Rete.js?" or "How does visual programming work?" | +| **boot** | Creating a new Rete.js application | Provides step-by-step app creation guidance, framework selection help, feature recommendations, and project structure explanation. Helps with running `rete-kit app` commands and understanding project setup. | +| **dev** | Adding Rete.js to existing app or working with existing Rete.js app | Provides integration strategies, reference-driven patterns from Rete Kit apps, and problem-solving guidance. Helps with adding Rete.js to existing codebases, fixing issues, and adapting patterns to your architecture. | +| **plugin** | Developing, debugging, or customizing Rete.js plugins | Provides plugin architecture, signal processing patterns, debugging techniques, and advanced best practices. Helps with plugin structure, signal systems, testing, and cross-framework development. | + +## Supported Tools {#supported-tools} + +| Tool | Status | Notes | +|------|--------|-------| +| Cursor | ✅ Supported | Generates `.mdc` files in `.cursor/rules/` directory | +| GitHub Copilot | ✅ Supported | Creates `.copilot-instructions.md` file in `.github/` directory | +| Windsurf | ⚠️ Included | Places `.md` files in `.windsurf/rules/` directory | +| Continue | ⚠️ Included | Places `.md` files in `.continue/rules/` directory | +| Amazon Q | ⚠️ Included | Places `.md` files in `.amazonq/rules/` directory | +| Antigravity | ⚠️ Included | Places `.md` files in `.agent/rules/` directory | +| Codex | ⚠️ Included | Creates `AGENTS.md` file in project root | +| Claude | ⚠️ Included | Creates `CLAUDE.md` file in project root | + +**Status Legend:** +- ✅ **Supported** - Tested and verified to work correctly +- ⚠️ **Included** - Supported but not fully tested + +## Interactive Mode {#interactive-mode} + +Not sure which context to use? Run interactive mode: + +```bash +npx rete-kit ai --interactive +``` + +## How It Works {#how-it-works} + +Rete Kit reads context-specific instruction templates from its package and transforms them for your IDE: + +1. **Reads templates** from `assets/ai/{context}/` (onboard, boot, dev, or plugin) +2. **Transforms content** for your IDE's format (e.g., `.mdc` files for Cursor) +3. **Writes instructions** to IDE-specific directories in your project +4. **Activates automatically** - Your IDE's AI assistant uses these instructions immediately + +The generated instructions contain Rete.js-specific guidance tailored to your selected context. + +## Switching Contexts {#switching-contexts} + +Switch contexts as your project evolves by running the command again with a different context. Use `--force` to overwrite existing instructions: + +```bash +npx rete-kit ai --tool cursor --context dev --force +``` + +**Typical progression:** `onboard` → `boot` → `dev` → `plugin` + +## Troubleshooting {#troubleshooting} + +**Instructions not working?** +- Verify files were created in the correct directory (e.g., `.cursor/rules/` for Cursor) +- Try starting a new chat/agent session - instructions may need a new conversation to be loaded +- If a new session doesn't work, restart your IDE to ensure instructions are loaded +- Test by asking your IDE's AI assistant a Rete.js-specific question +- Regenerate with `--force` flag if needed +- Check IDE settings to ensure AI features are enabled + +**Wrong context selected?** Regenerate with the correct context: +```bash +npx rete-kit ai --tool cursor --context --force +``` + +**Interactive mode not working?** Use explicit `--tool` and `--context` flags instead (interactive mode requires a TTY). + +## Related Documentation {#related-documentation} + +- [AI Assistance Overview](/docs/development/ai-assistance) - All AI integration options +- [LLMs.txt Integration](/docs/development/ai-assistance/llms) - Manual AI integration +- [Rete Kit Overview](/docs/development/rete-kit) - Other Rete Kit features diff --git a/content/en/docs/24.api/00.overview.md b/content/en/docs/24.api/00.overview.md index 63c3a0fc..ca6a77a5 100644 --- a/content/en/docs/24.api/00.overview.md +++ b/content/en/docs/24.api/00.overview.md @@ -10,27 +10,27 @@ navigation: Explore the packages listed below to access their API documentation -## Core +## Core {#core} :api-overview{filter="rete"} -## Processing +## Processing {#processing} :api-overview{filter="rete-engine,rete-structures"} -## Area +## Area {#area} :api-overview{filter="rete-area-plugin,rete-area-3d-plugin"} -## Interaction +## Interaction {#interaction} :api-overview{filter="rete-connection-plugin,rete-context-menu-plugin,rete-readonly-plugin,rete-scopes-plugin,rete-dock-plugin,rete-history-plugin"} -## Integration +## Integration {#integration} :api-overview{filter="rete-react-plugin,rete-vue-plugin,rete-angular-plugin,rete-svelte-plugin,@retejs/lit-plugin"} -## Visualization +## Visualization {#visualization} :api-overview{filter="rete-auto-arrange-plugin,rete-minimap-plugin,rete-render-utils,rete-comment-plugin,rete-connection-path-plugin,rete-connection-reroute-plugin"} diff --git a/content/en/docs/26.migration.md b/content/en/docs/26.migration.md index b20d481e..5c7dc632 100644 --- a/content/en/docs/26.migration.md +++ b/content/en/docs/26.migration.md @@ -197,7 +197,7 @@ editor.on('nodecreate', node => { \** - moved to different package\ \*** - removed -### `rete` package events +### `rete` package events {#rete-package-events-v1} - nodecreate * - nodecreated * - noderemove * @@ -234,7 +234,7 @@ editor.on('nodecreate', node => { - process *** - clear ** -### `rete-connection-plugin` package events +### `rete-connection-plugin` package events {#rete-connection-plugin-package-events-v1} - connectionpath ** - connectiondrop * @@ -252,7 +252,7 @@ editor.addPipe(context => { }) ``` -### `rete` package events +### `rete` package events {#rete-package-events-v2} - nodecreate - nodecreated @@ -266,7 +266,7 @@ editor.addPipe(context => { - clearcancelled - cleared -### `rete-area-plugin` package events +### `rete-area-plugin` package events {#rete-area-plugin-package-events} - nodepicked - nodedragged @@ -287,20 +287,20 @@ editor.addPipe(context => { - zoomed - resized -### `rete-connection-plugin` package events +### `rete-connection-plugin` package events {#rete-connection-plugin-package-events-v2} - connectionpick - connectiondrop -### `rete-angular-plugin` package events +### `rete-angular-plugin` package events {#rete-angular-plugin-package-events} - connectionpath -### `rete-vue-plugin` package events +### `rete-vue-plugin` package events {#rete-vue-plugin-package-events} - connectionpath -### `rete-react-plugin` package events +### `rete-react-plugin` package events {#rete-react-plugin-package-events} - connectionpath diff --git a/content/uk/docs/01.index.md b/content/uk/docs/01.index.md index 90e142b0..1e75c21d 100644 --- a/content/uk/docs/01.index.md +++ b/content/uk/docs/01.index.md @@ -23,7 +23,7 @@ keywords: вступ,екосистема :youtube-video{name="intro"} -### Екосистема {#ecosystem} +## Екосистема {#ecosystem} Фреймворк складається з різних пакетів, включаючи основний пакет `rete` та різні плагіни. diff --git a/content/uk/docs/02.getting-started.md b/content/uk/docs/02.getting-started.md index 746ed661..2014cefa 100644 --- a/content/uk/docs/02.getting-started.md +++ b/content/uk/docs/02.getting-started.md @@ -16,7 +16,7 @@ keywords: початок роботи,інсталяція,налаштуван :youtube-video{name="getting-started"} -## Передумови +## Передумови {#prerequisites} Перш ніж занурюватися в Rete.js, важливо мати розуміння основ JavaScript або TypeScript. Фреймворк розроблено в першу чергу з урахуванням TypeScript, із прикладами та гайдами, що демонструють код цією мовою. Однак для новачків у TypeScript або тих, хто хоче швидко створювати прототипи, все ще можна використовувати Rete.js безпосередньо в коді JavaScript. @@ -27,6 +27,18 @@ keywords: початок роботи,інсталяція,налаштуван - [Codesandbox](https://codesandbox.io/s/rete-js-v2-yrzxe5) - [Codepen](https://codepen.io/Ni55aN/pen/rNZKejd) +## ШІ-допомога {#ai-assistance} + +Отримайте інтелектуальну, контекстно-орієнтовану допомогу у вашому редакторі коду з підтримкою ШІ. Використовуйте агента або функцію виконання команд вашого IDE (доступно в Cursor, GitHub Copilot Chat, Windsurf та подібних інструментах) і просто запитайте свого ШІ-асистента: + +```prompt +Запусти npx rete-kit ai для [ваша мета] +``` + +Замініть `[ваша мета]` на вашу фактичну мету, наприклад "вивчення Rete.js", "створення нового додатку" або "додавання до мого існуючого проекту". ШІ-агент автоматично визначить правильні опції на основі вашого наміру. Це генерує специфічні для IDE інструкції, які допомагають ШІ-асистентам розуміти патерни Rete.js та надавати релевантні поради. + +Для отримання детальної інформації див. документацію [ШІ-асистент](/uk/docs/development/ai-assistance). + ## Створення додатку використовуючи девкіт {#devkit} Використовуйте [Rete Kit](/uk/docs/development/rete-kit), щоб швидко встановити додаток на Rete.js. Він дозволяє вибрати стек (**React.js**, **Vue.js**, **Angular**, **Svelte** або **Lit**) і набір функцій. diff --git a/content/uk/docs/021.llms.md b/content/uk/docs/021.llms.md deleted file mode 100644 index b380f7c4..00000000 --- a/content/uk/docs/021.llms.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -description: Пришвидште ваш робочий процес візуального програмування за допомогою ШІ - Дізнайтеся, як інтегрувати документацію Rete.js з асистентами кодування ШІ для розумнішої розробки редакторів вузлів -keywords: llms.txt,візуальне програмування ші,редактор вузлів ші,rete.js ші,cursor,windsurf,copilot,claude,gemini,chatgpt ---- - -# LLMs.txt - -Покращте свій досвід візуального програмування за допомогою інструментів ШІ, які розуміють шаблони редакторів вузлів Rete.js, концепції потоків даних та архітектуру плагінів. - -## Що таке LLMs.txt? {#what-is-llms} - -Створення редакторів вузлів та інтерфейсів візуального програмування включає унікальні шаблони та концепції, які відрізняються від традиційної розробки додатків. Наша інтеграція з ШІ через [LLMs.txt](https://llmstxt.org/) допомагає асистентам кодування зрозуміти: - -- **Архітектуру на основі вузлів** та шаблони з'єднань -- Парадигми обробки **потоків даних проти потоків управління** -- **Композицію плагінів** для розширюваних редакторів -- **Багатофреймворкове рендерінг** (React, Vue, Angular, Svelte) -- Техніки **обробки та маніпулювання графами** - -Це дозволяє інструментам ШІ надавати контекстуально точні пропозиції для ваших проектів візуального програмування. - -## Ресурси {#resources} - -Наша документація оптимізована для споживання ШІ через спеціалізовані точки доступу, які розуміють робочі процеси візуального програмування: - -- **[llms.txt](https://retejs.org/llms.txt)** - Основні концепції редакторів вузлів, базові API та швидкі довідкові шаблони -- **[llms-full.txt](https://retejs.org/llms-full.txt)** - Повна база знань візуального програмування, включаючи розширені шаблони, архітектуру плагінів та обробні движки - -Ці точки доступу постійно оновлюються, щоб відображати найновіші практики розробки редакторів вузлів та можливості фреймворків. - -## Як використовувати {#how-to-use} - -Ви можете інтегрувати документацію Rete.js з будь-яким асистентом кодування ШІ, надавши URL-адреси LLMs.txt як контекст. Це дає ШІ всебічні знання про шаблони розробки редакторів вузлів та кращі практики. - -### Основні кроки інтеграції - -1. Скопіюйте URL LLMs.txt: `https://retejs.org/llms.txt` (або `llms-full.txt` для повної документації) -2. Посилайтеся на нього в контексті вашого інструменту ШІ або розмові -3. Задавайте питання про розробку Rete.js, шаблони редакторів вузлів або отримуйте пропозиції коду - -### VS Code GitHub Copilot - -Додайте URL LLMs.txt до вашого робочого простору для покращених контекстно-залежних пропозицій: - -1. Створіть файл `.copilot-instructions.md` в корені вашого проекту -2. Додайте посилання: - ```markdown - # Інструкції Copilot - - Для розробки Rete.js звертайтеся до документації за адресою: - https://retejs.org/llms-full.txt - - Зосередьтеся на шаблонах редакторів вузлів, програмуванні потоків даних та архітектурі плагінів. - ``` - -3. Тепер Copilot розумітиме концепції Rete.js при наданні автодоповнень коду та пропозицій - -### Google Gemini Chat - -Посилайтеся на документацію безпосередньо у вашій розмові: - -``` -Я створюю редактор вузлів з Rete.js. Будь ласка, перегляньте документацію за адресою https://retejs.org/llms-full.txt і допоможіть мені створити користувацький вузол, який обробляє дані зображень через кілька кроків трансформації. -``` - -### Model Context Protocol (MCP) - -Інструменти, сумісні з MCP, такі як Context7, автоматично виявляють та завантажують документацію Rete.js як контекст для моделей ШІ: - -1. Повна документація Rete.js автоматично завантажується як контекст для розмов з ШІ -2. Моделі ШІ мають постійний доступ до шаблонів редакторів вузлів, архітектури плагінів та кращих практик -3. Не потрібно ручного налаштування - контекст завжди доступний - -Цей підхід забезпечує, що кожна взаємодія з ШІ має всебічні знання Rete.js без будь-якої конфігурації. \ No newline at end of file diff --git a/content/uk/docs/04.guides/02.renderers/1.react.md b/content/uk/docs/04.guides/02.renderers/1.react.md index 457050e8..bd2baf9c 100644 --- a/content/uk/docs/04.guides/02.renderers/1.react.md +++ b/content/uk/docs/04.guides/02.renderers/1.react.md @@ -282,7 +282,7 @@ render.addPreset(Presets.contextMenu.setup({ })) ``` -## Інші пресети {#other presets} +## Інші пресети {#other-presets} - [контекстне меню](/uk/docs/guides/context-menu) - [мінікарта](/uk/docs/guides/minimap) diff --git a/content/uk/docs/04.guides/02.renderers/2.vue.md b/content/uk/docs/04.guides/02.renderers/2.vue.md index cba13486..db8b1c5a 100644 --- a/content/uk/docs/04.guides/02.renderers/2.vue.md +++ b/content/uk/docs/04.guides/02.renderers/2.vue.md @@ -207,7 +207,7 @@ render.addPreset(Presets.classic.setup({ Оскільки `rete-vue-plugin` створює незалежний екземпляр Vue.js для вузлів, сокетів, контролів тощо, він не успадковує плагіни з основного екземпляра Vue вашого проекту. Щоб заповнити цей пробіл, плагін пропонує рішення: впровадження власного екземпляра додатку Vue. Ця можливість забезпечує доступність будь-яких плагінів Vue або глобальних компонентів, які ви бажаєте використовувати в компонентах Vue, специфічних для Rete, тим самим забезпечуючи безперешкодне спільне використання між вашим додатком Vue.js та редактором Rete.js. -### Vue.js 3 +### Vue.js 3 {#vue-js-3} Наступний приклад демонструє, як налаштувати власний екземпляр Vue.js 3: @@ -228,7 +228,7 @@ const render = new VuePlugin({ де `yourPlugin` це екземпляр будь-якого плагіна (наприклад, [Vuetify](https://vuetifyjs.com/en/getting-started) або [Vue I18N](https://vue-i18n.intlify.dev/)) -### Vue.js 2 +### Vue.js 2 {#vue-js-2} Оскільки ініціалізація для Vue.js 2 трохи відрізняється, давайте розглянемо наступний приклад: @@ -247,7 +247,7 @@ const render = new VuePlugin({ де `yourPlugin` це екземпляр будь-якого плагіна (наприклад, [Vuetify](https://vuetifyjs.com/en/getting-started) або [Vue I18N](https://kazupon.github.io/vue-i18n/)) -## Інші пресети {#other presets} +## Інші пресети {#other-presets} - [контекстне меню](/uk/docs/guides/context-menu) - [мінікарта](/uk/docs/guides/minimap) diff --git a/content/uk/docs/04.guides/02.renderers/3.angular.md b/content/uk/docs/04.guides/02.renderers/3.angular.md index 11b4ae08..07222345 100644 --- a/content/uk/docs/04.guides/02.renderers/3.angular.md +++ b/content/uk/docs/04.guides/02.renderers/3.angular.md @@ -218,7 +218,7 @@ render.addPreset(Presets.classic.setup({ } ``` -## Інші пресети {#other presets} +## Інші пресети {#other-presets} - [контекстне меню](/uk/docs/guides/context-menu) - [мінікарта](/uk/docs/guides/minimap) diff --git a/content/uk/docs/04.guides/02.renderers/4.svelte.md b/content/uk/docs/04.guides/02.renderers/4.svelte.md index 956e4f96..1e533c61 100644 --- a/content/uk/docs/04.guides/02.renderers/4.svelte.md +++ b/content/uk/docs/04.guides/02.renderers/4.svelte.md @@ -201,7 +201,7 @@ render.addPreset(Presets.classic.setup({ } ``` -## Інші пресети {#other presets} +## Інші пресети {#other-presets} - [контекстне меню](/uk/docs/guides/context-menu) - [мінікарта](/uk/docs/guides/minimap) diff --git a/content/uk/docs/04.guides/02.renderers/5.lit.md b/content/uk/docs/04.guides/02.renderers/5.lit.md index dc96cb30..fdf508cc 100644 --- a/content/uk/docs/04.guides/02.renderers/5.lit.md +++ b/content/uk/docs/04.guides/02.renderers/5.lit.md @@ -200,7 +200,7 @@ render.addPreset(Presets.classic.setup({ })) ``` -## Інші пресети {#other presets} +## Інші пресети {#other-presets} - [контекстне меню](/uk/docs/guides/context-menu) - [мінікарта](/uk/docs/guides/minimap) diff --git a/content/uk/docs/04.guides/04.data-structures.md b/content/uk/docs/04.guides/04.data-structures.md index b675d0bc..81cc91a8 100644 --- a/content/uk/docs/04.guides/04.data-structures.md +++ b/content/uk/docs/04.guides/04.data-structures.md @@ -78,7 +78,7 @@ Array.from(new Set(incomers)) Array.from(new Set(outgoers)) ``` -## Просунуті методи +## Просунуті методи {#advanced-methods} Зазначені вище підходи досить гнучкі, але вимагають самостійної імплементації більш складних методів. На щастя, [пакет `rete-structures`](https://github.com/retejs/structures) пропонує такі методи, розділені на 4 категорії: diff --git a/content/uk/docs/04.guides/05.arrange.md b/content/uk/docs/04.guides/05.arrange.md index 5665ffc5..faf14404 100644 --- a/content/uk/docs/04.guides/05.arrange.md +++ b/content/uk/docs/04.guides/05.arrange.md @@ -88,7 +88,7 @@ const applier = new ArrangeAppliers.TransitionApplier({ await arrange.layout({ applier }) ``` -## Опції упорядкування +## Опції упорядкування {#arrange-options} Крім того, ви можете використовувати [глобальні параметри для elk.js](https://eclipse.dev/elk/reference/options.html). Наприклад, це дає вам змогу змінювати відстань між вузлами diff --git a/content/uk/docs/04.guides/05.selectable/1.connections.md b/content/uk/docs/04.guides/05.selectable/1.connections.md index bd6a78a6..4fc5bb2a 100644 --- a/content/uk/docs/04.guides/05.selectable/1.connections.md +++ b/content/uk/docs/04.guides/05.selectable/1.connections.md @@ -14,7 +14,7 @@ keywords: вибрати підключення,вибір,підключенн :ref-guide{title="Вибір вузлів" link="/uk/docs/guides/selectable"} :: -## Підготовка типів +## Підготовка типів {#getting-types-ready} Додавання до типу з’єднання необов’язкового поля `selected` дозволить нам вказати програмно додані з’єднання як вибрані @@ -29,7 +29,7 @@ class Connection extends ClassicPreset.Connection< type Schemes = GetSchemes; ``` -## Кастомне з'єднання +## Кастомне з'єднання {#custom-connection} Наш перший крок полягає в тому, щоб реалізувати спеціальне з’єднання, яке буде клікабельним та змінювати колір при виборі. @@ -77,7 +77,7 @@ connection.selected = true; area.update("connection", connection.id); ``` -## Синхронізація вибраних з'єднань +## Синхронізація вибраних з'єднань {#synchronization-of-selected-connections} Давайте підготуємо селектор diff --git a/content/uk/docs/04.guides/06.context-menu.md b/content/uk/docs/04.guides/06.context-menu.md index f9272a5b..8d04d722 100644 --- a/content/uk/docs/04.guides/06.context-menu.md +++ b/content/uk/docs/04.guides/06.context-menu.md @@ -137,7 +137,7 @@ const contextMenu = new ContextMenuPlugin({ де `context` - це `'root'`, екземпляр вузла або екземпляр з'єднання -## Відкрити меню програмно #{trigger-context-menu} +## Відкрити меню програмно {#trigger-context-menu} Щоб вручну відкрити контекстне меню, потрібно створити подію типу `PointerEvent` з необхідними координатами та викликати метод `area.emit()`: diff --git a/content/uk/docs/04.guides/08.scopes.md b/content/uk/docs/04.guides/08.scopes.md index 436d149c..8d8ec50d 100644 --- a/content/uk/docs/04.guides/08.scopes.md +++ b/content/uk/docs/04.guides/08.scopes.md @@ -88,7 +88,7 @@ AreaExtensions.simpleNodesOrder(area); Той самий гайд [Упорядкування вузлів](/uk/docs/guides/arrange) можна використовувати для автоматичного позиціонування вузлів відносно один одного, оскільки плагін, який там використовується, також підтримує вкладені вузли. -## Динамічно змінені зв'язки +## Динамічно змінені зв'язки {#dynamically-changing-relationships} Після того, як вузли були додані в редактор, щоб змінити з'вязки між візлами, окрім зміни `node.parent` вам потрібно явно викликати оновлення батьківського вузла diff --git a/content/uk/docs/20.development/1.index.md b/content/uk/docs/20.development/1.index.md index 65314fe1..557e08a0 100644 --- a/content/uk/docs/20.development/1.index.md +++ b/content/uk/docs/20.development/1.index.md @@ -19,6 +19,12 @@ Rete CLI — це інструмент розробки, який включає Перегляньте статтю [Rete Kit](/uk/docs/development/rete-kit), щоб дізнатися більше. +## ШІ-асистент {#ai-assistance} + +Покращте робочий процес розробки Rete.js за допомогою ШІ-асистентів для кодування. Отримайте контекстно-орієнтовану допомогу для вивчення, створення додатків або розробки плагінів. + +Перегляньте статтю [ШІ-асистент](/uk/docs/development/ai-assistance), щоб дізнатися більше. + ## Стайл гайд {#style-guide} ESLint використовується для забезпечення узгодженості стилю коду в усіх пакетах. Конфігурацію надає [Rete CLI](#rete-cli) і містить правила, які вважаються мейнтейнерами більш підходящими. Якщо необхідно, ви можете налаштувати конфігурацію, додавши потрібні правила diff --git a/content/uk/docs/20.development/2.rete-cli.md b/content/uk/docs/20.development/2.rete-cli.md index 388ea574..bd38a723 100644 --- a/content/uk/docs/20.development/2.rete-cli.md +++ b/content/uk/docs/20.development/2.rete-cli.md @@ -19,13 +19,13 @@ Rete CLI — це інструмент для збірки з вбудовано Функція збірки базується на Rollup і постачається з попередньо налаштованими стилями Babel для підтримки TypeScript. -### Встановлення {#install-rete-cli} +## Встановлення {#install-rete-cli} ```bash npm i -g rete-cli ``` -### Збірка проекту {#build-rete-cli} +## Збірка проекту {#build-rete-cli} Першим кроком є створення файлу конфігурації під назвою `rete.config.ts` @@ -48,7 +48,7 @@ rete build --config rete.config.ts Параметр `--watch` можна використовувати для запуску автоматичного створення проекту після збереження, тоді як параметр `--outputs` дозволяє вказати кілька вихідних шляхів, розділених комами, для місця призначення збірки. -### Створіть розширену конфігурацію {#create-config-rete-cli} +## Створіть розширену конфігурацію {#create-config-rete-cli} Давайте розглянемо кілька підтримуваних параметрів конфігурації: @@ -90,7 +90,7 @@ export default [ // конфігурація з кількома в ] ``` -### Лінтінг {#lint-rete-cli} +## Лінтінг {#lint-rete-cli} За замовчуванням виконання команди `rete build` включає етап лінтінгу перед генеруванням бандлів. Однак ви також можете виконати лінтінг самостійно, виконавши окрему команду. diff --git a/content/uk/docs/20.development/3.rete-kit.md b/content/uk/docs/20.development/3.rete-kit.md index 58130b3e..099f81a1 100644 --- a/content/uk/docs/20.development/3.rete-kit.md +++ b/content/uk/docs/20.development/3.rete-kit.md @@ -26,14 +26,15 @@ keywords: розробка,kit,setup,bootstrap,react.js,vue.js,angular,svelte,li - **Створення плагіна**: скористайтеся цією функцією, щоб миттєво створити базову структуру плагіна, без необхідності налаштовування системи збірки, лінтера або тест-раннера - **Створення додатку**: виберіть фреймворк для створення додатку, вкажіть версію та бажані функції та отримайте готовий до використання додаток, щоб розпочати процес розробки - **Масова збірка**: виберіть копії репозиторіїв, що містять вихідний код плагінів, що розробляються, і цей інструмент почне їх збірку в режимі спостереження, а також синхронізує їхні залежності +- **ШІ-допомога**: генеруйте контекстно-орієнтовані інструкції для ШІ-редакторів коду, щоб отримати інтелектуальну допомогу під час вивчення або розробки з Rete.js. Див. документацію [ШІ-асистент](/uk/docs/development/ai-assistance/rete-kit-ai) для отримання детальної інформації -### Встановлення {#install-rete-kit} +## Встановлення {#install-rete-kit} ```bash npm i -g rete-kit ``` -### Створення додатоку {#create-app-rete-kit} +## Створення додатку {#create-app-rete-kit} Режим опитувальника @@ -63,7 +64,7 @@ rete-kit app --name --stack --stack-version --features Наприклад, шаблон налаштування Angular доступний за адресою http://localhost:4200/?template=customization. -### Створення плагіна {#create-plugin-rete-kit} +## Створення плагіна {#create-plugin-rete-kit} Ви можете легко створити плагін у своїй кодовій базі, наслідуючи приклад інших плагінів і розширивши `Scope`, без необхідності створювати його як окремий пакет. @@ -77,7 +78,7 @@ rete-kit plugin --name Згенерований плагін містить усі необхідні конфігурації, що дозволяє негайно почати працювати з вихідним кодом. -### Збірка залежностей для розробки {#build-deps-rete-kit} +## Збірка залежностей для розробки {#build-deps-rete-kit} Розробка модулів, розділених на різні пакети, є складним процесом. На відміну від єдиної кодової бази, де система збірки може виявляти зміни в директорії та застосовувати hot reload, розробникам потрібно вручну налаштувати збірку кожної залежності, над якою вони працюють, і вставити зміни в проект. @@ -98,3 +99,21 @@ rete-kit build --folders my-plugin-1,my-plugin-1,my-project ``` Зверніть увагу, що для повного використання функції hot reload вам потрібно вимкнути кеш для відповідних залежностей. Інакше будь-які внесені зміни не будуть застосовані на льоту. Щоб досягти цього в Webpack, ви можете вказати `snapshot.managedPaths`. Якщо проект усе ще не оновлюється, можливо, потрібно вручну очистити кеш скомпільованих модулів. + +## ШІ-допомога {#ai-assistance-rete-kit} + +Генеруйте контекстно-орієнтовані інструкції для ШІ-редакторів коду (Cursor, GitHub Copilot, Windsurf тощо), щоб отримати інтелектуальну допомогу під час вивчення або розробки з Rete.js. Використовуйте агента або функцію виконання команд вашого IDE і просто запитайте свого ШІ-асистента: + +```prompt +Запусти npx rete-kit ai для [ваша мета] +``` + +Замініть `[ваша мета]` на вашу фактичну мету, наприклад "вивчення Rete.js", "створення нового додатку" або "додавання до мого існуючого проекту". ШІ-агент автоматично визначить правильні опції на основі вашого наміру. + +Див. документацію [ШІ-асистент](/uk/docs/development/ai-assistance/rete-kit-ai) для отримання повної інформації. + +## Пов'язана документація {#related-documentation} + +- [ШІ-асистент](/uk/docs/development/ai-assistance) - Генеруйте контекстно-орієнтовані інструкції для ШІ-редакторів коду +- [Rete CLI](/uk/docs/development/rete-cli) - Інструмент збірки для розробки плагінів + diff --git a/content/uk/docs/20.development/4.ai-assistance/1.index.md b/content/uk/docs/20.development/4.ai-assistance/1.index.md new file mode 100644 index 00000000..34cedbdd --- /dev/null +++ b/content/uk/docs/20.development/4.ai-assistance/1.index.md @@ -0,0 +1,58 @@ +--- +description: Покращте свій робочий процес розробки Rete.js за допомогою ШІ-асистентів для кодування - Дізнайтеся, як інтегрувати ШІ-інструменти для розумнішої розробки редакторів вузлів +keywords: ai assistance, ai допомога, ші допомога, ai розробка, ші розробка, llms.txt, rete kit ai, cursor, windsurf, copilot, візуальне програмування ші +--- + +# ШІ-асистент + +Покращте свій робочий процес розробки Rete.js за допомогою ШІ-асистентів для кодування. Цей розділ охоплює різні підходи до інтеграції ШІ-інструментів з документацією Rete.js та патернами розробки. + +## Швидкий старт {#quick-start} + +Найшвидший спосіб отримати ШІ-допомогу для розробки Rete.js — використати агента або функцію виконання команд вашої IDE з підтримкою ШІ (доступно в Cursor, GitHub Copilot Chat, Windsurf та подібних інструментах). Просто запитайте свого ШІ-асистента: + +```prompt +Запусти npx rete-kit ai для [ваша мета] +``` + +Замініть `[ваша мета]` на вашу фактичну мету, наприклад "вивчення Rete.js", "створення нового додатку" або "додавання до мого існуючого проекту". ШІ-агент автоматично визначить правильний інструмент та опції контексту на основі вашого опису. Це генерує контекстно-орієнтовані інструкції для ШІ-асистента вашого IDE. + +Для ручного використання або більш детальної інформації див. документацію [Rete Kit ШІ](/uk/docs/development/ai-assistance/rete-kit-ai). + +## Доступні опції {#available-options} + +### Rete Kit ШІ {#rete-kit-ai} + +**Найкраще для:** Автоматична, контекстно-орієнтована інтеграція з IDE + +Команда `npx rete-kit ai` (або `rete-kit ai` якщо встановлено глобально) генерує файли інструкцій, специфічні для IDE, які надають контекстно відповідну допомогу на основі вашої поточної ситуації: + +- **Вивчення Rete.js** → контекст `onboard` +- **Створення нових додатків** → контекст `boot` +- **Робота з існуючим кодом** → контекст `dev` +- **Розробка плагінів** → контекст `plugin` + +Перегляньте посібник [Rete Kit ШІ](/uk/docs/development/ai-assistance/rete-kit-ai) для повної документації. + +### Інтеграція LLMs.txt {#llms-txt} + +**Найкраще для:** Ручна інтеграція з будь-яким ШІ-інструментом + +LLMs.txt надає документацію Rete.js у форматі, оптимізованому для споживання ШІ. Ви можете посилатися на ці URL у ваших ШІ-розмовах або файлах конфігурації: + +- **[llms.txt](https://retejs.org/llms.txt)** - Основні концепції та швидкий довідник +- **[llms-full.txt](https://retejs.org/llms-full.txt)** - Повна документація + +Див. посібник [LLMs.txt](/uk/docs/development/ai-assistance/llms) для прикладів інтеграції. + +## Що вибрати? {#which-should-i-use} + +- **Використовуйте Rete Kit ШІ** якщо ви хочете автоматичне налаштування з контекстно-орієнтованими інструкціями для вашого IDE +- **Використовуйте LLMs.txt** якщо ви віддаєте перевагу ручній інтеграції або вам потрібно посилатися на документацію в ШІ-розмовах + +Обидва підходи можна використовувати разом для комплексної ШІ-допомоги. + +## Пов'язана документація {#related-documentation} + +- [Rete Kit](/uk/docs/development/rete-kit) - Інші функції Rete Kit +- [Початок роботи](/uk/docs/getting-started) - Швидкий старт з ШІ-допомогою diff --git a/content/uk/docs/20.development/4.ai-assistance/2.llms.md b/content/uk/docs/20.development/4.ai-assistance/2.llms.md new file mode 100644 index 00000000..f06b3900 --- /dev/null +++ b/content/uk/docs/20.development/4.ai-assistance/2.llms.md @@ -0,0 +1,97 @@ +--- +description: Покращте свій робочий процес візуального програмування за допомогою ШІ - Дізнайтеся, як інтегрувати документацію Rete.js з ШІ-асистентами для кодування для розумнішої розробки редакторів вузлів +keywords: llms.txt, візуальне програмування ші, редактор вузлів ші, rete.js ші, cursor, windsurf, copilot, claude, gemini, chatgpt +--- + +# LLMs.txt + +Покращте свій досвід візуального програмування за допомогою ШІ-інструментів, які розуміють патерни редакторів вузлів Rete.js, концепції потоків даних та архітектуру плагінів. + +## Що таке LLMs.txt? {#what-is-llms} + +Створення редакторів вузлів та інтерфейсів візуального програмування включає унікальні патерни та концепції, які відрізняються від традиційної розробки додатків. Наша інтеграція ШІ через [LLMs.txt](https://llmstxt.org/) допомагає асистентам кодування розуміти: + +- **Архітектуру на основі вузлів** та патерни з'єднань +- **Парадигми обробки** потоків даних та керуючих потоків +- **Композицію плагінів** для розширюваних редакторів +- **Рендеринг для кількох фреймворків** (React, Vue, Angular, Svelte) +- **Техніки обробки та маніпуляції** графами + +Це дозволяє ШІ-інструментам надавати контекстно точні пропозиції для ваших проектів візуального програмування. + +## Ресурси {#resources} + +Наша документація оптимізована для споживання ШІ через спеціалізовані кінцеві точки, які розуміють робочі процеси візуального програмування: + +- **[llms.txt](https://retejs.org/llms.txt)** - Основні концепції редакторів вузлів, основні API та патерни швидкого довідника +- **[llms-full.txt](https://retejs.org/llms-full.txt)** - Повна база знань візуального програмування, включаючи розширені патерни, архітектуру плагінів та обробні движки + +Ці кінцеві точки постійно оновлюються, щоб відображати останні практики розробки редакторів вузлів та можливості фреймворку. + +## Як використовувати {#how-to-use} + +Ви можете інтегрувати документацію Rete.js з будь-яким ШІ-асистентом для кодування, надавши URL LLMs.txt як контекст. Це надає ШІ комплексні знання про патерни розробки редакторів вузлів та найкращі практики. + +::alert{type="info"} +[Rete Kit ШІ](/uk/docs/development/ai-assistance/rete-kit-ai) автоматизує цей процес інтеграції, генеруючи файли інструкцій, специфічні для IDE, які посилаються на LLMs.txt. Якщо ви використовуєте Cursor, GitHub Copilot, Windsurf або подібні інструменти, розгляньте використання `npx rete-kit ai` для контекстно-орієнтованого автоматичного налаштування. +:: + +### Автоматичне налаштування з Rete Kit ШІ {#automated-setup-with-rete-kit-ai} + +Для автоматичної інтеграції з IDE використовуйте Rete Kit ШІ, який генерує контекстно-орієнтовані інструкції, що посилаються на LLMs.txt: + +```bash +npx rete-kit ai --tool cursor --context onboard +``` + +Це створює файли інструкцій, специфічні для IDE, які автоматично включають посилання на кінцеві точки LLMs.txt. Див. документацію [Rete Kit ШІ](/uk/docs/development/ai-assistance/rete-kit-ai) для деталей. + +### Ручна інтеграція {#manual-integration} + +Ви можете вручну інтегрувати URL LLMs.txt з будь-яким ШІ-інструментом, посилаючись на них у ваших розмовах або файлах конфігурації. Цей підхід дає вам повний контроль над тим, як і коли використовується документація. + +#### Основні кроки інтеграції {#basic-integration-steps} + +1. Скопіюйте URL LLMs.txt: `https://retejs.org/llms.txt` (або `llms-full.txt` для повної документації) +2. Посилайтеся на нього в контексті або розмові вашого ШІ-інструменту +3. Задавайте питання про розробку Rete.js, патерни редакторів вузлів або отримуйте пропозиції коду + +### VS Code GitHub Copilot {#vs-code-github-copilot} + +Додайте URL LLMs.txt до вашого робочого простору для покращених контекстно-орієнтованих пропозицій: + +1. Створіть файл `.copilot-instructions.md` у корені вашого проекту +2. Додайте посилання: + ```markdown + # Інструкції Copilot + + Для розробки Rete.js посилайтеся на документацію за адресою: + https://retejs.org/llms-full.txt + + Зосередьтеся на патернах редакторів вузлів, програмуванні потоків даних та архітектурі плагінів. + ``` + +3. Copilot тепер розумітиме концепції Rete.js під час надання автодоповнення та пропозицій коду + +### Google Gemini Chat {#google-gemini-chat} + +Посилайтеся на документацію безпосередньо у вашій розмові: + +```prompt +Я створюю редактор вузлів з Rete.js. Будь ласка, перегляньте документацію за адресою https://retejs.org/llms-full.txt та допоможіть мені створити користувацький вузол, який обробляє дані зображення через кілька етапів трансформації. +``` + +### Model Context Protocol (MCP) {#model-context-protocol-mcp} + +Інструменти, сумісні з MCP (такі як Context7, Claude Desktop та інші додатки з підтримкою MCP), можуть отримувати документацію Rete.js як контекст для ШІ-моделей: + +1. Налаштуйте ваш інструмент MCP для використання кінцевих точок LLMs.txt Rete.js як ресурсів +2. Після налаштування повна документація Rete.js доступна як контекст для ШІ-розмов +3. ШІ-моделі мають постійний доступ до патернів редакторів вузлів, архітектури плагінів та найкращих практик + +Щоб налаштувати інтеграцію MCP, додайте URL LLMs.txt Rete.js (`https://retejs.org/llms.txt` або `https://retejs.org/llms-full.txt`) як ресурси в конфігурації вашого інструменту, сумісного з MCP. Перевірте документацію вашого інструменту MCP для конкретних інструкцій з налаштування. + +## Пов'язана документація {#related-documentation} + +- [Rete Kit ШІ](/uk/docs/development/ai-assistance/rete-kit-ai) - Автоматична інтеграція з IDE +- [Огляд ШІ-асистента](/uk/docs/development/ai-assistance) - Всі опції інтеграції ШІ diff --git a/content/uk/docs/20.development/4.ai-assistance/3.rete-kit-ai.md b/content/uk/docs/20.development/4.ai-assistance/3.rete-kit-ai.md new file mode 100644 index 00000000..f9cec168 --- /dev/null +++ b/content/uk/docs/20.development/4.ai-assistance/3.rete-kit-ai.md @@ -0,0 +1,116 @@ +--- +description: Отримайте розумну, контекстно-орієнтовану допомогу у вашій IDE з підтримкою ШІ за допомогою команди ШІ Rete Kit. Генеруйте інструкції, специфічні для IDE, для вивчення та розробки з Rete.js +keywords: rete kit ai, ai допомога, ші допомога, cursor, windsurf, copilot, інструкції ide, ші-інструкції, контекстно-орієнтований ші +--- + +# Rete Kit ШІ + +::alert{type="warning"} +Функція ШІ-команди наразі є **експериментальною**. API та поведінка можуть змінитися в майбутніх версіях. Ми вітаємо відгуки та пропозиції щодо покращення. Будь ласка, поділіться своїм досвідом на [GitHub Issues](https://github.com/retejs/rete-kit/issues). +:: + +Rete Kit включає ШІ-команду, яка генерує контекстно-орієнтовані інструкції для IDE з підтримкою ШІ (Cursor, GitHub Copilot, Windsurf тощо). Ці інструкції допомагають ШІ-асистентам розуміти вашу конкретну ситуацію та надавати більш точну, релевантну допомогу під час вивчення або розробки з Rete.js. + +## Швидкий старт {#quick-start} + +Найшвидший спосіб почати — використати агента або функцію виконання команд вашого IDE: + +```prompt +Запусти npx rete-kit ai для [ваша мета] +``` + +Замініть `[ваша мета]` на вашу фактичну мету (наприклад, "вивчення Rete.js", "створення нового додатку", "додавання до мого існуювого проекту"). ШІ-агент автоматично визначить правильний інструмент та опції контексту. + +Або вкажіть опції вручну: + +```bash +npx rete-kit ai --tool --context [options] +``` + +**Опції:** +- `--tool, -t ` - Інструмент IDE (cursor, github, windsurf тощо) +- `--context, -c ` - Контекст (onboard, boot, dev, plugin) +- `--force, -f` - Перезаписати існуючі файли інструкцій без підтвердження +- `--interactive, -i` - Інтерактивний режим для вибору опцій + +Запустіть `npx rete-kit ai --help` для детальної інформації про використання. + +## Контексти {#contexts} + +Виберіть контекст, який відповідає вашій ситуації: + +| Контекст | Коли використовувати | Опис | +|---------|-------------|-------------| +| **onboard** | Вивчення основ Rete.js | Надає концептуальні пояснення, основні будівельні блоки (вузли, з'єднання, сокети), моделі обробки та навчальні керівництва. Використовуйте, коли запитуєте "Що таке Rete.js?" або "Як працює візуальне програмування?" | +| **boot** | Створення нового додатку Rete.js | Надає покрокові керівництва зі створення додатку, допомогу з вибором фреймворку, рекомендації щодо функцій та пояснення структури проекту. Допомагає з запуском команд `rete-kit app` та розумінням налаштування проекту. | +| **dev** | Додавання Rete.js до існуючого додатку або робота з існуючим додатком Rete.js | Надає стратегії інтеграції, патерни на основі посилань з додатків Rete Kit та керівництва з вирішення проблем. Допомагає з додаванням Rete.js до існуючих кодової бази, виправленням проблем та адаптацією патернів до вашої архітектури. | +| **plugin** | Розробка, відлагодження або налаштування плагінів Rete.js | Надає архітектуру плагінів, патерни обробки сигналів, техніки відлагодження та розширені найкращі практики. Допомагає зі структурою плагінів, системами сигналів, тестуванням та розробкою для кількох фреймворків. | + +## Підтримувані інструменти {#supported-tools} + +| Інструмент | Статус | Примітки | +|------|--------|-------| +| Cursor | ✅ Підтримується | Генерує файли `.mdc` у директорії `.cursor/rules/` | +| GitHub Copilot | ✅ Підтримується | Створює файл `.copilot-instructions.md` у директорії `.github/` | +| Windsurf | ⚠️ Включено | Розміщує файли `.md` у директорії `.windsurf/rules/` | +| Continue | ⚠️ Включено | Розміщує файли `.md` у директорії `.continue/rules/` | +| Amazon Q | ⚠️ Включено | Розміщує файли `.md` у директорії `.amazonq/rules/` | +| Antigravity | ⚠️ Включено | Розміщує файли `.md` у директорії `.agent/rules/` | +| Codex | ⚠️ Включено | Створює файл `AGENTS.md` у корені проекту | +| Claude | ⚠️ Включено | Створює файл `CLAUDE.md` у корені проекту | + +**Легенда статусу:** +- ✅ **Підтримується** - Протестовано та перевірено на правильну роботу +- ⚠️ **Включено** - Підтримується, але не повністю протестовано + +## Інтерактивний режим {#interactive-mode} + +Не впевнені, який контекст використовувати? Запустіть інтерактивний режим: + +```bash +npx rete-kit ai --interactive +``` + +## Як це працює {#how-it-works} + +Rete Kit читає шаблони інструкцій, специфічні для контексту, зі свого пакету та перетворює їх для вашого IDE: + +1. **Читає шаблони** з `assets/ai/{context}/` (onboard, boot, dev або plugin) +2. **Перетворює вміст** для формату вашого IDE (наприклад, файли `.mdc` для Cursor) +3. **Записує інструкції** у директорії, специфічні для IDE, у вашому проекті +4. **Активується автоматично** - ШІ-асистент вашого IDE використовує ці інструкції одразу + +Згенеровані інструкції містять керівництва, специфічні для Rete.js, адаптовані до вашого вибраного контексту. + +## Перемикання контекстів {#switching-contexts} + +Перемикайте контексти в міру розвитку вашого проекту, запускаючи команду знову з іншим контекстом. Використовуйте `--force` для перезапису існуючих інструкцій: + +```bash +npx rete-kit ai --tool cursor --context dev --force +``` + +**Типова послідовність:** `onboard` → `boot` → `dev` → `plugin` + +## Вирішення проблем {#troubleshooting} + +**Інструкції не працюють?** +- Перевірте, чи файли були створені в правильній директорії (наприклад, `.cursor/rules/` для Cursor) +- Спробуйте розпочати нову сесію чату/агента - інструкції можуть потребувати нової розмови для завантаження +- Якщо нова сесія не працює, перезапустіть ваш IDE, щоб переконатися, що інструкції завантажені +- Протестуйте, запитавши ШІ-асистента вашого IDE питання, специфічне для Rete.js +- Перегенеруйте з прапорцем `--force` за потреби +- Перевірте налаштування IDE, щоб переконатися, що функції ШІ увімкнено + +**Вибрано неправильний контекст?** Перегенеруйте з правильним контекстом: +```bash +npx rete-kit ai --tool cursor --context <правильний-контекст> --force +``` + +**Інтерактивний режим не працює?** Використовуйте явні прапорці `--tool` та `--context` замість цього (інтерактивний режим вимагає TTY). + +## Пов'язана документація {#related-documentation} + +- [Огляд ШІ-асистента](/uk/docs/development/ai-assistance) - Всі опції інтеграції ШІ +- [Інтеграція LLMs.txt](/uk/docs/development/ai-assistance/llms) - Ручна інтеграція ШІ +- [Огляд Rete Kit](/uk/docs/development/rete-kit) - Інші функції Rete Kit diff --git a/content/uk/docs/26.migration.md b/content/uk/docs/26.migration.md index 81eacbce..d23a3f91 100644 --- a/content/uk/docs/26.migration.md +++ b/content/uk/docs/26.migration.md @@ -194,7 +194,7 @@ editor.on('nodecreate', node => { \** - переміщені до іншого пакету\ \*** - видалено -### Події пакету `rete` +### Події пакету `rete` {#rete-package-events-v1} - nodecreate * - nodecreated * - noderemove * @@ -231,7 +231,7 @@ editor.on('nodecreate', node => { - process *** - clear ** -### Події пакету `rete-connection-plugin` +### Події пакету `rete-connection-plugin` {#rete-connection-plugin-package-events-v1} - connectionpath ** - connectiondrop * @@ -239,7 +239,7 @@ editor.on('nodecreate', node => { - resetconnection *** #right -У поточній версії використовується особливий тип реалізації сигналу, який включає сигнали як об’єкти. Крім того, пайпи використовуються або для маніпулювання цими об’єктами, або для запобігання поширенню сигналу. +У поточній версії використовується особливий тип реалізації сигналу, який включає сигнали як об'єкти. Крім того, пайпи використовуються або для маніпулювання цими об'єктами, або для запобігання поширенню сигналу. ```ts // v2 @@ -249,7 +249,7 @@ editor.addPipe(context => { }) ``` -### Події пакету `rete` +### Події пакету `rete` {#rete-package-events-v2} - nodecreate - nodecreated @@ -263,7 +263,7 @@ editor.addPipe(context => { - clearcancelled - cleared -### Події пакету `rete-area-plugin` +### Події пакету `rete-area-plugin` {#rete-area-plugin-package-events} - nodepicked - nodedragged @@ -284,20 +284,20 @@ editor.addPipe(context => { - zoomed - resized -### Події пакету `rete-connection-plugin` +### Події пакету `rete-connection-plugin` {#rete-connection-plugin-package-events-v2} - connectionpick - connectiondrop -### Події пакету `rete-angular-plugin` +### Події пакету `rete-angular-plugin` {#rete-angular-plugin-package-events} - connectionpath -### Події пакету `rete-vue-plugin` +### Події пакету `rete-vue-plugin` {#rete-vue-plugin-package-events} - connectionpath -### Події пакету `rete-react-plugin` +### Події пакету `rete-react-plugin` {#rete-react-plugin-package-events} - connectionpath diff --git a/nuxt.config.ts b/nuxt.config.ts index c6d8cedf..6d695d7f 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -158,4 +158,10 @@ export default defineNuxtConfig({ srcDir: 'src', filename: 'sw.ts', }, + routeRules: { + // Redirect old LLMs.txt route to new location + '/docs/llms': { redirect: '/docs/development/ai-assistance/llms' }, + '/en/docs/llms': { redirect: '/en/docs/development/ai-assistance/llms' }, + '/uk/docs/llms': { redirect: '/uk/docs/development/ai-assistance/llms' }, + }, }); \ No newline at end of file