What is Gluon v2?

Gluon v2 is an advanced tool connecting your local development projects with AI models like Claude, Gemini, and AI Studio. Unlike traditional AI agents, Gluon gives you full control over the context passed to the model - you choose exactly which files, system prompts, and instructions to include.

Architecture: Two Components

🖥️ Desktop Application (Engine)

Runs in the background on Windows, manages projects, monitors files, generates contexts, and communicates with extension via WebSocket.

🧩 Chrome Extension (Interface)

Browser side panel, enables file selection, prompt configuration, and direct interaction with AI (Claude/Gemini/AI Studio).

Why Gluon?

  • Precise context: Choose exactly which files go to AI - no automatic "dump" of entire repository.
  • Token savings: Smaller context = lower API costs and faster responses.
  • AI control: Use your own system prompts and instructions - AI behaves exactly as you want.
  • Multi-project: Work with multiple projects simultaneously, without context switching.

🖥️ Desktop Application

The desktop application is the "engine" of Gluon - runs in the background on Windows and manages all projects, files, and communication with the Chrome extension.

Desktop App Main Screen

📄 License & Updates

Gluon v2 is a one-time purchase product - no subscriptions. After purchase, you get:

  • ✅ Lifetime access to desktop app and Chrome extension
  • ✅ All future updates (free)
  • ✅ Technical support via Discord
  • ✅ 30-day money-back guarantee
License & Updates Screen

💡 Tip: Enter the license key only once in the desktop app. Chrome extension automatically verifies license status via WebSocket connection.

➕ Adding Project

To start working with Gluon, you need to add at least one project in the desktop app. A project is a folder containing code you want to share with AI.

Step by step:

  1. Open Gluon v2 desktop application
  2. Go to "Projects" tab
  3. Click "Add Project" or "+" button (if you have no projects yet)
  4. Select project root folder (e.g., C:\Users\YourName\Projects\my-app)
  5. Project will appear in the list and be available in Chrome extension
Empty Projects Screen Projects Screen with Project

⚠️ Important: Gluon does NOT modify your files - it works in read-only mode. You can safely add any project without fear of data loss.

⚙️ Project Settings

After adding a project, you can configure which files and folders should be included in AI context. This is a key feature to reduce "noise" and focus AI on what really matters.

🚫 Exclusions

Exclusions allow you to skip entire folders during project scanning. Typical exclusions include:

  • node_modules - npm/yarn dependencies (usually thousands of files)
  • .git - Git repository history
  • build, dist, target - build artifacts
  • venv, .venv - Python virtual environments
  • __pycache__, .pytest_cache - Python cache
Project Settings - Exclusions

Glob patterns

