Eclipse Theia

https://theia-ide.org/docs
Admin
Eclipse Theia is a platform for building custom Cloud & Desktop IDEs and tools with modern web...
Tokens:65,296
Snippets:800
Trust Score:9.9
Update:4 months ago
Show doc for...
Tokens:
Raw
### Build and Start Theia Browser Application

Source: https://theia-ide.org/docs/composing_applications

Commands to build and start the Theia browser application. Ensure you have yarn installed and the package.json configured before running.

```bash
yarn build:browser
yarn start:browser
```

--------------------------------

### Build and Start Electron App

Source: https://theia-ide.org/docs/composing_applications

Commands to rebuild native modules and start the Electron application.

```bash
yarn build:electron
yarn start:electron
```

--------------------------------

### Install Dependencies and Build Theia IDE

Source: https://theia-ide.org/docs/blueprint_documentation

Run this command from the root directory to install all necessary dependencies and build the application.

```bash
yarn
```

--------------------------------

### Bind Custom Getting Started Widget Factory

Source: https://theia-ide.org/docs/blueprint_documentation

Bind a custom `WidgetFactory` for Theia's `GettingStartedWidget` to customize the welcome page. This example shows binding `TheiaBlueprintGettingStartedWidget`.

```typescript
    bind(TheiaBlueprintGettingStartedWidget).toSelf();
    bind(WidgetFactory).toDynamicValue(context => ({
        id: GettingStartedWidget.ID,
        createWidget: () => context.container.get<TheiaBlueprintGettingStartedWidget>(TheiaBlueprintGettingStartedWidget),
    })).inSingletonScope();
```

--------------------------------

### Console Output of Custom Task

Source: https://theia-ide.org/docs/tasks

Example console output demonstrating the start and finish logs of a custom task with a 5000ms delay.

```log
root INFO Start running custom task: 42
root INFO Finished running custom task: 42
```

--------------------------------

### Install Dependencies and Build Theia IDE

Source: https://theia-ide.org/docs/blueprint_documentation

Run 'yarn && yarn build' from the repository root to install all dependencies, link your extension, and build the application.

```bash
yarn && yarn build
```

--------------------------------

### Example settings.json Configuration

Source: https://theia-ide.org/docs/preferences

Illustrates common preference settings for the editor, file watching, and language-specific configurations.

```json
{
    // Enable/Disable line numbers in the editor
    "editor.lineNumbers": "on",
    
    // Tab width in the editor
    "editor.tabSize": 4,
    
    // File watcher exclusions
    "files.watcherExclude": {
        "**/node_modules": true,
        "**/.git": true
    },
    
    // Language-specific settings
    "[typescript]": {
        "editor.formatOnSave": true
    }
}
```

--------------------------------

### Install VS Code Extension Tools

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Installs the necessary tools for generating and packaging VS Code extensions.

```bash
npm install -g yo generator-code
npm install -g vsce

yo code
# take a look at the generated package.json defining a command "Hello World"
# take a look at the src/extension.ts registering a command handler
# make changes to the README and the code, if you like
vsce package
```

--------------------------------

### Start Application with Frontend Application Contribution

Source: https://theia-ide.org/docs/frontend_application_contribution

Use `onStart` to execute logic every time the application starts, even before the shell is attached. This can be combined with `FrontendApplicationStateService` to open views or perform actions after specific states are reached.

```typescript
@injectable()
export class MyViewContribution extends AbstractViewContribution<MyViewWidget>
    implements FrontendApplicationContribution {
   …
   @inject(FrontendApplicationStateService)
   protected readonly stateService: FrontendApplicationStateService;
   …
   async onStart(app: FrontendApplication): Promise<void> {
       this.stateService.reachedState('ready').then(
           () => this.openView({ reveal: true })
       );
   }
}
```

--------------------------------

### Prompt Example with Tool Functions

Source: https://theia-ide.org/docs/theia_ai

Illustrates how to reference available tool functions within a prompt for an LLM.

```plaintext
Use the following functions to access the workspace:
- ~{getWorkspaceFileList}
- ~{getFileContent}.
```

