Skip to Content
The StudioAI Features

AI Features

The Studio integrates Cendra AI throughout the editing experience. Every AI feature uses the same streaming backend (POST /cendra/answer/stream) and is scoped to your current file and repository context.

Ghost Text (AI Autocomplete)

Ghost text is Cendra’s inline autocomplete — similar to GitHub Copilot or Cursor Tab. As you type, Cendra predicts what comes next and renders a greyed-out suggestion after your cursor.

How it works

  1. After 600ms of no typing, the editor sends the cursor context (surrounding lines) to Cendra’s streaming API.
  2. The suggestion appears as italic grey text after the cursor position.
  3. Press Tab to accept the suggestion (the text is inserted).
  4. Press Escape to dismiss.

Ghost text only appears when the cursor is at the end of a line. An in-memory cache avoids redundant API calls for identical contexts.

Toggle

Click Ghost Text: ON/OFF in the status bar to enable or disable ghost text. The editor is fully rebuilt when toggled to apply the change.

AI Code Lens

AI Code Lens analyzes the current file and displays inline intelligence annotations — complexity scores, potential bugs, security risks, and optimization hints.

Annotation categories

CategoryBadge colorDescription
ComplexityBlueCyclomatic complexity score (1–10) for each function. High scores (8+) also produce a squiggly underline.
SecurityRedPotential security issues (e.g. hardcoded secrets, injection risks). Maps to error severity.
BugYellowPotential bugs or logic errors. Maps to warning severity.
PerformancePurplePerformance concerns (e.g. O(n²) loops, missing memoization). Maps to info severity.
QualityGreyCode quality suggestions (e.g. unused variables, missing types).

How analysis runs

Code Lens uses regex-based heuristics (not an LLM) to detect function boundaries, calculate complexity, and flag patterns. This makes it instant — there is no API latency. Analysis re-runs on every file change.

Interacting with annotations

  • Click any annotation badge in the gutter to open it in the Cendra panel, where Cendra explains the issue and suggests fixes.
  • The AI Code Lens panel (toggle via the toolbar button) shows a summary table of all annotations with one-click Fix It actions.

Live diagnostics

Code Lens annotations with severity security, bug, perf, or complexity >= 8 are automatically converted to CodeMirror diagnostics — they appear as squiggly underlines in the editor with hover tooltips.

Inline AI Edit (Ctrl+K)

Press Ctrl+K with your cursor in the editor to open the inline AI edit overlay — describe a change in natural language and Cendra applies it directly.

Workflow

  1. Place your cursor in the editor (optionally select code)
  2. Press Ctrl+K
  3. An overlay appears with a text input: “Describe the change (e.g. ‘add error handling’, ‘refactor to async’)…”
  4. Type your instruction and press Enter (or click Apply)
  5. Cendra generates the edit and applies it to the editor
  6. Press Cancel to close without changes

This is similar to Cursor’s Cmd+K feature — a quick way to make targeted edits without switching to the chat panel.

AI Refactor via Cendra

Select a block of code, then press Ctrl+Shift+R (or use the toolbar button) to open the AI Refactor panel. Describe what you want to change in natural language, and Cendra generates the refactored code with a live side-by-side diff.

Workflow

  1. Select code in the editor (the selected range is shown as line numbers).
  2. Press Ctrl+Shift+R or click the Refactor button.
  3. Describe the change (e.g. “Convert this to async/await”, “Add error handling”, “Extract into a helper function”).
  4. Cendra streams the refactored code. A diff view shows deletions (red) and additions (green).
  5. Click Apply to replace the original code, or Discard to cancel.

The refactored code is applied as a draft — it does not commit anything to the repository.

AI Test Generator

Press Ctrl+Shift+T to generate unit tests for the currently open file. The test generator:

  1. Auto-detects the test framework — scans the project for vitest.config.*, jest.config.*, pytest.ini, conftest.py, or package.json dependencies. Defaults to Vitest if nothing is detected.
  2. Generates tests — Cendra streams a complete test file based on the source code and detected framework.
  3. Save as draft — click “Save as Draft” to save the generated test file alongside the source.

The generated tests include imports, describe blocks, and individual test cases covering the main exports of the file.

Press Ctrl+Shift+F to open the unified search panel. It supports three modes:

ModeDescription
TextGrep-style text search across all files in the repo. Results show file path, line number, and matching content with highlights.
SymbolSearches for functions, classes, and constants by name. Results show the symbol kind (function, class, const), file path, and line number.
AINatural-language search powered by Cendra. Ask questions like “Where is authentication handled?” and get contextual results with explanations.

Results are clickable — selecting a result opens the file at the matching line.

Smart Diff View

The Smart Diff View shows word-level highlighted diffs for file changes. It supports two display modes:

ModeDescription
UnifiedSingle-column view with deletions and additions inline
Side-by-sideTwo-column view with old content on the left and new content on the right

