JSPM

@emblemvault/ask-ai

0.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 105
  • Score
    100M100P100Q79553F
  • License MIT

Deep-link prompts to AI services (ChatGPT, Claude, Gemini, Grok, Perplexity, etc.)

Package Exports

  • @emblemvault/ask-ai
  • @emblemvault/ask-ai/core

Readme

@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

Service ID URL
ChatGPT chatgpt chat.openai.com
Claude claude claude.ai
Gemini gemini gemini.google.com
Grok grok grok.x.ai
Perplexity perplexity perplexity.ai
Google AI google aistudio.google.com
Kagi kagi kagi.com
Agent Hustle agentHustle agenthustle.ai
Emblem Ai emblemAi emblem.bz

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