--------------------------------

### Configure Plugins Location in Startup Script

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Add the `--plugins` command-line parameter to the `start` script in your application's `package.json`. This ensures the plugins directory is set when the application starts.

```json
{
  ...
  "name": "browser-app",
  ...
  "scripts": {
    ...
    "start": "theia start --plugins=local-dir:../plugins",
  },
  "theia": {
    "target": "browser"
  }
}
```

--------------------------------

### Enable Runtime Extension Installation

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Add `@theia/vsx-registry` as a dependency to your `package.json` to allow users to install VS Code extensions at runtime. This provides an 'Extensions' view for searching and installing from OpenVSX.

```json
{
  ...
  "name": "browser-app",
  "dependencies": {
    "@theia/core": "latest",
    ...
    "@theia/vsx-registry": "latest"
  },
  "theia": {
    "target": "browser"
  }
}
```

--------------------------------

### Install and Scaffold Theia Project

Source: https://theia-ide.org/docs/composing_applications

Installs Yeoman and the Theia extension generator, then scaffolds a new Theia application project named 'my-theia-app' with a 'Hello World' extension.

```bash
npm install -g yo generator-theia-extension
mkdir my-theia-app
cd my-theia-app
yo theia-extension # select the 'Hello World' option and complete the prompts
```

--------------------------------

### Run Theia IDE Application

Source: https://theia-ide.org/docs/blueprint_documentation

Start the Theia IDE application using 'yarn (browser|electron) start' to test your integrated extension.

```bash
yarn (browser|electron) start
```

--------------------------------

### Windows Local Server Configuration Example

Source: https://theia-ide.org/docs/user_ai

Shows how to configure a local MCP server on Windows using a command interpreter to ensure correct path handling.

```json
{
    "filesystem": {
        "command": "cmd",
        "args": ["/C", "npx -y @modelcontextprotocol/server-filesystem /Users/YOUR_USERNAME/Desktop"],
        "env": {
          "CUSTOM_ENV_VAR": "custom-value"
        }
      }
}
```

--------------------------------

### Example Slash Command Definition

Source: https://theia-ide.org/docs/user_ai

An example of a slash command definition for explaining programming concepts. It includes metadata and a prompt template that uses the `$ARGUMENTS` placeholder.

```yaml
---
isCommand: true
commandName: explain
commandDescription: Explain a programming concept
commandArgumentHint: concept to explain
commandAgents:
  - Universal
---
Please provide a clear and concise explanation of $ARGUMENTS.
Include examples where appropriate.
```

--------------------------------

### Define Example Command

Source: https://theia-ide.org/docs/contribution_filter

Defines an example command that will be filtered out later. This is a prerequisite for demonstrating the filtering mechanism.

```typescript
import { Command } from '@theia/core/lib/common';

export namespace SampleFilteredCommand {

    const EXAMPLE_CATEGORY = 'Examples';

    export const TO_BE_FILTERED: Command = {
        id: 'example_command.filtered',
        category: EXAMPLE_CATEGORY,
        label: 'This command should be filtered out'
    };
}
```

--------------------------------

### Register Example Command

Source: https://theia-ide.org/docs/contribution_filter

Registers the example command with Theia's command registry. This command is intended to be filtered out in a subsequent step.

```typescript
import { CommandContribution, CommandRegistry } from '@theia/core/lib/common';
import { injectable } from 'inversify';

@injectable()
export class SampleFilteredCommandContribution implements CommandContribution {

    registerCommands(commands: CommandRegistry): void {
        commands.registerCommand(SampleFilteredCommand.TO_BE_FILTERED, { execute: () => { } });
    }
}
```

--------------------------------

### Example MCP Server Configuration

Source: https://theia-ide.org/docs/user_ai

Demonstrates the structure for configuring various local and remote MCP servers, including command-line execution, environment variables, and server URLs.

