You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by da...@apache.org on 2026/08/08 18:39:12 UTC

(camel-website) branch blog/camel-tui-editor created (now 15e70ac1)

This is an automated email from the ASF dual-hosted git repository.

davsclaus pushed a change to branch blog/camel-tui-editor
in repository https://gitbox.apache.org/repos/asf/camel-website.git


      at 15e70ac1 blog: Add TUI editor screenshots to follow-up blog post

This branch includes the following new commits:

     new e9d424f6 blog: Draft Camel TUI editor follow-up blog post
     new 15e70ac1 blog: Add TUI editor screenshots to follow-up blog post

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.



(camel-website) 01/02: blog: Draft Camel TUI editor follow-up blog post

Posted by da...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

davsclaus pushed a commit to branch blog/camel-tui-editor
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit e9d424f63fe38168902ea2353fa402f9c23589e5
Author: Claus Ibsen <cl...@gmail.com>
AuthorDate: Fri Aug 7 22:15:48 2026 +0200

    blog: Draft Camel TUI editor follow-up blog post
    
    Co-Authored-By: Claude Opus 4.6 <no...@anthropic.com>
    Signed-off-by: Claus Ibsen <cl...@gmail.com>
---
 content/blog/2026/08/camel-tui-editor/index.md | 136 +++++++++++++++++++++++++
 1 file changed, 136 insertions(+)