Word-level tokens within modified lines are highlighted individually — added words in green, deleted words in red. A Cendra-generated summary explains what changed at a high level.

AI annotations in diffs

The Smart Diff View includes AI-powered annotation buttons that explain why changes were made — not just what lines changed:

ButtonLocationDescription
✨ AnnotateDiff header (global)Calls Cendra to explain WHY each changed line or block was modified across all files. Generates per-hunk explanations.
✨ Why?Per-file headerExplains WHY the changes in a specific file were made. Appears next to the +additions/−deletions stats for each file.

Annotations appear inline next to the relevant diff hunks. This is unique to Cendriix Studio — no other IDE offers AI-explained diffs.

Cendra Chat Panel

The right-side Cendra panel is a focused, single-thread AI chat scoped to your current repository and file. Ask questions about the code you are editing and Cendra answers grounded in what is on screen.

Features:

  • File context — Cendra knows which file and repo you have open
  • Pinned context — files pinned via the file explorer are always included (see Context Pinning)
  • Stage flow indicator — shows Cendra’s processing steps (Thinking → Policy Check → Knowledge → MCP Tools → Feature)
  • File attachments — drag and drop images or documents into the chat (up to 5 MB)
  • Voice input — click the microphone button to speak your question (see Voice Coding below)
  • Code rendering — responses include syntax-highlighted code blocks

Slash commands

Type / in the Cendra chat input to open the slash command menu. These commands provide quick access to common IDE actions:

CommandDescriptionExecution
/run <cmd>Run a command in the terminalInstant — routes directly to the Devbox terminal, no AI backend call
/edit <instruction>Edit a file in the IDESends to Cendra with edit prompt
/explain [target]Explain code or errorSends to Cendra with explanation prompt
/testRun testsSends to Cendra to execute the test suite
/fix [target]Fix an issue or errorSends to Cendra with fix prompt
/doc [target]Generate documentation / docstringsSends to Cendra to add JSDoc/docstrings
/error <text>Explain terminal error with fixSends to Cendra with error analysis prompt

@ context mentions

Type @ in the chat input to trigger file/folder autocomplete. Select a file or folder from the popup to pin it as context for the current message. This is useful for quickly referencing specific files without navigating the explorer.

PR Review → Fix Loop

The Studio listens for external fix requests from tools like Cendriix Review. When a PR review identifies an issue, it can send a message directly to the Studio IDE, which auto-opens Cendra with a fix prompt.

How it works

  1. An external tool (e.g. Cendriix Review) sends a postMessage event:
    window.postMessage({ type: 'review-issue', issueText: 'Variable name is misleading', filePath: 'src/index.ts', lineNumber: 42 }, '*')
  2. The Studio receives the event and opens the Cendra panel
  3. Cendra automatically sends a fix prompt containing the file path, line number, and issue text
  4. Cendra analyzes the issue and writes the fix directly to the editor

This creates a tight loop between code review and code fixes — review findings become one-click fixes in the IDE.

Voice Coding

The Studio supports voice input via the browser’s Web Speech API. Click the microphone button in the Cendra panel to start dictation.

Supported voice commands

CommandAction
”Hey Cendra, …”Send the spoken text as a Cendra prompt
”Refactor this”Open AI Refactor for the current selection
”Run tests”Trigger the AI Test Generator
”Open file <name>“Open a file by name

A pulsing indicator shows when the microphone is active. Speech is transcribed locally — no audio is sent to the server.

Time Travel

Click the clock icon in the toolbar (or use the command palette → “Show File History”) to enter Time Travel mode. This feature lets you scrub through the session-local edit history of the current file.

Controls

ControlDescription
Timeline sliderDrag to scrub through snapshots. Each tick is a saved version.
Play / PauseAuto-play through the history at 1 snapshot per second.
RestoreReplace the current file content with the selected snapshot.
ExitLeave Time Travel mode and return to the editor.

The diff view highlights changes between the selected snapshot and the latest version — deletions in red, additions in green.

Snapshots are stored in sessionStorage and captured every 1.5 seconds of editing. Up to 50 snapshots per file are retained for the duration of the browser session.

IDE configuration

All IDE-specific Cendra behavior is defined in a single configuration file (ideConfig.ts). This includes:

  • System identity — tells Cendra which repo and workspace it’s operating in
  • Capabilities — enumerates all 9 things Cendra can do (execute commands, write files, git ops, testing, debugging, PR workflow, etc.)
  • Operating rules — explicit ALWAYS DO / NEVER DO instructions (e.g. always use terminal to run commands, never ask permission to build)
  • Response patterns — concrete examples of how Cendra should respond to common requests
  • Slash commands — the 7 commands available via the / menu
  • Context builders — functions that inject active file, open tabs, and pinned context into every request

To change any IDE Cendra behavior, only this single file needs editing.

Last updated on