```json
{
  "brave-search": {
    "command": "npx",
    "args": [
      "-y",
      "@modelcontextprotocol/server-brave-search"
    ],
    "env": {
      "BRAVE_API_KEY": "YOUR_API_KEY"
    },
    "autostart": false
  },
  "filesystem": {
    "command": "npx",
    "args": [
      "-y",
      "@modelcontextprotocol/server-filesystem",
      "/Users/YOUR_USERNAME/Desktop"
    ],
    "env": {
      "CUSTOM_ENV_VAR": "custom-value"
    }
  },
  "git": {
    "command": "uv",
    "args": [
      "--directory",
      "/path/to/repo",
      "run",
      "mcp-server-git"
    ]
  },
  "git2": {
    "command": "uvx",
    "args": [
      "mcp-server-git",
      "--repository",
      "/path/to/otherrepo"
    ]
  },
  "jira": {
    "serverUrl": "YOUR_JIRA_MCP_SERVER_URL",
    "serverAuthToken": "YOUR_JIRA_MCP_SERVER_TOKEN"
  },
  "cloudflare": {
    "serverUrl": "https://demo-day.mcp.cloudflare.com/sse"
  }
}
```

--------------------------------

### Example of Invoking Brave Search Function

Source: https://theia-ide.org/docs/user_ai

An example demonstrating how to use the brave_web_search function from the brave-search MCP server. This integrates external search capabilities into AI workflows.

```text
~{mcp_brave-search_brave_web_search}
```

--------------------------------

### Extension Package.json Example

Source: https://theia-ide.org/docs/blueprint_documentation

Locate the 'name' and 'version' fields in your extension's package.json. These are required for adding the extension as a dependency.

```json
{
  "name": "hello-world",
  "version": "0.0.0",
  ...
}
```

--------------------------------

### Example Backend Application Log Output

Source: https://theia-ide.org/docs/backend_application_contribution

This is an example of the log output generated by the MemoryTracker backend contribution, showing memory usage changes over time.

```log
root INFO Theia app listening on http://localhost:3000.
root INFO Configuration directory URI: 'file:///home/foobar/.theia'
root INFO [Fri, 20 Aug 2021 12:20:43 GMT] PID 46590 uses 18.14 MB (+18.14)
root INFO [Fri, 20 Aug 2021 12:20:47 GMT] PID 46590 uses 18.94 MB (+0.80)
root INFO [Fri, 20 Aug 2021 12:20:51 GMT] PID 46590 uses 15.25 MB (-3.69)
root INFO [Fri, 20 Aug 2021 12:21:07 GMT] PID 46590 uses 15.36 MB (+0.11)
root INFO [Fri, 20 Aug 2021 12:21:21 GMT] PID 46590 uses 15.47 MB (+0.11)
root INFO [Fri, 20 Aug 2021 12:21:41 GMT] PID 46590 uses 15.6 MB (+0.13)
root INFO [Fri, 20 Aug 2021 12:21:59 GMT] PID 46590 uses 15.71 MB (+0.11)
```

--------------------------------

### Install Native Dependencies with Manual Headers Download

Source: https://theia-ide.org/docs/composing_applications

Use this command to install dependencies when node-gyp fails due to proxy issues. It requires manually downloading the node-gyp headers tarball and specifying its path via the NPM_CONFIG_TARBALL environment variable.

```bash
npm_config_tarball=/path/to/node-v8.15.0-headers.tar.gz yarn install
```

--------------------------------

### Register a Keybinding

Source: https://theia-ide.org/docs/commands_keybindings

Implement `KeybindingContribution` to register a new keybinding. This example shows how to bind 'alt+enter' to the 'Helloworld.command' when the editor is focused and open.

```typescript
export class HelloworldKeybindingContribution implements KeybindingContribution {
    registerKeybindings(keybindings: KeybindingRegistry): void {
        keybindings.registerKeybinding({
            keybinding: "alt+enter",
            command: 'Helloworld.command',
            when: 'editorFocus && editorIsOpen'
        });
    }
}
```

--------------------------------

### Install Claude Agent SDK

Source: https://theia-ide.org/docs/user_ai

Install the necessary SDK for Theia IDE integration with Claude Code. This package is required for Theia to communicate with Claude Code.

```bash
npm install -g @anthropic-ai/claude-agent-sdk
```

--------------------------------