Gluon supports glob patterns for more advanced filtering:

  • **/*.min.js - exclude all minified JS files
  • **/test/** - exclude all folders named "test"
  • temp_* - exclude folders starting with "temp_"

💡 Best Practice: Start by excluding the largest folders (node_modules, .git) - they often reduce file count by 90%+.

📋 Allowed Extensions

You can specify a whitelist of file extensions to be visible in the file tree. If the list is empty, all files (except exclusions) will be visible.

Example configurations:

JavaScript/TypeScript Project

.js, .jsx, .ts, .tsx, .json, .md

Python Project

.py, .pyi, .toml, .yaml, .yml, .txt, .md

Full-Stack Web App

.js, .ts, .jsx, .tsx, .py, .html, .css, .scss, .json, .sql, .md

Project Settings - Allowed Extensions

🌍 Environments & System Prompts

An Environment is a predefined set of system prompts that defines AI's "personality" and behavior. You can create different environments for different types of tasks.

Default environments:

🎨 Default

Basic settings for general code work

🏗️ Senior Architect

Focus on architecture, design patterns, and best practices

💻 Frontend Specialist

Dedicated for React, Vue, Angular - UX, accessibility, performance

🔧 Backend Specialist

APIs, databases, business logic, security

Environment Editor
  1. In desktop app, go to "Environments" tab
  2. Click "Add Environment"
  3. Provide name (e.g., "DevOps Engineer") and choose icon
  4. Add system prompts - each prompt is an instruction for AI
  5. Save - environment will be available in Chrome extension

💡 Example prompt: "You are an expert in Docker and Kubernetes. Focus on containerization best practices, scalability, and security. Always suggest production-ready solutions."

🧩 Chrome Extension

Chrome Extension is the Gluon user interface - a browser side panel enabling interaction with projects, file selection, and direct communication with AI. The extension connects to the desktop app via WebSocket and works in Claude.ai, Gemini, and AI Studio services.

Chrome Extension Overview

💡 Tip: Extension automatically detects AI page (Claude/Gemini/AI Studio) and adapts its interface. All features work across all three services.

📁 Project Selector

Project selector is located at the top of the side panel and allows switching between projects added in the desktop app.

How to use:

  1. Click "Select Project" dropdown
  2. Choose project from list (folder name is displayed)
  3. File tree will automatically load selected project structure
  4. All features (Auto Select, Context Save) will work in this project context
Project Selector

⚠️ WebSocket Connection: If project list is empty, check if desktop app is running and if extension has WebSocket connection (status visible at bottom of panel).

🌐 Environment Selection

Environment defines how AI will behave - it specifies system prompts that will be automatically attached to every conversation.

How it works:

  • Select environment: Click dropdown and choose environment (e.g., "Frontend Specialist")
  • Automatic prompts: All system prompts from this environment will be attached at conversation start
  • Change environment: You can change environment anytime - new prompts will be used in next conversation
Environment Selector

💡 Pro Tip: Create dedicated environments for different task types - "Code Review", "Bug Fixing", "Architecture Discussion" - each with appropriate system prompts.

⚡ Quick Task

Quick Task is a text field for quickly entering instructions for AI. This is your main way to communicate with the model - here you type tasks, questions, and commands.

What happens after sending a task:

  1. Text from Quick Task is combined with selected files from tree
  2. System prompts from selected environment are added
  3. Everything is pasted into input field in Claude/Gemini/AI Studio
  4. You can still edit pasted text before sending to AI
Quick Task Field

Example tasks:

  • "Add error handling to getUserData function"
  • "Refactor this code using async/await"
  • "Explain how this validation logic works"
  • "Write unit tests for this module"

🌳 File Tree

File tree displays selected project structure and allows precise file selection for AI context. This is one of the most important Gluon features - you decide exactly what AI "sees".

File tree features:

  • Multi-select: Select multiple files at once (Ctrl+Click, Shift+Click)
  • Expand/collapse: Expand and collapse folders by clicking arrow
  • File type icons: Different icons for .js, .py, .json, etc.
  • Counter: Number of selected files visible at bottom
  • Clear selection: Button to deselect all files
File Tree

Best practices:

🎯 Context minimalism

Select only files directly related to task. Fewer files = faster responses + lower costs + better results.

🧩 Modular selection

For feature: select component, its style, test, and documentation. For bug: file with error + related utils/helpers.

📋 Context Save as checkpoint

When you found optimal file set - save it as Context Save. You'll be able to quickly load it later.

💾 Saved Contexts (Context Saves)

Context Save is a saved "snapshot" of selected files and configuration. You can quickly load previously saved context instead of re-selecting the same files.

When to use Context Saves:

  • Recurring tasks: "Frontend Forms", "API Endpoints", "Authentication Flow"
  • Code review: Save file set for review before each merge
  • Onboarding: Prepare context saves for new team members - "Project Overview", "Core Architecture"
  • Debugging: "Payment System Bug" with all related files

How to create Context Save:

  1. Select files in file tree
  2. Click "Save Context" in features section
  3. Provide name (e.g., "User Profile Module")
  4. Context Save will appear in "Saved Contexts" section
  5. Click name to load - files will be automatically selected
Context Saves

💡 Organization: Context Saves are project-specific - each project has its own list. You can have "Frontend" in project A and "Frontend" in project B - they're separate contexts.

⭐ Key Features

Gluon offers three advanced features that automate and streamline AI workflow. Each solves a specific problem in development workflow.

Key Features

🎯 Auto Select

What is Auto Select?

Auto Select is an automatic file selection feature based on your task. You enter a task (e.g., "fix login bug"), and AI analyzes all project files and automatically selects those most relevant to that specific task.

Why use Auto Select?

⏱️ Time savings

No need to manually search file tree - AI finds relevant files in seconds.

🔍 Dependency discovery

Auto Select often finds files you didn't think of - utils, helpers, types that are related to the task.

🎓 Learning the project

By observing which files AI selects for different tasks, you learn project structure and dependencies.

How to use Auto Select?

  1. Make sure you have project selected
  2. In "Features" section click "Auto Select"
  3. In dialog window enter task description - be as specific as possible
  4. Click "Analyze" - AI will analyze all project files
  5. After a moment you'll see automatically selected files in tree
  6. You can manually add or remove files before sending to AI
Auto Select Dialog

Example

Scenario: Refactoring authentication system

Task entered in Auto Select:

"Refactor login system - replace localStorage with cookies, add refresh token"

Files automatically selected by AI:

  • src/auth/login.js - główna logika logowania
  • src/auth/authService.js - serwis autentykacji
  • src/utils/storage.js - helpers do localStorage (wymaga zmiany)
  • src/utils/cookies.js - helpers do cookies (nowe API)
  • src/types/auth.ts - typy TypeScript dla auth
  • src/api/authEndpoints.js - endpointy API refresh token

AI found not only obvious files (login.js), but also dependencies (storage.js, cookies.js) and related API (authEndpoints.js).

💡 Pro Tip: The more detailed task description, the better results. Instead of "fix bug" write "fix email validation bug in registration form".

Task description optimization:

Good descriptions

  • "Add email validation in contact form using regex"
  • "Implement pagination in users table on admin page"
  • "Fix memory leak in Chart component on unmount"

Weak descriptions

  • "Fix code" - too generic
  • "Bug" - no context
  • "Frontend" - too broad

💡 Combine with Context Save: After successful Auto Select save result as Context Save - you'll be able to quickly load it for similar tasks.

📋 Context Save (Feature)

What is Context Save?

Context Save is an advanced feature for multi-stage AI collaboration. It allows AI to "remember" context from previous response and automatically pass it to next prompt - eliminating need to copy long code fragments between conversations.

Why use Context Save?

🔗 Work continuation

You work on code in stages - AI first generates code, then you test it, then ask for fixes. Context Save passes earlier code automatically.

💾 State preservation

You save AI work result as Context Save and can return to it later - even in new browser or after restart.

🎯 Precise iteration

Instead of copying long code into prompt (wasting tokens), you use Context Save - AI gets only reference.

How to use Context Save?

  1. In Quick Task check "Context Save" checkbox
  2. Send task to AI normally (e.g., "write JSON parsing function")
  3. AI will include special marker @gluon:response with code in response
  4. Gluon will automatically save this response as Context Save
  5. In next task write: "add error handling to previous function"
  6. Gluon will automatically attach saved context - AI will know which function you mean
Context Save Example

Workflow example

Stage 1: Initial code generation

You (with Context Save enabled):

"Write UserManager class with methods: createUser, deleteUser, updateUser. Use TypeScript."

AI responds:

@gluon:response class UserManager { createUser(name: string, email: string) { /* ... */ } deleteUser(id: number) { /* ... */ } updateUser(id: number, data: any) { /* ... */ } }

