askai: Add "Ask AI" to any app in seconds

tl;dr

I built askai — an open-source developer tool that lets you add one-click "Ask AI" actions to your app. Users select content (code, docs, errors) and send it to ChatGPT, Claude, Gemini, Grok, Perplexity, and more via deep links. No API keys, no backend. You own the code.

Package: @raptrx/askai on npm · GitHub

The problem

Every app could use an "Ask AI" moment: explain this code, summarize this doc, debug this error. But wiring API keys, managing tokens, and hosting a backend is heavy. Most teams just want a link that opens the user’s preferred AI chat with the right content.

What askai is

askai is inspired by shadcn/ui: a small CLI copies editable files into your project instead of installing a heavy dependency. You get:

CLI — npx @raptrx/askai init and add button | link | dropdown | bar
Core library — build AI prompt URLs in any JS/TS app (vanilla, Vue, etc.)
Optional React — <AiButton>, <AiButtonBar>, icons, themes (light/dark/brand)

No API keys. No runtime dependency. You own and edit the code.

10 AI services out of the box

The core registry includes: ChatGPT, Claude, Gemini, Grok, Perplexity, DeepSeek, Mistral, Copilot, Kagi, Google AI Studio. Each has the correct base URL, prompt param, and method (query/hash/path). You can add or remove services. Content is truncated per service maxLength and code is wrapped in markdown code blocks.

Tech stack

Language: TypeScript
Build: Rollup (ESM + CJS, separate CLI bundle)
Testing: Vitest (service registry + URL builder)
CLI: Node.js, prompts, picocolors
React: Peer dependency (optional), 16.8+
Exports: @raptrx/askai (core), @raptrx/askai/react (React)

User flow

Run npx @raptrx/askai init → get askai.json and src/lib/askai.ts (or .js).
Run npx @raptrx/askai add button (or link, dropdown, bar) → get components under src/components/askai/.
Use in app: e.g. <AskAIButton service="chatgpt" goal="Explain this code" content={code} /> or programmatic openInAI('claude', 'Review this', content).

Why I built it

I wanted "Ask AI" in my own apps and in client projects without maintaining API keys or backends. Deep links are enough: the user’s chosen AI app does the rest. A copy-paste toolkit keeps the bundle small and keeps control in the repo. askai is that toolkit.

Integration guide (for developers & AI agents)

askai is a Shadcn UI–style component generator. It does not install as a runtime dependency. You initialize it via the CLI, which copies template files into your project so you can customize everything.

Step 1: Initialize the components

Run in your project:

npx @raptrx/askai init

The CLI will ask:

Default goal/prompt — e.g. "Explain this code", "Summarize this article"
AI tools to add — ChatGPT, Claude, Gemini, etc.
Components path — e.g. ./src/components/ask-ai

If you can’t run the CLI interactively, you can add the core logic and components manually (same idea as copying from the repo).

Step 2: Use the components

The important prop is content — the text or data you want to send to the AI when the button is clicked.

Single button (e.g. on a code block):

import { AskAiButton } from '@/components/ask-ai/AskAiButton';

export default function CodeBlock({ codeString }) {
  return (
    <div className="relative">
      <pre>{codeString}</pre>
      <AskAiButton
        content={codeString}
        className="absolute top-2 right-2 bg-blue-500 text-white px-3 py-1 rounded"
      />
    </div>
  );
}

Button bar (multiple AIs, e.g. below an article):

import { AskAiButtonBar } from '@/components/ask-ai/AskAiButtonBar';

export default function Article({ articleText }) {
  return (
    <article>
      <p>{articleText}</p>
      <div className="mt-8 border-t pt-4">
        <h4>Ask an AI to summarize this:</h4>
        <AskAiButtonBar content={articleText} />
      </div>
    </article>
  );
}

Architecture notes

core — URL generation and truncatePrompt (avoids 414 URI Too Long). Edit to add services or change behavior.
AskAiButton & AskAiButtonBar — Normal React components. Style with Tailwind or your design system; they live in your repo.