### Configure Language-Specific Preferences in settings.json

Source: https://theia-ide.org/docs/preferences

Example of how to set language-specific overrides for preferences like `editor.tabSize` within the `settings.json` file.

```json
// In settings.json
{
    "editor.tabSize": 4,
    "[typescript]": {
        "editor.tabSize": 2
    },
    "[python]": {
        "editor.tabSize": 4
    }
}
```

--------------------------------

### Propose File Modifications with Change Sets

Source: https://theia-ide.org/docs/theia_ai

This example demonstrates how an agent can create a change set and add elements for adding, modifying, and deleting files. It shows the basic structure for proposing file changes to a user for review.

```typescript
override async invoke(request: ChatRequestModelImpl): Promise<void> {
        // ...
        const fileToAdd = root.resource.resolve('hello/new-file.txt');
        const fileToChange = // some file to change
        const fileToDelete = // Some file to delete

        const chatSessionId = request.session.id;
        const changeSet = new ChangeSetImpl('My Test Change Set');
        changeSet.addElement(
            this.fileChangeFactory({
                uri: fileToAdd,
                type: 'add',
                state: 'pending',
                targetState: 'Hello World!',
                changeSet,
                chatSessionId
            })
        );

        if (fileToChange && fileToChange.resource) {
            changeSet.addElement(
                this.fileChangeFactory({
                    uri: fileToChange.resource,
                    type: 'modify',
                    state: 'pending',
                    targetState: await this.computeTargetState(fileToChange.resource),
                    changeSet,
                    chatSessionId
                })
            );
        }
        if (fileToDelete && fileToDelete.resource) {
            changeSet.addElement(
                this.fileChangeFactory({
                    uri: fileToDelete.resource,
                    type: 'delete',
                    state: 'pending',
                    changeSet,
                    chatSessionId
                })
            );
        }
        request.session.setChangeSet(changeSet);
        request.response.complete();
}
```

--------------------------------

### Direct Preference Access with PreferenceService

Source: https://theia-ide.org/docs/preferences

Use this approach for minimal setups where you only need to register a schema. It allows direct retrieval and setting of preferences, and listening for changes using the `PreferenceService`.

```typescript
import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
import { PreferenceService } from '@theia/core/lib/common/preferences';
import { DisposableCollection } from '@theia/core/lib/common/disposable';

@injectable()
export class MyService {
    @inject(PreferenceService)
    protected readonly preferenceService: PreferenceService;

    private readonly toDispose = new DisposableCollection();

    getTimeout(): number {
        return this.preferenceService.get('myExtension.timeout', 5000);
    }

    async setTimeout(value: number): Promise<void> {
        await this.preferenceService.set('myExtension.timeout', value);
    }

    // Listen for changes
    @postConstruct()
    protected init(): void {
        this.toDispose.push(
            this.preferenceService.onPreferenceChanged(event => {
                if (event.preferenceName === 'myExtension.timeout') {
                    const newValue = this.preferenceService.get('myExtension.timeout', 5000);
                    console.log('Timeout changed to:', newValue);
                }
            })
        );
    }

    // Dispose the collection when the service is disposed or reinitialized
    dispose(): void {
        this.toDispose.dispose();
    }
}
```

--------------------------------

### Get and Set Resource-Specific Preferences

Source: https://theia-ide.org/docs/preferences

Demonstrates how to retrieve a preference for a specific file URI and set a preference for a particular folder URI.

```typescript
// Get preference for a specific file
const encoding = this.preferenceService.get('files.encoding', 'utf8', fileUri);

// Set preference for a specific folder
await this.preferenceService.set('files.encoding', 'utf16', PreferenceScope.Folder, folderUri);
```

--------------------------------

### Example Business Model Interface and Data

Source: https://theia-ide.org/docs/tree_widget

Defines the structure for tree items, including name, optional children, quantity, and backOrdered status. Provides a static example data structure for a simple tree.

