←

Playground

Change anything on the left. The preview, the exact prompt and the code update as you type, and every option shown here is a real option of the library. The snippets only contain options that differ from the defaults.

Services

    Drag the grip to reorder. Order matters: the first service also receives the Enter key in input mode.

    Appearance
    Label position labelPosition
    Variant variant
    Shape shape
    Size size
    Theme theme
    Layout layout
    Prompt
    Mode input
    Context context
    CSS custom properties

    Tick one to override it. Set them on the widget element itself (see the CSS tab).

    Prompt preview
    
        
    

        
    
          
    
            
            
            
            
            
            
            
            
          
    
          
    
          
          
          
          
          
          
    
        
    
      
    
    
    
  
    

    


    
  
    
    
    The ask-ai:open event
    
    
    Every open dispatches a bubbling ask-ai:open event from the widget root with { service, prompt, url } in detail. Click any button on this page and watch the log. Use it for analytics.
    
    
    
      
    
        
    Log
    
        
    1. Nothing opened yet.
    
        
        
    document.addEventListener("ask-ai:open", (e) => {
  const { service, prompt, url } = e.detail;
  plausible("Ask AI", { props: { service } });
});
    
      
    
      
    
        
    Bring your own field
    
        
    
          
          
    
        
    
        
    <input id="myq">
<ask-ai input="#myq" label="Ask" services="claude,chatgpt"></ask-ai>