---
title: "VS Code-Family Extension Setup"
description: "Connect your editor to Fraime.it so recordings include code context."
canonical_url: "/docs/extension-setup"
markdown_url: "/docs/extension-setup.md"
---

# VS Code-Family Extension Setup

Connect your editor to Fraime.it so recordings include code context.

Canonical URL: /docs/extension-setup
Markdown URL: /docs/extension-setup.md

The Fraime.it extension streams editor metadata from VS Code-family editors to the local macOS app. This helps the timeline understand what file, language, cursor position, visible range, and function were active during a recording.

You can record without the extension. Install it when the video is about code and you want Fraime.it to preserve editor context for later editing.

## What the extension sends

The extension sends structured metadata, not document contents. The payload can include editor name, file path, language, cursor position, selection range, visible range, function name, and dirty or untitled flags.

It intentionally does not send document contents or selected text.

## Why it helps

Editor metadata can support context-aware timeline review, zoom/framing suggestions, AI-assisted edits, and clearer understanding of what happened during a coding session. It also makes it easier to identify important moments later without relying only on pixels.

## Connection model

The extension connects to the Fraime.it app over a local TCP socket, typically on `127.0.0.1:49152`. Keep the app running while recording if you want editor context in the project.

The connection is local to your Mac. If the app is not running, the extension cannot stream context into the recording.

## Supported editors

Use the extension with VS Code-family editors such as Visual Studio Code, Cursor, and compatible forks that can install VSIX extensions.

## Install flow

Use the in-app extension helper when available. For development or manual installs, build the VSIX from `vscode-fraimeit` and install it with your editor command-line tool.

> Screenshot placeholder: Editor extension connection
> Show the in-app extension helper, connected editor status, and sample IDE context appearing in the timeline.

```bash
code --install-extension fraimeit-0.0.1.vsix
cursor --install-extension fraimeit-0.0.1.vsix
```

After installing, restart or reload the editor if it does not connect immediately.

## Confirm it is working

Record a short test while moving the cursor in a code file. Open the project in Fraime.it and check whether editor context appears in the timeline or inspector.

## Use IDE context in the editor

When IDE context is present, Fraime.it can show editor events alongside the timeline. Use those events to find file switches, cursor movement, selections, visible range changes, and function-level context during a coding session.

This context helps when deciding where to add zooms, callouts, lower thirds, smart edits, or assistant prompts. It also gives local agents more structure than a flat screen recording while still keeping document contents out of the bridge payload.

## Privacy notes

Because the extension does not send document contents or selected text, Fraime.it sees where you were working, not the full source content. The screen recording itself can still contain visible code, terminals, secrets, or private data, so review redactions before export.

## Troubleshooting

If context does not appear in the timeline, make sure the app is open, the extension is enabled, the editor can connect to localhost, and no other process is blocking the configured port.

If you use multiple VS Code-family editors, confirm the extension is installed in the editor you are actually recording. Each editor manages extensions separately.

## Sitemap

See the agent-readable sitemap at [/sitemap.md](/sitemap.md).