```typescript
export interface Item {
    name: string;
    children?: Item[]; // only for category/container nodes
    quantity?: number; // only for concrete items
    backOrdered?: boolean; // will be used for a later feature below
}

const EXAMPLE_DATA: Item[] = [{
    name: 'Fruits',
    children: [
        {
            name: 'Apples',
            children: [{ name: 'Golden Delicious', quantity: 4 },
            // ... more properties
        },
        // ... more children
    ]
},
// ... more elements
];
```

--------------------------------

### TaskServer Client Setup

Source: https://theia-ide.org/docs/json_rpc

Within the RpcConnectionHandler's factory, this code retrieves the TaskServer from the container, sets its client, and returns the TaskServer instance to be exposed over RPC.

```typescript
            const taskServer = ctx.container.get<TaskServer>(TaskServer);
            taskServer.setClient(client);
            return taskServer;
        }
```

--------------------------------

### Implement MemoryTracker Backend Contribution

Source: https://theia-ide.org/docs/backend_application_contribution

Implement the BackendApplicationContribution interface to hook into the backend lifecycle. The initialize() method is used here to start a timer for logging memory usage.

```typescript
@injectable()
export class MemoryTracker implements BackendApplicationContribution {

   @inject(ILogger)
   protected readonly logger: ILogger;
   protected logTimer: NodeJS.Timer;
   protected memoryUsed = 0;

   initialize(): MaybePromise<void> {
       this.logTimer = setInterval(() => this.logMemory(), 2000);
   }

   protected logMemory(): void {
       const currentMemoryUsed = this.currentRoundedMemoryUsage();
       const diff = currentMemoryUsed - this.memoryUsed;
       if (Math.abs(diff) > 0.1) {
           const timestamp = new Date().toUTCString();
           this.logger.info(
               `[${timestamp}] PID ${process.pid} uses ${currentMemoryUsed} MB (${diff > 0 ? '+' : ''}${diff.toFixed(2)})`
           );
           this.memoryUsed = currentMemoryUsed;
       }
   }

   protected currentRoundedMemoryUsage() {
       return Math.round(process.memoryUsage().heapUsed / 1024 / 1024 * 100) / 100;
   }

   onStop(): void {
       if (this.logTimer) {
           clearInterval(this.logTimer);
       }
   }
}
```

--------------------------------

### Configure Custom HTTP Endpoint

Source: https://theia-ide.org/docs/backend_application_contribution

Example of how to configure a custom HTTP endpoint '/myendpoint' within a backend application contribution.

```typescript
import {
    injectable
} from '@theia/core/shared/inversify';
import {
    json
} from 'body-parser';
import {
    Application,
    Router
} from '@theia/core/shared/express';
import {
    BackendApplicationContribution
} from '@theia/core/lib/node/backend-application';

@injectable()
export class MyCustomEndpoint implements BackendApplicationContribution {
    configure(app: Application): void {
        app.get('/myendpoint', (request, response) => {
            …
        });
    }
}
```

--------------------------------

### Configure Plugins Location via Command Line

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Use the `--plugins` command-line option when starting Theia to specify the directory for VS Code extensions. This is a common approach for browser or electron applications.

```bash
theia start --plugins=local-dir:../plugins
```

--------------------------------

### Custom Agent YAML Configuration

Source: https://theia-ide.org/docs/user_ai

Example YAML configuration for defining a custom agent. Adapt properties like id, name, description, prompt, and defaultLLM to your specific needs.

```yaml
- id: obfuscator
  name: Obfuscator
  description: This is an example agent. Please adapt the properties to fit your needs.
  prompt: Obfuscate the following code so that no human can understand it anymore. Preserve the functionality.
  defaultLLM: default/universal
```

--------------------------------

### Dependency Injection Examples

Source: https://theia-ide.org/docs/services_and_contributions

Demonstrates different ways to inject services using dependency injection: in the constructor, as a field, and in an initialization function. Ensure the component is marked with `@injectable` and registered with the DI container.

```typescript
// Injection in the constructor.
constructor(@inject(MessageService) private readonly messageService: MessageService) { } 

// Injection as a field.
@inject(MessageService)
protected readonly messageService!: MessageService;

// Injection in an initialization function (will be called after the constructor and after injecting fields.
@postConstruct()
protected async init(@inject(MessageService) private readonly messageService: MessageService) { }
```

