Agent-readable docs index: /llms.txt. Full docs in one file: /llms-full.txt. Download /docs.zip to grep all markdown files locally.

askai

askai (@raptrx/askai on npm) lets you add one-click "Ask AI" actions to your app. Users select content — code, docs, errors — and send it to their preferred AI chat via deep links. No API keys, no backend, no runtime dependency.
GitHub · npm
askai is inspired by shadcn/ui: it is not installed as a dependency. A small CLI copies editable source files into your project — the service registry, URL builder, and components all live in your repo, and you own the code.

The problem it solves

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 — askai builds exactly that link.

What you get

CLI generator
npx @raptrx/askai init scaffolds the config and core library, then add button | link | dropdown copies editable components into your project.
Core URL builder
buildPromptUrl and openInAI build AI prompt deep links in any JS/TS app — vanilla, React, Next.js, Remix, and more.
React components
AskAIButton, AskAILink (SSR-friendly), and AskAIDropdown — plain React components you style with your own design system.
No API keys
Deep links open the user's own AI chat account — no tokens to store, no per-request cost, nothing to leak from your client.
The deep-link approach means there is nothing to provision and nothing to secure:
  • Zero runtime dependencies — the code is copied into your project, so your bundle stays small.
  • No backend — the user's chosen AI app does the work; you only build a URL.
  • Full control — customize styles, add analytics, or extend the URL-building logic directly in your repo.
  • Type-safe — full TypeScript support out of the box.

Quick start

This takes you from an empty project to a working Ask AI button. There is nothing to install as a dependency — the CLI copies source files into your project and you use them like any other local module.
  1. Initialize askai
    Run the init command in your project root:
    npx @raptrx/askai init
    The CLI asks for your default goal/prompt (e.g. "Explain this code"), which AI tools to include, and the components path. It then writes a config file and the core library:
    your-project/
├── askai.json                    # Config
├── src/
│   ├── lib/askai.ts             # AI services (you own this)
│   └── components/askai/
│       └── ask-ai-button.tsx    # Components (you own this)
  2. Add a component
    Generate the component you need — each command copies an editable file under your components path:
    npx @raptrx/askai add button      # AskAIButton
npx @raptrx/askai add link        # AskAILink
npx @raptrx/askai add dropdown    # AskAIDropdown
  3. Use it in your app
    The important prop is content — the text or data sent to the AI when the button is clicked. service picks the target chat and goal sets the instruction:
    import { AskAIButton } from '@/components/askai/ask-ai-button';

<AskAIButton
  service="chatgpt"
  goal="Explain this code"
  content={codeString}
/>
If you can't run the CLI interactively, you can copy the core logic and components from the repo manually — the result is identical, since the CLI only copies files.

The other components

AskAILink renders a plain anchor, which makes it SSR-friendly:
import { AskAILink } from '@/components/askai/ask-ai-link';

<AskAILink
  service="claude"
  goal="Review this"
  content={codeString}
>
  Ask Claude
</AskAILink>
AskAIDropdown lets the user pick from multiple services:
import { AskAIDropdown } from '@/components/askai/ask-ai-dropdown';

<AskAIDropdown
  goal="Explain this code"
  content={codeString}
  services={['chatgpt', 'claude', 'gemini', 'perplexity']}
/>

Without React

The core library works in vanilla JS/TS — build the URL yourself or open it directly:
import { buildPromptUrl, openInAI } from '@/lib/askai';

// Get URL
const url = buildPromptUrl('chatgpt', 'Explain this', code);

// Or open directly
openInAI('claude', 'Review this', code);

Real-world examples

Attach an AI dropdown to a code block:
function CodeBlock({ code, language }) {
  return (
    <div>
      <pre>{code}</pre>
      <AskAIDropdown
        goal={`Explain this ${language} code`}
        content={code}
        services={['chatgpt', 'claude']}
      />
    </div>
  );
}
Turn an error boundary into an assistant:
function ErrorBoundary({ error }) {
  return (
    <div>
      <p>Something went wrong</p>
      <AskAIButton
        service="chatgpt"
        goal="Help me fix this error"
        content={error.stack}
      >
        Ask AI for Help
      </AskAIButton>
    </div>
  );
}
Components are normal React components living in your repo — style them with Tailwind or your design system, add analytics, or change their markup freely.