diff --git a/content/blog/2026/08/camel-tui-editor/index.md b/content/blog/2026/08/camel-tui-editor/index.md
new file mode 100644
index 00000000..08528af5
--- /dev/null
+++ b/content/blog/2026/08/camel-tui-editor/index.md
@@ -0,0 +1,136 @@
+---
+title: "Camel TUI: A Low-Code YAML Editor in Your Terminal"
+date: 2026-08-13
+draft: false
+authors: [davsclaus]
+categories: ["Tooling"]
+keywords: ["apache camel", "tui", "terminal", "yaml", "editor", "low-code", "tab completion", "AI"]
+preview: "The Camel TUI now includes a built-in YAML DSL editor with intelligent Tab completion, validation on save, and support for four AI providers in the AI prompt panel."
+---
+
+<!-- TODO: Add screenshots before publishing:
+  1. Tab completion popup showing EIP or component names
+  2. Validation error popup on save
+  3. Inline quick docs overlay
+  4. AI prompt panel (F8) in action
+-->
+
+Two weeks ago we [introduced the Camel TUI](/blog/2026/07/camel-tui/) -- a terminal dashboard for
+monitoring and managing Apache Camel integrations. Since then, development has continued at a rapid
+pace. This post covers the latest additions landing in Camel 4.22.
+
+## Open Any Project
+
+You can now launch the TUI directly from any existing Camel project -- Spring Boot, Quarkus,
+or Camel Main -- by pointing it at the project directory:
+
+```bash
+camel tui .
+```
+
+The TUI detects the project type from `pom.xml`, runs it, and gives you the full dashboard
+experience for troubleshooting or light development. No extra setup, no plugins to install --
+just point the TUI at your project and go.
+
+## A Low-Code YAML Editor
+
+The biggest addition is a built-in source editor in the Source tab. What started as a read-only
+source viewer with inline documentation has evolved into a mini low-code editor for Camel YAML DSL
+routes and `application.properties` files.
+
+### Tab Completion
+
+Press **Tab** anywhere in a YAML route file, and the editor offers context-aware completions:
+
+- **EIP names** -- `choice`, `split`, `aggregate`, `filter`, and all other EIPs. The autocomplete
+  popup shows the EIP category label (routing, transformation, error handling, etc.) to help you
+  pick the right one.
+- **EIP options** -- After selecting an EIP, Tab again to see its available options with placeholder
+  values.
+- **Component names** -- Type a `to:` or `from:` URI and Tab to browse all available components.
+- **Endpoint options** -- After the component name, Tab to see the endpoint's query parameters.
+- **Expressions and data formats** -- Tab completion for expression languages (`simple`, `jsonpath`,
+  `xpath`, etc.) and data format options (`json-jackson`, `csv`, `avro`, etc.).
+- **`application.properties`** -- Tab completion for `camel.*` configuration keys, including
+  Spring Boot configuration metadata when available.
+
+The completion engine is tree-driven, generated from the canonical YAML DSL schema and the Camel
+catalog metadata. It understands the nesting structure of the YAML DSL, so completions are
+scoped to where you are in the document -- you only see options that are valid at the current
+cursor position.
+
+### Validate on Save
+
+When you save a file (Ctrl+S), the editor validates the content:
+
+- **YAML route files** are validated against the Camel YAML DSL schema. Errors are shown in a
+  popup with the line number and description.
+- **`application.properties`** files have their `camel.*` keys validated against the catalog,
+  catching typos in property names.
+
+### Editor Features
+
+The editor also includes:
+
+- **Inline quick docs** -- press `i` to toggle inline documentation for the component or EIP
+  under the cursor.
+- **Cross-route navigation** -- jump indicators show where routes connect to each other
+  (via `direct`, `seda`, etc.), and you can jump between them.
+- **Confirm before discard** -- pressing Esc with unsaved changes prompts for confirmation.
+- **Row:col indicator** in the status bar so you know where you are.
+- **Plain mode** (toggle with a key) strips syntax coloring for easy copy/paste.
+
+The combination of Tab completion, validation, and inline docs means you can write and iterate
+on Camel routes without leaving the terminal -- a low-code experience for the command line.
+
+## AI Panel: Bring Your Own LLM
+
+The F8 AI prompt panel now supports a wide range of LLM providers:
+
+- **Anthropic** (Claude) -- auto-detected when `ANTHROPIC_API_KEY` is set, including Vertex AI.
+- **Azure OpenAI** -- auto-detected when `AZURE_OPENAI_API_KEY` and `AZURE_OPENAI_ENDPOINT` are set.
+- **Google Gemini** -- auto-detected when `GEMINI_API_KEY` is set.
+- **OpenAI** (and any OpenAI-compatible API) -- when `OPENAI_API_KEY` is set. Works with any provider
+  that implements the OpenAI API (Groq, Together, etc.) by setting a custom URL.
+- **IBM watsonx.ai** -- auto-detected when `WATSONX_API_KEY` and `WATSONX_PROJECT_ID` are set.
+- **Ollama** -- for local models, auto-detected when Ollama is running on localhost.
+
+The panel auto-detects which provider to use based on your environment variables, so you just
+set the key and start chatting. You can also switch providers on the fly from within the panel.
+Token usage is tracked per conversation with cumulative cost estimates.
+
+The TUI also comes with a built-in MCP server, so any external AI coding assistant
+(Claude Code, Cursor, Windsurf, etc.) can connect to the TUI and observe, interact with,
+and control your running Camel application from the outside -- reading routes, errors, traces,
+sending messages, stopping routes, and more.
+
+## Other Improvements
+
+A few more additions since the intro blog:
+
+- **HTTP probe** -- A lightweight Postman-like tool for sending HTTP requests to your running
+  application's endpoints, directly from the TUI.
+- **Secrets tab** -- Browse secrets from configured vault providers (AWS, Azure, GCP, HashiCorp, CyberArk).
+- **JFR tab** -- View Java Flight Recorder runtime events (route, processor, exchange) when
+  JFR instrumentation is enabled.
+- **Clickable hyperlinks** -- URLs in the HTTP tab and infrastructure service console URLs are
+  now clickable hyperlinks in terminals that support them.
+- **Destructive action confirmations** -- Actions like "Stop All" now prompt for confirmation,
+  configurable in the Settings dialog.
+
+## Try It
+
+All of this ships in Apache Camel 4.22. Install the Camel CLI and try it:
+
+```bash
+curl -fsSL https://camel.apache.org/install.sh | sh
+camel run myRoute.yaml --dev
+```
+
+Then in another terminal:
+
+```bash
+camel tui
+```
+
+Navigate to the Source tab, open a YAML file, and press Tab to see the completion in action.


(camel-website) 02/02: blog: Add TUI editor screenshots to follow-up blog post

Posted by da...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

davsclaus pushed a commit to branch blog/camel-tui-editor
in repository https://gitbox.apache.org/repos/asf/camel-website.git

commit 15e70ac12ffbef1d393c66686a970165f4e6e834
Author: Claus Ibsen <cl...@gmail.com>
AuthorDate: Sat Aug 8 20:38:16 2026 +0200

    blog: Add TUI editor screenshots to follow-up blog post
    
    Co-Authored-By: Claude Opus 4.6 (1M context) <no...@anthropic.com>
---
 .../2026/08/camel-tui-editor/camel-tui-ai-panel.png    | Bin 0 -> 244446 bytes
 .../2026/08/camel-tui-editor/camel-tui-quick-docs.png  | Bin 0 -> 514843 bytes
 .../camel-tui-editor/camel-tui-tab-completion-eip.png  | Bin 0 -> 472817 bytes
 .../camel-tui-tab-completion-kafka.png                 | Bin 0 -> 474731 bytes
 .../08/camel-tui-editor/camel-tui-validation-error.png | Bin 0 -> 455051 bytes
 content/blog/2026/08/camel-tui-editor/index.md         |  17 ++++++++++-------
 6 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/content/blog/2026/08/camel-tui-editor/camel-tui-ai-panel.png b/content/blog/2026/08/camel-tui-editor/camel-tui-ai-panel.png
