CodeWebChat Documentation

Technical Documentation: robertpiosik/CodeWebChat

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (`README.md`) Copy Section

Privacy-first Copy Chapter

100% local operation means no code, prompts, or usage data are collected.

Introduction Copy Chapter

Autofill free chatbots in your web browser, send API requests, or headlessly invoke agentic CLIs using markdown prompts with seamless integration. It's free!

[!TIP]

Click ▶ to expand.

Attaching files

Selected files are sent alongside task instructions in a single message.

Effortless context selection

Agentic Search prompt accurately selects relevant files hands-free.

Iterations without context bloat

Refine instructions without dragging old ones in an ever-growing conversation.

Effective steering with examples

Guide the model with broader context for outputs you're looking for.

First-class support for prompt caching

When including selected files, unchanged files are placed first, followed by recently modified ones, and task instructions are placed at the very end.

Markdown Prompts Copy Chapter

📄 Agentic Search Copy Section

Let your favorite agentic harness find relevant files.

CLI

# Task

In the project, find the complete set of primary and structural files relevant to the query.

# Output formatting

Output strictly as a bulleted list of file paths without explanations or any other text (e.g., - `path/to/file.ext`).

# Query

[INSTRUCTIONS]

📄 Editing Copy Section

Implement new features, fix bugs, refactor code.

WEB/API

# Files

[SELECTED FILES]

# Output formatting