Providers

askai ships with 10 AI services in its core registry. Each entry defines the correct base URL, the prompt parameter, and the passing method (query, hash, or path), so a deep link opens the target chat with your content pre-filled.
Use the id value as the service prop on components or the first argument to buildPromptUrl / openInAI:
ServiceIDURL
ChatGPTchatgptchat.openai.com
Claudeclaudeclaude.ai
Geminigeminigemini.google.com
Grokgrokgrok.x.ai
Perplexityperplexityperplexity.ai
DeepSeekdeepseekchat.deepseek.com
Mistralmistralchat.mistral.ai
Copilotcopilotcopilot.microsoft.com
Kagikagikagi.com
Google AI Studiogoogleaistudio.google.com
Content is truncated per service using each entry's maxLength, which avoids 414 URI Too Long errors, and code content is wrapped in markdown code blocks so the AI receives it well-formatted.

Configuration

Running init writes an askai.json at your project root that records where the generated code lives:
{
  "typescript": true,
  "srcDir": "src",
  "utilsPath": "./src/lib/askai",
  "componentsPath": "./src/components/askai"
}

Adding your own service

Because the registry is copied into your project (src/lib/askai.ts), extending it is a normal code edit — no plugin API needed:
// In src/lib/askai.ts
export const services = {
  // ... existing services
  myai: {
    name: 'My AI',
    url: 'https://myai.com',
    buildUrl: (prompt) => `https://myai.com/chat?q=${encodeURIComponent(prompt)}`,
  },
};
You can just as easily remove services you don't want to offer, change button styles, modify the URL-building logic, or add analytics/tracking around clicks.
The registry and URL builder are covered by the package's Vitest test suite upstream — if you customize heavily, mirror that pattern and add tests for your own service entries.
askai is MIT-licensed and open source: github.com/aliarain/askai.

For AI agents

Copy this block into Cursor, Claude Code, or any coding agent to integrate askai correctly:
# askai — agent integration instructions

Add one-click "Ask AI" actions to this web app using @raptrx/askai (npm).
It is shadcn-style: the CLI copies editable source files into the project;
nothing is installed as a runtime dependency. Follow these rules exactly:

1. Scaffold with: npx @raptrx/askai init
   (writes askai.json plus src/lib/askai.ts — answer the prompts for
   default goal, AI tools to include, and components path).
2. Add the components needed:
   npx @raptrx/askai add button      # AskAIButton
   npx @raptrx/askai add link        # AskAILink (SSR-friendly anchor)
   npx @raptrx/askai add dropdown    # AskAIDropdown (multi-service)
3. Use them with three props: `service` (target chat id), `goal` (the
   instruction, e.g. "Explain this code"), and `content` (the text/code
   sent to the AI). AskAIDropdown takes `services` (an array of ids)
   instead of `service`.
4. Valid service ids: chatgpt, claude, gemini, grok, perplexity,
   deepseek, mistral, copilot, kagi, google. Do not invent ids.
5. Outside React, import from the copied lib:
   buildPromptUrl(serviceId, goal, content) returns the deep-link URL;
   openInAI(serviceId, goal, content) opens it directly.
6. Never add API keys or a backend — askai builds deep links that open
   the user's own AI chat account; there is nothing to provision.
7. To add or remove AI services, edit the registry in src/lib/askai.ts
   directly (it lives in the project, not in node_modules). Each entry
   needs a name, url, and buildUrl(prompt) function.
8. Content is auto-truncated per service (maxLength) to avoid
   414 URI Too Long, and code is wrapped in markdown code blocks —
   do not pre-truncate or pre-wrap.
9. If the CLI cannot run interactively, copy the core lib and components
   from https://github.com/aliarain/askai manually — the result is
   identical.

Docs: https://docs.aliarain.com/askai
Agents can also read this page as plain markdown — every page on this site is available to LLMs in raw form via the docs' llms.txt index.
Ali Arain Docs
Powered byHolocron