--------------------------------

### Import Custom CSS for Tree Nodes

Source: https://theia-ide.org/docs/tree_widget

Import a CSS file to define styles for custom tree node classes. This example imports './treeview-example-widget.css'.

```typescript
import '../../src/browser/styles/treeview-example-widget.css';
```

--------------------------------

### Set Theia Plugin Directory via Environment Variable

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Use this environment variable if running 'theia start' directly to specify the directory containing plugins.

```shell
export THEIA_DEFAULT_PLUGINS=local-dir:plugins
```

--------------------------------

### Install Node Modules with Flags

Source: https://theia-ide.org/docs/consume_theia_fixes_master

Update your application's node_modules, ensuring all files are checked and skipping unnecessary script execution. This step is crucial after modifying resolutions.

```bash
yarn install --check-files --ignore-scripts
```

--------------------------------

### Example Prompt for Theia Command Identification

Source: https://theia-ide.org/docs/theia_ai

This prompt instructs the LLM to return executable Theia commands in a stringified JSON format, including the command ID and any arguments. It requires dynamic population of known Theia commands.

```plaintext
You are a service that helps users find commands to execute in an IDE.  
You reply with stringified JSON Objects that tell the user which command to execute and its arguments, if any.

Example:

```json
{
   "type": "theia-command",
   "commandId": "workbench.action.selectIconTheme"
}
```

Here are the known Theia commands:

Begin List:  
{{command-ids}}
End List
```

--------------------------------

### Configure Local MCP Server

Source: https://theia-ide.org/docs/user_ai

Configure a local MCP server by providing the executable command, arguments, and optional environment variables. The autostart option controls automatic startup on IDE launch.

```text
KEY=value
```

--------------------------------

### Creating a Skill with YAML Frontmatter and Markdown

Source: https://theia-ide.org/docs/user_ai

Define a skill by creating a directory with a SKILL.md file. The file must contain YAML frontmatter for name and description, followed by markdown content for instructions.

```markdown
---
name: code-review
description: Provides guidelines for performing thorough code reviews focusing on quality, maintainability, and best practices.
---

# Code Review Skill

## Overview
This skill provides instructions for performing comprehensive code reviews.

## Review Checklist
1. **Code Quality**: Check for clean, readable, and maintainable code
2. **Error Handling**: Ensure proper error handling and edge cases
3. **Performance**: Look for potential performance issues
4. **Security**: Check for security vulnerabilities
5. **Testing**: Verify adequate test coverage

## Guidelines
- Be constructive and respectful in feedback
- Explain the reasoning behind suggestions
- Prioritize issues by severity
- Suggest improvements, not just point out problems
```

--------------------------------

### Configure Additional Skill Directories

Source: https://theia-ide.org/docs/user_ai

Add custom directories for Theia IDE to discover skills from. Use '~' to reference your home directory.

```json
{
  "ai-features.skills.skillDirectories": [
    "~/my-skills",
    "/shared/team-skills"
  ]
}
```

--------------------------------

### Register Backend Application Contribution

Source: https://theia-ide.org/docs/backend_application_contribution

Bind an implementation of BackendApplicationContribution in the backend module to register it. This example binds a MemoryTracker service.

```typescript
export default new ContainerModule(bind => {
   bind(MemoryTracker).toSelf().inSingletonScope();
   bind(BackendApplicationContribution).toService(MemoryTracker);
});
```

--------------------------------

### Getting WebSocket Connection

Source: https://theia-ide.org/docs/json_rpc

This line shows how to retrieve the WebSocketConnectionProvider from the container, which is essential for establishing a connection to create an RPC proxy.

```typescript
const connection = ctx.container.get(WebSocketConnectionProvider);
```

--------------------------------

### Custom Tab Bar Renderer for Preview

Source: https://theia-ide.org/docs/enhanced_tab_bar_preview

Extend `TabBarRenderer` to override `renderExtendedTabBarPreview` for custom preview content. This example only renders the caption.

