> For the complete documentation index, see [llms.txt](https://calliopeide.gitbook.io/calliopeide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://calliopeide.gitbook.io/calliopeide/3.-integration-features/3.1-vs-code-integration.md).

# 3.1 VS Code Integration

The system integrates with VS Code through a sophisticated iframe implementation:

```tsx
const [mountedIframe] = useState(() => {
    try {
        eval("document")
    } catch { return "" }
    const el = eval("document").createElement("iframe");
    el.src = codeServerURL;
    el.style.width = "100%";
    el.style.height = "100%";
    return el;
});

useEffect(() => {
    mountedIframe.src = codeServerURL;
}, [codeServerURL]);
```

Features:

1. Dynamic Loading: Loads VS Code on demand
2. Responsive Layout: Adapts to window size
3. URL Management: Handles code server URLs
4. Error Handling: Manages loading errors
5. State Management: Maintains iframe state