→ Gluon saves this code as Context Save automatically

Stage 2: Iteration and improvement

You:

"Add email validation in createUser method and error handling in all methods"

→ Gluon automatically attaches previous Context Save to prompt
→ AI sees previous UserManager version and modifies it

Stage 3: Tests

You:

"Write unit tests for UserManager using Jest"

→ AI has full UserManager context from previous stages
→ Generates tests precisely matched to implementation

💡 Key principle: Context Save works best with iterative work - generate, test, fix, extend. Each stage builds on previous.

Managing multiple Context Saves

Gluon automatically names Context Saves based on your task. You can have multiple active Context Saves for different project parts. Click name in "Saved Contexts" section to load specific context.

Combination with project files

Context Save works together with selected files. Example: select user.model.ts (data model) + enable Context Save with previously generated UserManager - AI will see both data model and previous code.

⚠️ Limits: Context Save stores up to ~10,000 characters from AI response. For very long code consider using Prompt Generator instead of Context Save.

✍️ Prompt Generator

What is Prompt Generator?

Prompt Generator is Gluon's most advanced feature - it allows AI to generate structured JSON response containing not only code, but also files to update, reasoning (AI thinking explanation), and optional "handoff" (context pass to next task).

Why use Prompt Generator?

📦 Structured responses