```typescript
export class CustomTabBarRenderer extends TabBarRenderer {
    protected override renderExtendedTabBarPreview = (title: Title<Widget>) => {
        const hoverBox = document.createElement('div');
        hoverBox.classList.add('theia-horizontal-tabBar-hover-div');
        const labelElement = document.createElement('p');
        labelElement.classList.add('theia-horizontal-tabBar-hover-title');
        labelElement.textContent = title.label;
        hoverBox.append(labelElement);
        return hoverBox;
    };
}

```

--------------------------------

### Getting Task Watcher

Source: https://theia-ide.org/docs/json_rpc

This line demonstrates retrieving the TaskWatcher from the container. The TaskWatcher is used to receive notifications about events from the backend via its client.

```typescript
const taskWatcher = ctx.container.get(TaskWatcher);
```

--------------------------------

### Initialize Layout with Frontend Application Contribution

Source: https://theia-ide.org/docs/frontend_application_contribution

Implement the `initializeLayout` method to open a view after the application shell layout is initialized. This is ideal for setting up initial workbench layouts that won't be overridden by user changes.

```typescript
@injectable()
export class MyViewContribution extends AbstractViewContribution<MyViewWidget>
    implements FrontendApplicationContribution {
   …
   async initializeLayout(app: FrontendApplication): Promise<void> {
       await this.openView();
   }
   …
```

--------------------------------

### Handling Drag Start Event in TreeWidget

Source: https://theia-ide.org/docs/tree_widget

Sets the data for the drag operation, storing the tree node's ID for local drag and drop.

```typescript
    protected handleDragStartEvent(node: TreeNode, event: React.DragEvent): void {
        event.stopPropagation();
        if (event.dataTransfer) {
            event.dataTransfer.setData('tree-node', node.id);
        }
    }
```

--------------------------------

### Run Unpackaged Theia IDE Application

Source: https://theia-ide.org/docs/blueprint_documentation

Execute this command to run the application directly, useful for development and testing without full packaging.

```bash
yarn electron start
```

--------------------------------

### Custom Task Resolver Implementation

Source: https://theia-ide.org/docs/tasks

Resolves and enhances task configurations before execution. This example adds a 'myCustomValue' property set to 42 to the task configuration.

```typescript
class MyTaskResolver implements TaskResolver {
    async resolveTask(taskConfig: TaskConfiguration):Promise<TaskConfiguration> {
        return {...taskConfig, myCustomValue: 42 }
    }
}
```

--------------------------------

### Theia Application Monorepo Configuration

Source: https://theia-ide.org/docs/composing_applications

Root package.json for a Theia monorepo, defining workspaces, Lerna, and scripts for building, starting, and watching browser and Electron applications.

```json
{
  "private": true,
  "engines": {
    "yarn": ">=1.7.0 <2",
    "node": ">=18"
  },
  "scripts": {
    "build:browser": "yarn --cwd browser-app bundle",
    "build:electron": "yarn --cwd electron-app bundle",
    "prepare": "lerna run prepare",
    "postinstall": "theia check:theia-version",
    "start:browser": "yarn --cwd browser-app start",
    "start:electron": "yarn --cwd electron-app start",
    "watch:browser": "lerna run --parallel watch --ignore electron-app",
    "watch:electron": "lerna run --parallel watch --ignore browser-app"
  },
  "devDependencies": {
    "lerna": "2.4.0"
  },
  "workspaces": [
    "hello-world", "browser-app", "electron-app"
  ]
}
```

--------------------------------

### Download VS Code Extensions at Build Time

Source: https://theia-ide.org/docs/authoring_vscode_extensions

Configure `package.json` to specify the plugins directory and define VS Code extensions to be downloaded using the `theia download:plugins` command. This approach automates the inclusion of extensions.

```json
{
  ...
  "scripts": {
    "prepare": "yarn run clean && yarn build && yarn run download:plugins",
    "download:plugins": "theia download:plugins",
    ...
  },
  "theiaPluginsDir": "plugins",
  "theiaPlugins": {
      "my-hello-world-extension": "https://<url-to-your-published-extension>",
      "vscode.git": "https://open-vsx.org/api/vscode/git/1.52.1/file/vscode.git-1.52.1.vsix",
      ...
  }
}
```