Whenever showing a new, updated, renamed, or deleted file, provide a brief explanation, then print the path in a markdown heading (e.g. ### New file: `src/examples/hello.py`, ### Updated file: `src/examples/hello.py`, ### Renamed file: `src/examples/hello.py` (old) `src/welcome.py` (new), ### Deleted file: `src/examples/hello.py`), followed by a markdown code block showing the original and updated code snippets with Git-style merge conflict syntax. Example:

[EXAMPLE]

# Task

[INSTRUCTIONS]

CLI

# Files

[SELECTED FILES]

# Requirements

- All necessary files for the [task](#task) were preloaded to [files](#files). Reading other files is FORBIDDEN.
- Using tools or shell commands for discovery or information gathering (e.g., grep, glob, ls, git, etc.) is FORBIDDEN.
- Exception: If [task](#task) includes *.png image paths, read them using the appropriate tool.
- Exception: Perform file system operations (create, update, delete, rename, move) required to complete the [task](#task).

# Task

[INSTRUCTIONS]

📄 Asking Copy Section

Get explanations, plan features.

WEB/API

# Files

[SELECTED FILES]

# Task

[INSTRUCTIONS]

CLI

# Files

[SELECTED FILES]

# Requirements

- All necessary files for the [task](#task) were preloaded to [files](#files). Reading other files is FORBIDDEN.
- Using tools or shell commands for discovery or information gathering (e.g., grep, glob, ls, git, etc.) is FORBIDDEN.
- Exception: If [task](#task) includes *.png image paths, read them using the appropriate tool.

# Task

[INSTRUCTIONS]

📄 Intelligent Search Copy Section

Narrow-down broader file selection.

WEB

# Files

[WORKSPACE FILES, A FOLDER OR SELECTED FILES]

# Task

Among the attached files, find the complete set of primary and structural files relevant to the query.

# Output formatting

Your response must begin with "**Intelligent file search results:**", then a bulleted list of file paths, followed by a brief explanation. Example:

**Intelligent file search results:**

- `src/index.ts`
- `src/greetings/hello.ts`
- `src/greetings/welcome.ts`

These files contain the core greeting logic and module exports.

# Query

[INSTRUCTIONS]

API

# Files

[WORKSPACE FILES, A FOLDER OR SELECTED FILES]

# Task

Among the attached files, find the complete set of primary and structural files relevant to the query.

# Output formatting

Output strictly as a bulleted list of file paths without explanations or any other text. Example:

- `src/index.ts`
- `src/greetings/hello.ts`
- `src/greetings/welcome.ts`

# Query

[INSTRUCTIONS]

CLI

# Files

[WORKSPACE FILES, A FOLDER OR SELECTED FILES]

# Task

Among the attached files, find the complete set of primary and structural files relevant to the query.

# Output formatting

Output strictly as a bulleted list of file paths without explanations or any other text. Example:

- `src/index.ts`
- `src/greetings/hello.ts`
- `src/greetings/welcome.ts`

# Requirements

- All necessary files for the [task](#task) were preloaded to [files](#files). Reading other files is FORBIDDEN.
- Using tools or shell commands for discovery or information gathering (e.g., grep, glob, ls, git, etc.) is FORBIDDEN.

# Query

[INSTRUCTIONS]

📄 Code at Cursor Copy Section

Quality TAB completions from reasoning models.

WEB

# Files

[SELECTED FILES]

### File: `[ACTIVE FILE PATH]`

```
[PREFIX]<missing_text>[INSTRUCTIONS]</missing_text>[SUFFIX]
```

# Output formatting

Your response must begin with a markdown heading identifying the file and the cursor position, followed by a markdown code block containing the replacement text, followed by a brief explanation. The heading must be: "### Code at cursor: `[ACTIVE FILE PATH]` (ROW:COL)". Always refer to the symbol "<missing_text>" as "cursor position" and "replacement" as "completion". Example:

[EXAMPLE]

# Task

Find correct replacement text for the <missing_text> symbol.

API

# Files

[SELECTED FILES]

### File: `[ACTIVE FILE PATH]`

```
[PREFIX]<missing_text>[INSTRUCTIONS]</missing_text>[SUFFIX]
```

# Output formatting

Respond with replacement text within "replacement" XML tags, without explanations or any other text.
Example:
<replacement>!== undefined</replacement>

# Task

Find correct replacement text for the <missing_text> symbol.

CLI

# Files

[SELECTED FILES]

### File: `[ACTIVE FILE PATH]`

```
[PREFIX]<missing_text>[INSTRUCTIONS]</missing_text>[SUFFIX]
```

# Output formatting

Respond with replacement text within "replacement" XML tags, without explanations or any other text.
Example:
<replacement>!== undefined</replacement>

# Requirements

- All necessary files for the [task](#task) were preloaded to [files](#files). Reading other files is FORBIDDEN.
- Using tools or shell commands for discovery or information gathering (e.g., grep, glob, ls, git, etc.) is FORBIDDEN.

# Task

Find correct replacement text for the <missing_text> symbol.

📄 Commit Messages Copy Section

Get change summaries adhering to your preferred style.

WEB/API

# Files

[SELECTED FILES WHEN EDITS WERE ACCEPTED]

# Changes

[STAGED CHANGES]

# Output formatting

Your response must begin with "**Commit message:**", then proceed with the message. Example:

**Commit message:** Bump version to 1.0.1

# Task

Write a brief and precise summary for the changes, limited to a single sentence. Because the summary will be used for a commit message, don't use any markdown formatting and don't include a trailing dot. Use an imperative tone to ensure clarity and focus on the primary change or purpose.

CLI

# Files

[SELECTED FILES WHEN EDITS WERE ACCEPTED]

# Changes

[STAGED CHANGES]

# Output formatting

Your response must begin with "**Commit message:**", then proceed with the message. Example:

**Commit message:** Bump version to 1.0.1

# Requirements

- All project's files were preloaded to [files](#files). You must work strictly within the provided context.
- Calling tools, including shell commands (e.g. grep, glob, ls, git, etc.) is FORBIDDEN.

# Task

Write a brief and precise summary for the changes, limited to a single sentence. Because the summary will be used for a commit message, don't use any markdown formatting and don't include a trailing dot. Use an imperative tone to ensure clarity and focus on the primary change or purpose.

📄 Patch Repair Copy Section

Apply malformed edits.

WEB/API

[ORIGINAL FILE]

[MALFORMED EDITS]

# Output formatting

Your response must begin with a markdown heading identifying the file, followed by a markdown code block containing the updated file. The heading must be: "### Patch repair: `path/to/file.ext`". Example:

[EXAMPLE]

# Task

Apply the attached changes to the file without explanations or any other text.

CLI

# File: `[FILE PATH]`

[ORIGINAL FILE CONTENT]

[MALFORMED EDITS]

# Output formatting

Your response must begin with a markdown heading identifying the file, followed by a markdown code block containing the updated file. The heading must be: "### Patch repair: `path/to/file.ext`". Example:

[EXAMPLE]

# Requirements

- Calling tools, including shell commands (e.g. grep, glob, ls, git, etc.) is FORBIDDEN.

# Task

Apply the attached changes to the file without explanations or any other text.

📄 Voice Input Copy Section

Transcribe speech-to-text with file awareness.

API

# Files

[FILES SEEN DURING RECORDING]

# Task

Transcribe using clean verbatim. Remove filler words (such as 'um,' 'uh,' 'like'), false starts, and stutters. Preserve the speaker's exact words, slang, and sentence structure, but use natural punctuation and sentence breaks to ensure readability.

# Output formatting

Respond with the audio transcription or the word INAUDIBLE, without explanations or any other text.

CLI

# Files

[FILES SEEN DURING RECORDING]

# Task

Transcribe using clean verbatim. Remove filler words (such as 'um,' 'uh,' 'like'), false starts, and stutters. Preserve the speaker's exact words, slang, and sentence structure, but use natural punctuation and sentence breaks to ensure readability.

Audio file: `[AUDIO_FILE_PATH]`

# Output formatting

Respond with the audio transcription or the word INAUDIBLE, without explanations or any other text.

# Requirements

- All necessary files for the [task](#task) were preloaded to [files](#files). Reading any other files is FORBIDDEN.
- Calling tools, including shell commands (e.g. grep, glob, ls, git, etc.) is FORBIDDEN.
- Exception: If [task](#task) includes *.wav audio file paths, read them using the appropriate tool.

Commands Copy Chapter

Code at Cursor Copy Section

• CWC: Code at Cursor - Get an inline snippet while using the current context.
• CWC: Code at Cursor using... - Inline snippet with configuration selection.
• CWC: Code at Cursor with Instructions - Inline snippet with instructions.
• CWC: Code at Cursor with Instructions using... - Inline snippet with instructions and configuration selection.

Context Copy Section

• CWC: Save File Selection - Save the current context.
• CWC: Restore File Selection - Restore a saved context.
• CWC: Select Workspace File... - Select a file from the workspace.
• CWC: Search Files... - Find files based on a search query.
• CWC: Search in Selected Files... - Find within currently selected files.
• CWC: Agentic Search... - Find task-relevant files using a headless CLI invocation.
• CWC: Select Clipboard Paths... - Select files based on paths in your clipboard.
• CWC: Select Unstaged Files... - Select files with unstaged changes.
• CWC: Select Files of Commit... - Select files modified in a specific commit.

Copy Copy Section

• CWC: Copy Markdown - Copy contents of the current file selection.
• CWC: Copy Markdown of Open Editors - Copy contents of file selection in open editors.
• CWC: Copy Paths... - Copy paths of the current file selection.
• CWC: Copy Paths of Open Editors... - Copy paths of file selection in open editors.

Commit messages Copy Section

• CWC: Commit Changes - Generate commit message in your preferred style and commit.

History Copy Section

• CWC: History - Manage saved states of the workspace.
• CWC: Create New Checkpoint - Create a history entry of the workspace state.

Actions Copy Section

• CWC: Apply Chat Response - Integrate LLM response.

Misc Copy Section

• CWC: Duplicate Workspace - Copy the extension's state in a new window.

Building from source Copy Chapter

Prerequisites Copy Section

• Node.js (22.x recommended)
• pnpm

Steps Copy Section

1. Clone the repository:
   git clone https://github.com/robertpiosik/CodeWebChat.git && cd CodeWebChat
2. Install workspace dependencies:
   pnpm install
3. Navigate to the editor app and build the package:
   cd apps/editor && pnpm run build
4. Install the generated .vsix file in VS Code:
   Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P), run Extensions: Install from VSIX..., and select the newly created file.

Copyright © 2026 Robert Piosik
E-mail: [email protected]

Overview (`media/README.md`) Copy Section

Convert mp4 to gif using:

ffmpeg -i example.mp4 -vf "fps=15,scale=900:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff:max_colors=64[p];[s1][p]paletteuse=dither=none" example.gif

Overview (`apps/browser/README.md`) Copy Section

Autofill for Code Web Chat

This browser extension communicates with the editor via a locally run WebSockets server.

Serves two purposes:

1. Autofilling the constructed prompt text
2. Placing Apply Response button under responses

[!TIP]
Elevate your workflow with smart workspaces (called projects, gems, or spaces).

[!NOTE]
The Apply Response button is an alias for the copy button typically placed at the end of a chat response. Once clicked, it copies the response and notifies the editor via a WebSocket message to read the clipboard.

[!IMPORTANT]
Prompt text is never submitted or response accepted automatically.

Stores Copy Chapter

• Chrome Web Store
• Firefox Add-ons

Permissions Copy Chapter

The extension functions with minimal permissions.

• storage - Used to temporarily store prompts for a content script, and to save extension settings.
• alarms (Chrome only) - Used to implement a keep-alive mechanism for the background service worker to ensure the WebSocket connection stays active.

The extension requests no host permissions. It connects to the local WebSocket server managed by the VS Code extension (ws://localhost:55155, or 55156 when a forwarded remote port had to be shifted).

Firefox only:

• contextualIdentities - Required for Firefox Containers support.
• cookies (optional) - Required for Firefox Containers support.

Api Tools Index (`docs/api-tools/index.mdx`) Copy Section

sidebar_position: 3 hide_table_of_contents: true Copy Chapter

API tools

CWC includes battle-tested must-have API tools.

[Code completions](./code-at-cursor) Copy Section

Get accurate code-at-cursor from state-of-the-art reasoning models.

[Context edit](./context-edit) Copy Section

Modify, create or delete files based on natural language instructions.

[Patch repair](./patch-repair) Copy Section

When applying chat response, update files based on code blocks in truncated edit format and fix malformed diffs.

[Commit messages](./commit-messages) Copy Section

Generate meaningful summaries of changes precisely adhering to your preferred style.

Chatbot Initialization (`docs/chatbot-initialization.mdx`) Copy Section

title: Chatbot initialization sidebar_position: 3 Copy Chapter

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

Code with your favorite chatbot without tedious copy-pasting and apply responses with a single click.

Generated prompt depends on prompt type:

[INSTRUCTIONS]
<files>
  <document title="...">...</document> // selected websites
  ...
  <file path="...">...</file> // selected workspace files
  ...
</files>
[INSTRUCTIONS]

Find correct replacement text for the <missing_text> symbol. Your response must begin with a code block containing the replacement text, followed by an explanation. The first line of the code block must be a comment containing: path/to/file.js 10:5. Always refer to the symbol "<missing_text>" as "cursor position" and "replacement" as "completion".
<files>
  <document title="...">...</document> // selected websites
  ...
  <file path="...">...</file> // selected workspace files excluding current editor
  ...
  <file path="..."> // current editor
    ...
    <missing_text> // cursor position
    ...
  </file>
</files>
Find correct replacement text for the <missing_text> symbol. Your response must begin with a code block containing the replacement text, followed by an explanation. The first line of the code block must be a comment containing: path/to/file.js 10:5. Always refer to the symbol "<missing_text>" as "cursor position" and "replacement" as "completion".

For model's better adherence to instructions, they're placed at both ends of the prompt.
OpenAI Cookbook/Prompt Organization

:::tip Practice single-turns

Chat conversations are only a construct of product interfaces, they hurt the quality of responses from the model and once your context is "poisoned" it will not recover. Whenever you're not satisfied with a response, the best practice is to always refine your initial instructions and re-initialize a chat.

:::

Edit formats Copy Chapter

Additional instructions are appended to your prompt in "General" mode, instructing the model to respond in an appropriate format. They can be customized in your settings.json file.

Truncated Copy Section

codeWebChat.editFormatInstructionsTruncated

Whenever proposing a file use the markdown code block syntax and always add a file path in a comment on the top of the code block. Use ellipsis comments, e.g. "// ...", when appropriate.

Whole Copy Section

codeWebChat.editFormatInstructionsWhole

Whenever proposing a file use the markdown code block syntax and always add a file path in a comment on the top of the code block. Please show me the full code of the changed files, I have a disability which means I can't type and need to be able to copy and paste the full code.

Diff Copy Section

codeWebChat.editFormatInstructionsDiff

Whenever proposing a file use the markdown code block syntax. Each code block should be a diff patch.

Presets Copy Chapter

Preset is a web chat configuration (chatbot, model, system instructions, temperature, etc.). With the use of prefixes and suffixes, they can serve specific purpose in your workflow.

Applying chat responses Copy Chapter

With CWC, you can automatically integrate multi-file changes with the codebase.

Strategy depends on detected edit format:

• truncated: Uses Patch Repair API tool placing the original file before changes which serve as instructions for a full file rewrite.
• whole: Simply replaces original files in place.
• diff: Uses the git apply utility before falling back to a custom diff processor.

Context Selection (`docs/context-selection.mdx`) Copy Section

title: Context selection sidebar_position: 2 Copy Chapter

Context is something you constantly adjust as you code. CWC makes it simple by using the file explorer you already know.

Selected items are structured with XML:

<files>
  <document title="...">...</document> // selected websites
  ...
  <file path="...">...</file> // selected workspace files
  ...
</files>

Context is attached with:

• web chats
• API tools: Code Completions and Edit Context

Privacy (`docs/privacy.mdx`) Copy Section

sidebar_position: 6 Copy Chapter

Privacy

CWC respects user privacy and does not collect any user data.

Core principles Copy Chapter

Zero trackers Copy Section

We do not use any analytics services, tracking pixels, or other monitoring technologies.

Direct API communication Copy Section

All your requests are sent directly to providers you set up with your own API keys.

Local browser communication Copy Section

A local WebSockets server is run for bi-directional message passing on localhost ports 55155 and 55156.

Source-available Copy Section

The entire codebase is publicly available for review and audit. You can verify for yourself that the extension operates as described and adheres to these privacy principles.

Tips (`docs/tips.mdx`) Copy Section

sidebar_position: 5 Copy Chapter

Tips

Here are some tips and best practices for using CWC effectively.

Context Copy Chapter

Keep your context as short as possible carefully selecting what you show the model. LLMs are excellent pattern matchers and carefully scoping context pays off.

Instructions Copy Chapter

Always prefer single-turns by refining initial instructions over "chatting". Context once polluted, won't recover. Rather than delegating big detailed task to be implemented all at once, divide it into smaller chunks for easier assessment.

Api Tools Code Completions (`docs/api-tools/code-completions.mdx`) Copy Section

title: Code completions sidebar_position: 1 Copy Chapter

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

Code completions

Get accurate code-at-cursor from state-of-the-art reasoning models.

✓ Includes selected context
✓ Designed for on-demand use

You can use it:

• on-demand in the Home tab,
• via the command palette,
• keybindings you set up for
  Code Web Chat: Code At Cursor and
  Code Web Chat: Code At Cursor using... commands.

API message structure Copy Chapter

Find correct replacement for <missing_text> symbol. Respond with replacement text in "replacement" XML tags, without explanations or any other text.
<files>
  <document title="...">...</document> // selected websites
  ...
  <file path="...">...</file> // selected workspace files excluding current editor
  ...
  <file path="..."> // current editor
    ...
    <missing_text> // cursor position
    ...
  </file>
</files>
Find correct replacement for <missing_text> symbol. Respond with replacement text in "replacement" XML tags, without explanations or any other text.

Api Tools Commit Messages (`docs/api-tools/commit-messages.mdx`) Copy Section

title: Commit messages sidebar_position: 4 Copy Chapter

Generate meaningful summaries of changes precisely adhering to your preferred style.

✓ Includes affected files in full
✓ Customizable instructions

API message structure Copy Chapter

[INSTRUCTIONS]
<files>
  <file path="...">...</file>
  // other affected files
</files>
[DIFFS]
[INSTRUCTIONS]

Default instructions: Write a brief and precise summary for the changes, limited to a single sentence if possible and nothing else. Use an imperative tone to ensure clarity and focus on the primary change or purpose.

Api Tools Context Edit (`docs/api-tools/context-edit.mdx`) Copy Section

title: Context edit sidebar_position: 2 Copy Chapter

Modify, create or delete files based on natural language instructions.

✓ Multi-file updates in a single API call
✓ Efficient in output tokens—requests diffs

API message structure Copy Chapter

[INSTRUCTIONS] // User's natural language instructions
Whenever proposing a file use the markdown code block syntax. Each code block should be a diff patch. Do not send explanations.
<files>
  <file path="...">...</file> // context, including current editor
  ...
</files>
[INSTRUCTIONS] // User's natural language instructions
Whenever proposing a file use the markdown code block syntax. Each code block should be a diff patch. Do not send explanations.

Api Tools Intelligent Update (`docs/api-tools/intelligent-update.mdx`) Copy Section

title: Intelligent update sidebar_position: 3 Copy Chapter

Intelligent update

This tool updates files by rewriting them from scratch based on provided instructions. It's particularly useful for applying partial code changes or fixing malformed diffs.

✓ Regenerates whole files in concurrent API calls
✓ Smaller models like Gemini Flash are sufficient
✓ Can fix malformed diff patches

When is it used? Copy Chapter

Intelligent Update is automatically used in a few scenarios:

1. Applying truncated chat responses: When you ask the chatbot for code changes and it responds with a partial file (using // ... to omit unchanged parts), CWC uses this tool to apply the changes. It sends the original file content along with the chatbot's partial response to the model and asks it to generate the complete, updated file.

2. Fixing failed patches: When applying a response formatted as a diff patch, if the built-in programmatic fallback to git apply command fails, CWC will use Intelligent Update as a last resort. It sends the original file and the failed patch to the model, asking it to correctly apply the changes and generate the full new file.

3. Manual trigger: After applying changes via "Fast replace", if the result isn't what you expected (e.g. AI generated code missed truncation comments // ...), you can click the "Looks off, use intelligent update" button in the notification. This reverts the previous change and re-applies it using the more robust Intelligent Update method.

API message structure Copy Chapter

For each file to be updated, a separate API call is made. The prompt contains the full original content of the file, followed by instructions to rewrite it based on the changes from the chat response. The model is expected to return the complete, updated file content inside a markdown code block.

<file></file> // full original content of the file
User requested refactor of a file. Please show me the full code of the updated <file>, without explanations or any other text. I have a disability which means I can't type and need to be able to copy and paste the full code.
[CODE_CHANGES_FROM_CHAT_RESPONSE]

--- METRICS ---

• Files Extracted: 12
• Estimated Token Budget: ~7089 tokens
• Canonical Reference: https://codewiki.google/github.com/robertpiosik/CodeWebChat