← Back to Docs
AI-Assisted Install
Fastest installation method

Install with AI in about a minute

Let your AI assistant detect your framework, find the right place to drop the widget, and apply the diff for you.

Free plan includes 10 issues/month. No credit card.

No manual setup

The AI handles framework detection, file edits, and the snippet config.

Smart placement

Looks at your existing layout to pick a sensible mount point — root layout, app shell, or your existing feedback flow.

Framework-aware

Generates the right kind of integration for Next.js, React, Vue, Angular, Svelte, or plain HTML.

1

Get Your API Key

Sign up for IssueCapture and grab your widget API key

  • Go to issuecapture.com/signup and create a free account
  • Connect your Jira instance via OAuth (about 30 seconds)
  • Open the Widgets page and create a new widget
  • Click the "Keys" tab on your widget and copy the API key (it starts with "ic_")
2

Add the MCP Server

Wire your AI assistant up to the IssueCapture MCP server

.cursor/mcp.json or .mcp.json (Claude Code project scope)
{
  "mcpServers": {
    "issuecapture": {
      "command": "npx",
      "args": ["-y", "@issuecapture/mcp-server"]
    }
  }
}
  • For Claude Code: easiest is `claude mcp add issuecapture -- npx -y @issuecapture/mcp-server` — adds it to ~/.claude.json
  • For Cursor: drop the JSON into .cursor/mcp.json in your project root (or ~/.cursor/mcp.json globally)
  • For VS Code (Copilot Agent Mode): use .vscode/mcp.json — note the top-level key is "servers", not "mcpServers" (see the per-editor section below)
  • For Zed: settings.json under context_servers (see below)
  • Restart the editor after adding the config so the MCP host picks it up
3

Install with AI

Ask your assistant to install IssueCapture

Prompt
Install the IssueCapture widget in this project.
Use my API key: ic_YOUR_API_KEY_HERE.
  • Open a new chat with the assistant in your project
  • Paste a prompt like the one below — include your API key so the AI doesn't prompt you mid-install
  • The MCP server tells the AI which framework you're on (Next.js / React / Vue / Angular / Svelte / vanilla) and where to inject the widget
  • Review the diff the AI proposes before approving it
4

Test it works

Start your dev server and submit a test issue

  • Start your development server
  • Look for the floating Report Issue button (or your custom trigger if you wired one up)
  • Click it, fill in a quick test issue, and submit
  • Open Jira and confirm the issue landed in the right project

Configuration by editor

Each editor reads MCP config from a slightly different path with a slightly different top-level key. The contents below are copy-paste ready.

Claude Code

~/.claude.json (user scope) — or use `claude mcp add` (recommended)

Easiest: run `claude mcp add issuecapture -- npx -y @issuecapture/mcp-server` and Claude Code writes the entry itself. Project-scoped variant lives at .mcp.json in the project root.

{
  "mcpServers": {
    "issuecapture": {
      "command": "npx",
      "args": ["-y", "@issuecapture/mcp-server"]
    }
  }
}

Cursor

.cursor/mcp.json (project) or ~/.cursor/mcp.json (global)

Drop the JSON below in either location. Project scope is recommended so the config is checked into version control with the rest of the project.

{
  "mcpServers": {
    "issuecapture": {
      "command": "npx",
      "args": ["-y", "@issuecapture/mcp-server"]
    }
  }
}

VS Code (Copilot Agent Mode)

.vscode/mcp.json (workspace) — or use MCP: Open User Configuration

IMPORTANT: VS Code uses "servers" at the top level, not "mcpServers". Copy/pasting Cursor or Claude Code configs straight in will silently not work.

{
  "servers": {
    "issuecapture": {
      "command": "npx",
      "args": ["-y", "@issuecapture/mcp-server"]
    }
  }
}

Zed

~/.config/zed/settings.json

Zed nests MCP servers under "context_servers" inside its settings.json.

{
  "context_servers": {
    "issuecapture": {
      "command": "npx",
      "args": ["-y", "@issuecapture/mcp-server"]
    }
  }
}

Supported Frameworks

The MCP server detects which of these you're on and emits the appropriate integration. If you're on something not listed, the AI falls back to a plain HTML snippet.

Next.js
React
Vue
Angular
Svelte
Vanilla JS