AI returns JSON with clearly separated sections: code, files to modify, explanations. Easy to parse and automate.

🗺️ Reasoning - understanding AI decisions

AI explains WHY it made specific implementation decisions. You learn best practices and architecture.

🔄 Handoff - task chaining

AI can "pass the baton" - generate context for next task (e.g., after generating component suggests writing tests).

How to use Prompt Generator?

  1. In Quick Task check "Prompt Generator" checkbox
  2. Choose template type (auto_select, context_handoff, or prompt_handoff)
  3. Send task - Gluon will attach special prompt instructing AI how to format response
  4. AI will generate JSON response with @gluon:* markers
  5. Gluon will automatically display structured response in readable form
  6. You can copy code, see reasoning, or continue with handoff
Prompt Generator Output

Prompt Generator response example

Task: "Create React component to display user list with pagination"

AI response in JSON format:

@gluon:reasoning Zdecydowałem się użyć React Hooks (useState, useEffect) zamiast class component, ponieważ są bardziej idiomatyczne w nowoczesnym React. Paginacja jest po stronie klienta dla prostoty, ale można łatwo przerobić na server-side. @gluon:files UserList.jsx, UserList.module.css, types/User.ts @gluon:response // UserList.jsx import React, { useState, useEffect } from 'react'; import styles from './UserList.module.css'; export function UserList({ users }) { const [currentPage, setCurrentPage] = useState(1); const usersPerPage = 10; const indexOfLastUser = currentPage * usersPerPage; const indexOfFirstUser = indexOfLastUser - usersPerPage; const currentUsers = users.slice(indexOfFirstUser, indexOfLastUser); return ( <div className={styles.userList}> {currentUsers.map(user => ( <div key={user.id} className={styles.userCard}> {user.name} </div> ))} <Pagination currentPage={currentPage} totalPages={Math.ceil(users.length / usersPerPage)} onPageChange={setCurrentPage} /> </div> ); } @gluon:handoff Komponent UserList jest gotowy. Następne kroki: 1. Dodaj sorting po kolumnach (nazwa, email, data rejestracji) 2. Napisz testy jednostkowe z React Testing Library 3. Dodaj search/filter functionality

What happened in above example:

  • @gluon:reasoning: AI explained why it used Hooks and client-side pagination
  • @gluon:files: List of files to create/modify
  • @gluon:response: Full component code
  • @gluon:handoff: Suggestions what to do next (sorting, tests, filtering)

💡 Workflow Tip: Use Prompt Generator with handoff to build complex features step by step - AI "guides you" suggesting next stages.

Available templates:

🎯 auto_select

Template for automatic file selection - AI returns list of relevant files in @gluon:files. Use when you want AI to suggest which files to select.

💾 context_handoff

Template with full Context Save + handoff. AI saves its output and passes context to next task. Ideal for iterative work.

✍️ prompt_handoff

Simple handoff without Context Save - AI only suggests next steps. Lighter, uses fewer tokens.

💡 Template choice: For simple tasks use Prompt Generator. For complex, multi-stage features use Context Save. Use Auto Select when you don't know which files to select.

📝 Templates

Templates are predefined prompt structures that instruct AI how to format response. When you use Prompt Generator feature, Gluon automatically attaches appropriate template to your task, so AI knows which markers to use.

Template Center

🏗️ Template Structure

Each template defines which tags AI should use in response. Tags start with @gluon: and define different response sections - code, files, reasoning, handoff.

📋 Three template types use different @gluon:* tags

Three main template types:

🎯 auto_select

Purpose: Automatic file selection by AI

Tags: @gluon:files (file list)

When to use: When you don't know which files to select for task

