Sparkecode Dev Tools

Click any React component on a page to copy helpful context to your clipboard.

Script tag (unpkg/jsDelivr)

<script src="https://unpkg.com/sparkecode-devtools/sparkecode-select.js"></script>
<script>
  window.SparkeCodeSelect.init();
</script>

Next.js (App or Pages Router)

import { SparkeCodeSelect } from 'sparkecode-devtools/next';

export default function Layout({ children }) {
  return (
    <>
      <SparkeCodeSelect />
      {children}
    </>
  );
}

Default behavior:

• Runs only in development
• Auto-connects to a local Sparkecoder instance and sends selections into the latest session

Optional overrides:

<SparkeCodeSelect
  enabled={true}
  scriptUrl="https://unpkg.com/sparkecode-devtools/sparkecode-select.js"
  sparkecoderEnabled={true}
  config={{
    sparkecoder: {
      apiBase: "http://127.0.0.1:3141",
      sessionId: "your-session-id"
    },
    primaryColor: "#8b5cf6"
  }}
/>

Sparkecoder integration (local)

If you are running Sparkecoder locally, you can auto-send selections into the most recently active session:

<script>
  window.SparkeCodeSelect.init({
    sparkecoder: { enabled: true }
  });
</script>

Optional overrides:

<script>
  window.SparkeCodeSelect.init({
    sparkecoder: {
      enabled: true,
      apiBase: "http://127.0.0.1:3141",
      sessionId: "your-session-id"
    }
  });
</script>

Environment variable (Next.js)

You can set the Sparkecoder server URL via environment variable instead of passing it as a prop:

# In your .env.local
NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL=http://192.168.1.100:3141

This is useful when your Sparkecoder server is running on a different machine or port.

The component checks for:

1. NEXT_PUBLIC_SPARKECODER_DEV_TOOLS_SERVER_URL (client-side accessible)
2. SPARKECODER_DEV_TOOLS_SERVER_URL (server-side only, for SSR)

You can also pass serverUrl as a prop to override:

<SparkeCodeSelect serverUrl="http://192.168.1.100:3141" />

Webhook (custom)

You can also send copy events to any endpoint:

<script>
  window.SparkeCodeSelect.init({
    webhookUrl: "https://example.com/webhook"
  });
</script>

Controls

• Click the floating button to toggle selection mode
• Click the panel icon (right side of button) to open the SparkeCode web UI
• Drag the button to reposition
• Press Cmd/Ctrl+Shift+S to toggle selection mode
• Press Esc to exit selection mode

Floating Web UI Panel

Click the panel icon on the button to open a draggable, collapsible panel showing the full SparkeCode web interface. This lets you see the agent's responses and chat history while working on your app.

• Drag the header to move the panel
• Click the minus button to collapse
• Click the X to close

Configure the web UI URL:

# In your .env.local
NEXT_PUBLIC_SPARKECODER_WEB_UI_URL=http://localhost:6969

Or via prop:

<SparkeCodeSelect webUiUrl="http://localhost:6969" />

Auto-send to Agent

When connected to a running Sparkecoder instance, clicking a component will:

1. Show a prompt input
2. Let you type what you want to do with the component (e.g., "make this button red")
3. Press Enter to send the request + component context directly to the agent
4. The agent will start working immediately

If you leave the prompt empty and press Enter, it sends just the component context. Press Esc or click outside to cancel.