@emblemvault/ask-ai

Deep-link prompts to AI services. Pre-built buttons and utilities for ChatGPT, Claude, Gemini, Grok, Perplexity, Google AI, Kagi, and more.

Installation

npm install @emblemvault/ask-ai

Quick Start

React Components

import { AskAiGroup } from '@emblemvault/ask-ai';

function App() {
  return (
    <AskAiGroup
      goal="Explain this code"
      content={yourCodeContent}
      services={{
        chatgpt: true,
        claude: true,
        gemini: true,
      }}
    />
  );
}

Server-Side URL Generation

import { buildServiceUrl, buildPrompt } from '@emblemvault/ask-ai/core';

const prompt = buildPrompt('Explain this code', codeContent, 'claude');
const url = buildServiceUrl('claude', prompt);
// Returns: https://claude.ai/new?q=...

CDN Usage

<!-- Full bundle with React components -->
<script src="https://unpkg.com/@emblemvault/ask-ai/dist/browser/ask-ai.min.global.js"></script>

<!-- Core utilities only (no React) -->
<script src="https://unpkg.com/@emblemvault/ask-ai/dist/browser/ask-ai-core.min.global.js"></script>

<script>
  const { buildServiceUrl, buildPrompt } = AskAi;
  const url = buildServiceUrl('chatgpt', 'Hello world');
</script>

Supported Services

Components

AskAiGroup

Container component that renders AI service buttons with a configurable prompt.

<AskAiGroup
  goal="Your prompt text"
  content="Additional context (optional)"
  services={{
    chatgpt: true,
    claude: { artifact: true },
    gemini: { mode: 'pro' },
  }}
  size="default"      // 'sm' | 'default' | 'lg'
  variant="outline"   // 'default' | 'outline' | 'ghost'
  autoSubmit={true}   // Auto-submit prompt on load
  askUser="append"    // 'append' | 'replace' - Show modal for user input
  userPrompt="Custom modal label"
  includeOriginUrl={false}
  includeUrls={['/api/data', 'https://example.com/context']}
/>

AiButton

Individual button for a specific AI service.

<AiButton
  service="claude"
  prompt="Your prompt text"
  options={{ artifact: true }}
  size="default"
  variant="outline"
  autoSubmit={true}
/>

Service Options

Claude

services={{
  claude: {
    artifact: true  // Request artifact output
  }
}}

ChatGPT

services={{
  chatgpt: {
    model: 'gpt-4o',  // 'gpt-4', 'gpt-4o', 'gpt-4o-mini', 'o1', 'o3-mini'
    temporary: true   // Temporary chat
  }
}}

Gemini

services={{
  gemini: {
    mode: 'pro'  // 'pro' | 'flash'
  }
}}

Perplexity

services={{
  perplexity: {
    focus: 'web'  // Search focus mode
  }
}}

Agent Hustle / Emblem Ai

services={{
  agentHustle: {
    agent: 'agent-id'  // Specific agent ID
  },
  emblemAi: {
    agent: 'agent-id'
  }
}}

Core Utilities

For server-side usage or custom implementations:

import {
  buildPrompt,
  buildServiceUrl,
  getServiceName,
  isExternalService,
  ServiceConfigs,
} from '@emblemvault/ask-ai/core';

// Build a prompt with service-specific formatting
const prompt = buildPrompt(
  'Explain this',           // goal
  'code content here',      // content
  'claude',                 // service
  { artifact: true },       // options
  'https://origin.com',     // originUrl (optional)
  ['https://ref.com/data']  // additional URLs (optional)
);

// Generate service URL
const url = buildServiceUrl('claude', prompt, { artifact: true }, true);

// Get display name
getServiceName('chatgpt'); // 'ChatGPT'

// Check if opens in new tab
isExternalService('claude'); // true

askUser Modal

The askUser prop enables an interactive modal for user input:

• append: Displays the goal text with an input field to append additional text
• replace: Shows an empty input field to replace the entire prompt

<AskAiGroup
  goal="Create an image of"
  askUser="append"
  userPrompt="Describe what you want:"
  services={{ chatgpt: true }}
/>

TypeScript

Full TypeScript support with exported types:

import type {
  AiService,
  AskAiGroupProps,
  AiButtonProps,
  ClaudeOptions,
  ChatGptOptions,
  GeminiOptions,
} from '@emblemvault/ask-ai';

License

MIT