💾 context_handoff

Purpose: Full iterative AI work - code + context + next steps

Tags: @gluon:response, @gluon:files, @gluon:reasoning, @gluon:handoff

When to use: For complex, multi-stage tasks

✍️ prompt_handoff

Purpose: Light handoff - only next steps suggestions

Tags: @gluon:response, @gluon:handoff

When to use: For simpler tasks where you don't need full context

🔧 JSON Fields (@gluon:* Tags)

👆 Click field to see details.

@gluon:response
Main response - code, text, explanations. This is the most important section with AI output.

Purpose: Contains actual AI response - can be code, text, configuration, documentation, etc.

Format: Any - code, markdown, plain text. Usually full working code.

Example:

@gluon:response function calculateTotal(items) { return items.reduce((sum, item) => sum + item.price, 0); }

💡 Tip: This field can contain very long code - even several components or modules in one response.

@gluon:files
List of files to create or modify. Paths separated by commas.

Purpose: AI informs which project files need to be created or modified to implement solution.

Format: List of file names/paths separated by commas.

Example:

@gluon:files src/components/UserProfile.jsx, src/styles/UserProfile.module.css, src/types/User.ts

💡 Tip: This field is especially useful when generating new features - you immediately know which files to create.

@gluon:reasoning
AI decision explanation - why it chose this solution, what are the trade-offs.

Purpose: AI explains its reasoning - why it used specific patterns, libraries, approaches.

Format: Descriptive text in natural language.

Example:

@gluon:reasoning Użyłem React Hooks zamiast class component, ponieważ są bardziej nowoczesne i pozwalają na lepsze code reuse przez custom hooks. useState do lokalnego state jest wystarczający - nie ma potrzeby Redux dla tego prostego komponentu. Dodatkowo useEffect zapewnia cleanup przy unmount, co zapobiega memory leaks.

💡 Tip: This field is great for learning - by reading reasoning you learn best practices and architecture from AI.

@gluon:handoff
Next steps suggestions - what to do next, how to extend feature.

Purpose: AI "passes the baton" - suggests next tasks to complete, possible extensions, tests, etc.

Format: List of steps or context description for next task.

Example:

@gluon:handoff Komponent UserProfile jest gotowy. Sugerowalne następne kroki: 1. Dodaj loading state podczas ładowania danych użytkownika 2. Napisz testy jednostkowe z React Testing Library 3. Dodaj error boundary dla obsługi błędów 4. Zaimplementuj edycję profilu (formularz + validacja) 5. Dodaj upload avatara z preview

💡 Tip: Handoff works like roadmap - AI guides you through entire feature implementation process step by step.

💡 Click field to see details.

🔍 Internal @gluon:handoff Fields

The @gluon:handoff field contains a JSON structure with additional fields that vary depending on template type. Below is a detailed description of each field.

📌 Important: Every template also contains a Role / Behavior Definition field that defines how AI should behave. This field is automatically included in system prompt by Gluon.

📋 Fields for Context Save:

summary
Detailed chronology of entire thread - step-by-step progress description.

Purpose: AI describes entire thread history chronologically - what was done, what decisions were made, why specific approach was chosen.

Format: Narrative text with clear stage divisions.

Example:

"summary": "Etap 1: Zaimplementowano podstawowy komponent UserProfile z hookami useState i useEffect. Decyzja: Użyto compound component pattern dla lepszej reużywalności. Etap 2: Dodano integrację z API /users/:id. Napotkano problem z CORS - rozwiązano przez konfigurację proxy w vite.config.js. Etap 3: Zaimplementowano loading states i error handling z React Error Boundary."

💡 Tip: The more detailed chronology, the easier for new AI instance to take over context without questions.

solved_problems
List of solved problems with description, solution, files, and rationale.

Purpose: Documents every encountered and solved problem - what was wrong, how it was fixed, which files were modified.

Format: Array of strings, each in format: Problem | Solution | Files | Rationale

Example:

"solved_problems": [ "Problem: CORS error przy fetch do API | Solution: Dodano proxy config w vite.config.js i ustawiono credentials: 'include' | Files: vite.config.js, src/api/client.js | Rationale: Backend nie obsługuje CORS, proxy jest najszybszym rozwiązaniem", "Problem: Memory leak przy unmount UserProfile | Solution: Dodano cleanup function w useEffect anulującą pending requests | Files: src/components/UserProfile.jsx | Rationale: AbortController pattern jest standardem React 18+" ]

💡 Tip: For each problem always provide WHY - rationale for choosing this solution.

current_problem
Current work status - what exactly you're working on now, progress, challenges.

Purpose: Very detailed description of current stage - what's being done RIGHT NOW, progress status, specific challenges encountered.

Format: Narrative text with focus on CURRENT STATE.

Example:

"current_problem": "Obecnie pracuję nad edycją profilu użytkownika. Zaimplementowano formularz z validacją przez Zod schema. Progress: 60% - formularz działa, validacja działa. AKTUALNE WYZWANIE: Muszę zdecydować jak obsłużyć update avatara: - Opcja A: Upload do S3 + zwrócić URL do backendu - Opcja B: Base64 w body (prostsze, ale większy payload) Następny krok: Rozmowa z zespołem o wyborze opcji, potem implementacja upload logic."

💡 Tip: Always mark what's DONE vs IN PROGRESS vs BLOCKED - new instance immediately knows what to do next.

key_insights
Critical contextual information - architectural decisions, discoveries, limitations, conventions.

Purpose: Records all significant technical discoveries, architectural decisions, known system limitations, project specifics, adopted conventions.

Format: Bulleted list or text with clear categories.

Example:

"key_insights": "ARCHITEKTURA: Aplikacja używa compound components pattern - każdy feature ma główny kontener + sub-komponenty. OGRANICZENIA: Backend API ma rate limit 100 req/min - musimy używać debounce dla search. KONWENCJE: Wszystkie async operations przez custom hooks z prefix 'use'. Error handling przez Error Boundaries, nie try-catch w komponentach. DEPENDENCIES: UserProfile zależy od AuthContext - zawsze sprawdzaj isAuthenticated przed render. PROBLEM DO UNIKNIĘCIA: NIE używaj React.memo na komponenty z children - powoduje cache issues."

💡 Tip: This field is like "institutional knowledge" - record everything that will save time for next person.

✍️ Fields for Prompt Generator:

task_description
Detailed task description - what needs to be implemented, business and technical goals.

Purpose: Describes exactly WHAT needs to be done and WHY - from both business and technical perspective.

Format: Descriptive text with clear structure: What + Why + Business Goal + Technical Goal.

Example:

"task_description": "Zaimplementować system notyfikacji real-time dla użytkowników. Business Goal: Zwiększyć engagement użytkowników przez instant powiadomienia o ważnych eventach (nowe wiadomości, mentions, system alerts). Technical Goal: Zbudować skalowalne rozwiązanie oparte na WebSocket, które obsłuży 10k+ concurrent connections, z fallback na polling dla starszych przeglądarek. Zakres: UI komponenty (NotificationCenter, NotificationItem, Badge), WebSocket client, backend integration, persistence w IndexedDB dla offline support."

💡 Tip: Always include business "why" - AI selects better solutions when it understands the goal.

implementation_steps
Atomic, step-by-step implementation plan - each step = specific action on specific file.

Purpose: Breaks down task into small, actionable steps. Each step should be clear, atomic, referring to specific file/component.

Format: Array of strings - each string = one implementation step.

Example:

"implementation_steps": [ "Krok 1: Utwórz WebSocket hook - src/hooks/useWebSocket.js - connect, disconnect, subscribe", "Krok 2: Utwórz NotificationContext - src/contexts/NotificationContext.jsx - state management", "Krok 3: Zaimplementuj NotificationCenter component - src/components/NotificationCenter.jsx", "Krok 4: Dodaj NotificationItem component - src/components/NotificationItem.jsx", "Krok 5: Integruj z WebSocket - połącz useWebSocket z NotificationContext", "Krok 6: Dodaj IndexedDB persistence - src/utils/notificationStorage.js", "Krok 7: Napisz testy - src/components/__tests__/NotificationCenter.test.jsx" ]

