Context Cue

Quick Start

Get Context Cue up and running in 3 steps:

1. Install the package
2. Run the setup script to create API routes
3. Add the component to your app

1. Install the package

npm install contextcue

2. Set up API routes

Run the setup script to automatically create the required API routes in your Next.js app:

npx contextcue-setup

This creates app/api/bug-reports and app/api/contextcue/latest routes automatically. The script detects your framework and places files in the correct location.

3. Add to your app

Add the component anywhere in your React app, ideally at the root level. The NODE_ENV check ensures it only loads in development. Once added, you can annotate any element to provide context to your AI agent.

import { ContextCue } from "contextcue";

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === "development" && <ContextCue />}
    </>
  );
}

Connect to Cursor (Optional)

To enable automatic annotation sending to Cursor AI, install and configure the MCP server:

Install MCP Server

npm install -g contextcue-mcp-server

Configure Cursor

Get your MCP configuration automatically:

npx contextcue-mcp-config

This script finds your project root, locates the MCP server, and outputs the exact JSON configuration to copy into ~/.cursor/mcp.json (or ~/.config/cursor/mcp.json on Linux).

Example output:

📋 Copy this to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "contextcue-tracker": {
      "command": "node",
      "args": [
        "/path/to/your/project/node_modules/contextcue/mcp-server/dist/index.js"
      ]
    }
  }
}

💡 Tip: Restart Cursor after adding this config.

Or manually: Edit ~/.cursor/mcp.json and add:

{
  "mcpServers": {
    "contextcue-tracker": {
      "command": "npx",
      "args": ["-y", "contextcue-mcp-server"],
      "env": {
        "CONTEXTCUE_API_URL": "http://localhost:3000"
      }
    }
  }
}

Replace http://localhost:3000 with your actual API URL if different. Then restart Cursor to load the MCP server.

Requirements

• React 18+ — Uses modern React features
• Client-side only — Requires DOM access
• Desktop browser — Not optimized for mobile