new file mode 100644
index 00000000..8afa0681
Binary files /dev/null and b/content/blog/2026/08/camel-tui-editor/camel-tui-ai-panel.png differ
diff --git a/content/blog/2026/08/camel-tui-editor/camel-tui-quick-docs.png b/content/blog/2026/08/camel-tui-editor/camel-tui-quick-docs.png
new file mode 100644
index 00000000..0269f7f1
Binary files /dev/null and b/content/blog/2026/08/camel-tui-editor/camel-tui-quick-docs.png differ
diff --git a/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-eip.png b/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-eip.png
new file mode 100644
index 00000000..6db71428
Binary files /dev/null and b/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-eip.png differ
diff --git a/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-kafka.png b/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-kafka.png
new file mode 100644
index 00000000..9fb69367
Binary files /dev/null and b/content/blog/2026/08/camel-tui-editor/camel-tui-tab-completion-kafka.png differ
diff --git a/content/blog/2026/08/camel-tui-editor/camel-tui-validation-error.png b/content/blog/2026/08/camel-tui-editor/camel-tui-validation-error.png
new file mode 100644
index 00000000..8776f825
Binary files /dev/null and b/content/blog/2026/08/camel-tui-editor/camel-tui-validation-error.png differ
diff --git a/content/blog/2026/08/camel-tui-editor/index.md b/content/blog/2026/08/camel-tui-editor/index.md
index 08528af5..99015212 100644
--- a/content/blog/2026/08/camel-tui-editor/index.md
+++ b/content/blog/2026/08/camel-tui-editor/index.md
@@ -8,13 +8,6 @@ keywords: ["apache camel", "tui", "terminal", "yaml", "editor", "low-code", "tab
 preview: "The Camel TUI now includes a built-in YAML DSL editor with intelligent Tab completion, validation on save, and support for four AI providers in the AI prompt panel."
 ---
 
-<!-- TODO: Add screenshots before publishing:
-  1. Tab completion popup showing EIP or component names
-  2. Validation error popup on save
-  3. Inline quick docs overlay
-  4. AI prompt panel (F8) in action
--->
-
 Two weeks ago we [introduced the Camel TUI](/blog/2026/07/camel-tui/) -- a terminal dashboard for
 monitoring and managing Apache Camel integrations. Since then, development has continued at a rapid
 pace. This post covers the latest additions landing in Camel 4.22.
@@ -42,6 +35,10 @@ routes and `application.properties` files.
 
 Press **Tab** anywhere in a YAML route file, and the editor offers context-aware completions:
 
+![Tab completion showing EIP names](camel-tui-tab-completion-eip.png)
+
+![Tab completion showing Kafka endpoint options](camel-tui-tab-completion-kafka.png)
+
 - **EIP names** -- `choice`, `split`, `aggregate`, `filter`, and all other EIPs. The autocomplete
   popup shows the EIP category label (routing, transformation, error handling, etc.) to help you
   pick the right one.
@@ -65,6 +62,8 @@ When you save a file (Ctrl+S), the editor validates the content:
 
 - **YAML route files** are validated against the Camel YAML DSL schema. Errors are shown in a
   popup with the line number and description.
+
+![Validation error popup on save](camel-tui-validation-error.png)
 - **`application.properties`** files have their `camel.*` keys validated against the catalog,
   catching typos in property names.
 
@@ -74,6 +73,8 @@ The editor also includes:
 
 - **Inline quick docs** -- press `i` to toggle inline documentation for the component or EIP
   under the cursor.
+
+![Inline quick docs overlay](camel-tui-quick-docs.png)
 - **Cross-route navigation** -- jump indicators show where routes connect to each other
   (via `direct`, `seda`, etc.), and you can jump between them.
 - **Confirm before discard** -- pressing Esc with unsaved changes prompts for confirmation.
@@ -95,6 +96,8 @@ The F8 AI prompt panel now supports a wide range of LLM providers:
 - **IBM watsonx.ai** -- auto-detected when `WATSONX_API_KEY` and `WATSONX_PROJECT_ID` are set.
 - **Ollama** -- for local models, auto-detected when Ollama is running on localhost.
 
+![AI prompt panel](camel-tui-ai-panel.png)
+
 The panel auto-detects which provider to use based on your environment variables, so you just
 set the key and start chatting. You can also switch providers on the fly from within the panel.
 Token usage is tracked per conversation with cumulative cost estimates.