💡 Tip: Each step should start with action verb: "Create", "Add", "Modify", "Integrate".

technologies
Key technologies, libraries, frameworks, and tools to use in implementation.

Purpose: Lists all technologies that MUST be used - consistent with existing project stack.

Format: List of technologies with versions and selection rationale.

Example:

"technologies": " - React 18.2+ (Context API dla state management) - Socket.io-client 4.5+ (WebSocket z auto-reconnect) - Zod 3.22+ (validation schema dla notification payload) - IndexedDB via Dexie.js 3.2+ (offline persistence) - React Testing Library (testy komponentów) - MSW (mock WebSocket dla testów) Stack Rationale: Socket.io preferowane nad native WebSocket ze względu na fallback mechanisms i auto-reconnection. Dexie.js upraszcza IndexedDB API."

💡 Tip: Always check project's package.json - use libraries already in dependencies.

architecture
Detailed architecture description - how new components integrate with code, data flow, calls.

Purpose: Describes HOW new components will work with existing code - data flow, function calls, business logic, error handling.

Format: Text with flow diagrams (ASCII art ok), layer descriptions, component interactions.

Example:

"architecture": " LAYERS: 1. Transport Layer: useWebSocket hook - zarządza connection, reconnection, subscriptions 2. State Layer: NotificationContext - globalne notifications state, actions (add, mark read, delete) 3. Persistence Layer: notificationStorage - IndexedDB operations, sync strategy 4. UI Layer: NotificationCenter + NotificationItem - presentation + user interactions DATA FLOW: [Backend WS] -> useWebSocket.onMessage() -> NotificationContext.addNotification() -> notificationStorage.save() -> React state update -> UI render USER INTERACTIONS: Click 'Mark as Read' -> NotificationContext.markAsRead(id) -> WS emit 'read' event -> notificationStorage.update(id) -> UI update ERROR HANDLING: - WS disconnect: useWebSocket auto-reconnect (exponential backoff) - Failed save to IndexedDB: show error toast, keep in memory - Backend error response: parse + show notification with error details INTEGRATION POINTS: - AuthContext: subscribe tylko gdy user authenticated - ThemeContext: NotificationCenter respects dark/light mode - RouterContext: notification click navigates to relevant page"

💡 Tip: Use ASCII flow diagrams - AI understands them well and they help visualize architecture.

code_context
Information about existing code that's NOT attached - path, signature, functionality.

Purpose: For code elements that will be used but are NOT attached as files - provide path, name, signature, description. Goal: AI doesn't need to search other files.

Format: List of elements with full API/interface description you'll be using.

Example:

"code_context": " EXISTING CODE TO USE (not attached): 1. AuthContext (src/contexts/AuthContext.jsx) - Hook: useAuth() -> { user: User | null, isAuthenticated: boolean, logout: () => void } - Usage: const { isAuthenticated } = useAuth() - check before rendering notifications 2. API Client (src/api/client.js) - Function: apiClient.get(endpoint: string) -> Promise - Function: apiClient.post(endpoint: string, body: object) -> Promise - Note: Already configured with auth headers 3. Toast Service (src/utils/toast.js) - Function: toast.success(message: string) -> void - Function: toast.error(message: string) -> void - Usage: Import and call directly, globally available 4. Theme Types (src/types/theme.ts) - Type: Theme = 'light' | 'dark' - Hook: useTheme() -> { theme: Theme, toggleTheme: () => void } CONVENTIONS: - All components use named exports (not default) - Hooks must be prefixed with 'use' - Types in separate .ts files, not inline"

💡 Tip: This field saves TONS of time - AI immediately knows which functions/types are available without reading entire codebase.

💡 How to use: Internal @gluon:handoff fields are automatically filled by AI when you use appropriate template. You only provide the task - AI generates JSON structure according to template instructions.

💡 Template Usage Examples

Below are practical examples of using different templates in real scenarios.

Scenario 1: Don't know which files to select

Problem: You want to fix payment system bug, but don't know which files are involved.

Template: auto_select

Task:

"Napraw bug: płatność kartą nie przechodzi dla kwot powyżej 1000 zł"

