> ## Documentation Index
> Fetch the complete documentation index at: https://jam.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> See what every Jam captures and how to read it: visual context, custom logs, developer logs, and user events.

Every Jam includes developer information to help engineers debug faster. Get instant access to console logs, network data, and environment details without switching between tools or losing context.

## What's inside

<CardGroup cols={2}>
  <Card title="Visual context" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/video-player-timeline-markers.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=1051ab1ac4e5b98c6ed8aa5e58626ea4" width="1803" height="951" data-path="images/video-player-timeline-markers.png">
    Screenshots and screen recordings with annotation tools
  </Card>

  <Card title="Custom Logs" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/metadata-panel.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=e0a48b04c17ee3d53219ba2608dbca04" width="1803" height="951" data-path="images/metadata-panel.png">
    URL, timestamp, device info, browser version, OS and more
  </Card>

  <Card title="DevTools" href="/docs/devtools" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/console-log-stream.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=551b77da78536c7c21c38400f10b83d9" width="1803" height="951" data-path="images/console-log-stream.png">
    Console logs and complete network request details
  </Card>

  <Card title="User events" img="https://mintcdn.com/jam-1eb4fd26/3Mtv5mLh0Dqadb4R/images/user-events-timeline.png?fit=max&auto=format&n=3Mtv5mLh0Dqadb4R&q=85&s=4975e16007538fc1137607b25fbd1d8d" width="1803" height="951" data-path="images/user-events-timeline.png">
    Clicks, navigation events, and more
  </Card>

  <Card title="MCP" href="/docs/jam-mcp" img="https://mintcdn.com/jam-1eb4fd26/NaIbWrQ5PJRPHScp/images/apps/mcp-logo-card.png?fit=max&auto=format&n=NaIbWrQ5PJRPHScp&q=85&s=22dd5009b75fa8f2766f4d4e284b7771" alt="MCP logo" width="800" height="630" data-path="images/apps/mcp-logo-card.png">
    Send DevTools context to AI agents so they can inspect logs, network requests, and user events.
  </Card>
</CardGroup>

## Layouts

Switch between side and bottom layouts to fit your workflow:

<Tabs>
  <Tab title="DevTools visible">
    DevTools appear on the right side in the properties panel for wide-screen debugging. Ideal when you need to see both the captured page and technical details simultaneously.
  </Tab>

  <Tab title="Content only">
    Hide DevTools to show only the visual captured content and activity including comments.
  </Tab>
</Tabs>

## Embed Figma designs

You can paste Figma links into Jam, and engineers will see the Figma frame side by side with your initial bug report.

<Steps>
  <Step title="Capture a visual bug">
    Use Jam to capture the bug on your screen.
  </Step>

  <Step title="Paste a Figma link in the description">
    In the Jam description, paste a Figma link.
  </Step>

  <Step title="Create the Jam">
    Click **Create**.
  </Step>

  <Step title="Open the embedded Figma">
    Open the new Jam. You'll see a Figma icon at the bottom. Click it to reveal the Figma embed.
  </Step>
</Steps>

Engineers don't need to open another tab to see intended designs.