--------------------------------

### Implement Treeview Example Decoration Service

Source: https://theia-ide.org/docs/tree_widget

Subclass AbstractTreeDecoratorService to define a custom contribution point for tree decorations. This service is responsible for collecting decorator contributions.

```typescript
export const TreeviewExampleDecorator = Symbol('TreeviewExampleDecorator');

@injectable()
export class TreeviewExampleDecorationService extends AbstractTreeDecoratorService {
    constructor(@inject(ContributionProvider) @named(TreeviewExampleDecorator) protected readonly contributions: ContributionProvider<TreeDecorator>) {
        super(contributions.getContributions());
    }
}
```

--------------------------------

### Configure Remote MCP Server

Source: https://theia-ide.org/docs/user_ai

Configure a remote MCP server by providing its URL, an optional authentication token, and custom headers. The autostart option controls automatic startup on IDE launch.

```text
Header-Name=value
```

--------------------------------

### Custom Task Provider Implementation

Source: https://theia-ide.org/docs/tasks

Provides a custom task configuration. This example registers a single task labeled 'My Custom Task' with the type 'myTaskType'.

```typescript
class MyTaskProvider implements TaskProvider {
   async provideTasks(): Promise<TaskConfiguration[]> {
       return [{
           label: 'My Custom Task',
           type: 'myTaskType',
           _scope: 'MyTaskProvider'
       }];
   }
}
```

--------------------------------

### Add Name and Description to Capability Fragment

Source: https://theia-ide.org/docs/theia_ai

Provide human-readable names and tooltips for capability chips by adding YAML frontmatter to the backing prompt fragment file. The 'name' and 'description' fields are used for display and are stripped before sending to the LLM.

```yaml
---
name: Shell Execution
description: Allows the agent to run shell commands on the host system.
---
Your prompt fragment content here...
```

--------------------------------

### Package Theia IDE for Current OS

Source: https://theia-ide.org/docs/blueprint_documentation

Packages the application into an executable file for your current operating system. The output is located in `applications/electron/dist`.

```bash
yarn electron package
```

--------------------------------

### Use CreateSkill Agent to Generate a Skill

Source: https://theia-ide.org/docs/user_ai

Initiate skill creation by mentioning the @CreateSkill agent and describing the desired skill. The agent generates a SKILL.md file.

```chat
@CreateSkill Create a skill for documenting TypeScript functions that includes JSDoc conventions and example formats
```

--------------------------------

### Configure Show Window Early Behavior

Source: https://theia-ide.org/docs/blueprint_documentation

Control whether the main window or splash screen is shown before it's ready to render content by setting `theia.frontend.config.electron.showWindowEarly` in your application's `package.json`. Defaults to `true`.

```json
 "theia.frontend.config.electron.showWindowEarly": false
```

--------------------------------

### Custom CSS for Tree Node Icons

Source: https://theia-ide.org/docs/tree_widget

Example CSS to apply padding to icons within tree nodes identified by the 'theia-example-tree-node' class. This targets child elements with the class 'a'.

```css
.theia-example-tree-node .a {
    padding-right: 4px;
}
```

--------------------------------

### Registering a Task Service

Source: https://theia-ide.org/docs/json_rpc

This snippet demonstrates how to bind a ConnectionHandler for a TaskServer, exposing it to the frontend via RPC. It sets up the RpcConnectionHandler with the task path and a factory function to create and configure the TaskServer.

```typescript
import { ContainerModule } from '@theia/core/shared/inversify';
import { ConnectionHandler, RpcConnectionHandler } from '@theia/core/lib/common/messaging';
import { TaskClient, TaskServer, taskPath } from '../common/task-protocol';

    bind(ConnectionHandler).toDynamicValue(ctx =>
        new RpcConnectionHandler<TaskClient>(taskPath, client => {
            const taskServer = ctx.container.get<TaskServer>(TaskServer);
            taskServer.setClient(client);
            return taskServer;
        })    ).inSingletonScope();
```
Tokens:
Raw