AI Response:

{
    "@gluon:response": "auto_select",
    "@gluon:reasoning": "Analizując zadanie zidentyfikowałem 4 kluczowe pliki: 
        PaymentProcessor obsługuje logikę płatności, AmountValidator waliduje kwoty, 
        paymentGateway integruje z zewnętrznym API, paymentLimits zawiera 
        konfigurację limitów.",
    "@gluon:files": {
        "@gluon:payment_system": [
            "src/payment/PaymentProcessor.js",
            "src/validation/AmountValidator.js",
            "src/api/paymentGateway.js",
            "src/config/paymentLimits.js"
            ]
    }
}

→ Gluon automatically selects these 4 files in tree

Scenario 2: Building complete feature step by step

Problem: You want to build notification system - starting from UI, through API, to real-time updates.

Template: context_handoff

Stage 1 - Task:

"Utwórz komponent NotificationCenter - wyświetla listę notyfikacji, mark as read, delete"

AI responds with full template:

{
    "@gluon:response": "context_handoff",
    "@gluon:handoff": {
        "summary": "Zaimplementowano UI layer systemu notyfikacji. 
                NotificationCenter + NotificationItem działają z mock data.",
        "solved_problems": [
            "Problem: Jak zarządzać stanem wielu notyfikacji | Solution: useReducer 
                z actions (add, markRead, delete) | Files: useNotifications.js | 
                Rationale: Reducer pattern dla złożonego state"
            ],
        "current_problem": "UI gotowe, ale brak integracji z backend. 
            Następny krok: API endpoints.",
                "key_insights": "Component używa compound pattern. Wszystkie mutations 
            przez reducer. CSS modules dla izolacji stylów."
    },
    "@gluon:reasoning": "Używam compound component pattern - NotificationCenter 
        jako kontener, NotificationItem jako element listy. State management przez 
        useReducer dla złożonej logiki (mark as read, delete, filter).",
        "@gluon:files": {
            "@gluon:notification_project": [
            "src/components/NotificationCenter.jsx",
            "src/components/NotificationItem.jsx",
            "src/components/NotificationCenter.module.css",
            "src/hooks/useNotifications.js",
            "src/types/Notification.ts"
            ]
    }
}

Stage 2 - next task based on handoff:

"Stwórz API endpoint /api/notifications według sugestii z handoff"

→ AI has context from previous stage thanks to Context Save
→ Generates API compatible with UI
→ Again passes handoff with next steps

Scenario 3: Simple task with what-next suggestion

Problem: You need simple utility function, but want AI to suggest what else to add.

Template: prompt_handoff

Task:

"Napisz funkcję formatCurrency - formatuje liczby jako PLN z separatorami tysięcy"

AI responds (Prompt Generator - implementation spec):

{
    "@gluon:response": "prompt_handoff",
    "@gluon:handoff": {
        "task_description": "Funkcja utility formatCurrency do formatowania 
            kwot w PLN z separatorami tysięcy dla lepszej czytelności w UI.",
        "implementation_steps": [
            "Krok 1: Utwórz plik src/utils/currency.js",
            "Krok 2: Zaimplementuj formatCurrency używając Intl.NumberFormat",
            "Krok 3: Dodaj unit testy w src/utils/__tests__/currency.test.js"
            ],
        "technologies": "Intl.NumberFormat (native JS API) - zero dependencies",
        "architecture": "Pure function, brak side effects. Input: number, 
            Output: string. Używa native Intl API dla i18n support.",
        "code_context": "Function będzie używana w komponentach: ProductCard, 
            OrderSummary, InvoiceView"
            },
    "@gluon:reasoning": "Używam Intl.NumberFormat bo jest native, zero 
        dependencies, automatyczne formatowanie dla różnych locales.",
    "@gluon:files": {
        "@gluon:app": [
        "src/utils/currency.js"
        ]
    }
}

→ You receive complete technical specification
→ All implementation steps clearly defined
→ AI-coder gets ready plan to execute

💡 Summary:

  • Auto Select: Don't know which files to select
  • Context Save: Building large feature in stages
  • Prompt Generator: Quick task + want to know what's next