@creaditor/ai-agent-find-domain

v1.0.7

Published

2 months ago

AI-powered domain finder component with streaming suggestions and rich text editor

Downloads

0High
0Medium
0Low

creaditor

web-components lit-element typescript lit ai domain-finder creaditor tiptap editor streaming domain-search

Domain Finder Component

A powerful, customizable web component for finding and selecting domain names with real-time streaming AI suggestions.

Features

🎯 Real-time Domain Search - Streaming AI-powered domain suggestions
🎨 TipTap Rich Text Editor - Multi-line business description input
🌍 Full Internationalization - RTL support for Hebrew, Arabic, and other languages
🎭 Complete Customization - Every text element is customizable
📱 Responsive Design - Works on all screen sizes
⚡ Clickable Results - Interactive domain selection with events
🔄 Thinking Animation - Engaging Lottie animation during search
🎪 Popover Interface - Clean, modern popover-based UI

Installation

npm install cdtr-ai-prompt

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@lottiefiles/[email protected]/dist/dotlottie-wc.js" type="module"></script>
    <script type="module" src="https://cdn.skypack.dev/@creaditor/popover"></script>
    <script type="module" src="./my-element.js"></script>
</head>
<body>
    <cdtr-domain-finder></cdtr-domain-finder>
</body>
</html>

Properties

Core Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | business-name | String | '' | Pre-set business name (skips popover if provided) | | direction | 'ltr' \| 'rtl' \| 'auto' | 'auto' | Text direction for RTL languages |

Input Form Text Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | popover-title | String | 'What is your business?' | Title text in the popover | | popover-subtitle | String | 'Enter your business name to find available domains' | Subtitle text in the popover | | input-placeholder | String | 'Enter your business name...' | Placeholder text for the input field | | cancel-button-text | String | 'Cancel' | Text for the cancel button | | submit-button-text | String | 'Find Domains' | Text for the submit button | | loading-text | String | 'Finding domains...' | Text shown during loading |

Results View Text Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | back-button-text | String | '← Back' | Text for the back button in results view | | results-title-text | String | 'Available Domains' | Title text in the results view | | available-text | String | 'Available' | Text for available domain status | | taken-text | String | 'Taken' | Text for taken domain status | | click-hint-text | String | 'Click to select' | Hint text for clickable domains |

Events

The component dispatches the following custom events:

`domain-suggestions`

Fired when domain suggestions are received.

element.addEventListener('domain-suggestions', (e) => {
  console.log('Domains:', e.detail.domains);
  console.log('Business Name:', e.detail.businessName);
});

Event Detail:

{
  businessName: string,
  domains: Array<{
    domain: string,
    available: boolean
  }>
}

`domain-progress`

Fired during streaming for real-time updates.

element.addEventListener('domain-progress', (e) => {
  console.log('Progress:', e.detail.data.message);
});

Event Detail:

{
  data: {
    message: string,
    // ... other progress data
  }
}

`domain-selected`

Fired when user clicks on a domain.

element.addEventListener('domain-selected', (e) => {
  console.log('Selected domain:', e.detail.domain);
  console.log('Available:', e.detail.available);
});

Event Detail:

{
  domain: string,
  available: boolean
}

`domain-error`

Fired when there's an error.

element.addEventListener('domain-error', (e) => {
  console.error('Error:', e.detail.error);
});

Event Detail:

{
  error: string
}

Usage Examples

Basic Usage

<cdtr-domain-finder></cdtr-domain-finder>

With Pre-set Business Name

<cdtr-domain-finder 
  business-name="My Tech Company"
></cdtr-domain-finder>

Hebrew (RTL) Full Customization

<cdtr-domain-finder 
  direction="rtl"
  popover-title="מה שם העסק שלך?"
  popover-subtitle="הכנס את שם העסק שלך כדי למצוא דומיינים זמינים"
  input-placeholder="הכנס את שם העסק שלך..."
  cancel-button-text="ביטול"
  submit-button-text="חפש דומיינים"
  loading-text="מחפש דומיינים..."
  back-button-text="← חזור"
  results-title-text="דומיינים זמינים"
  available-text="זמין"
  taken-text="תפוס"
  click-hint-text="לחץ לבחירה"
></cdtr-domain-finder>

Custom Branding

<cdtr-domain-finder 
  popover-title="Let's find your perfect domain!"
  popover-subtitle="Tell us about your business and we'll suggest amazing domains"
  input-placeholder="Describe your business in detail..."
  cancel-button-text="Not Now"
  submit-button-text="Search Domains"
  loading-text="Finding the perfect domains for you..."
  back-button-text="← Try Another Search"
  results-title-text="🎉 Perfect Domains Found!"
  available-text="✅ Ready to Register"
  taken-text="❌ Already Taken"
  click-hint-text="🎯 Click to select this domain"
></cdtr-domain-finder>

Minimal & Clean

<cdtr-domain-finder 
  popover-title="Business Name"
  popover-subtitle="Enter your business name"
  input-placeholder="Business name..."
  cancel-button-text="Close"
  submit-button-text="Search"
  loading-text="Searching..."
  back-button-text="← New Search"
  results-title-text="Results"
  available-text="Free"
  taken-text="Taken"
  click-hint-text="Select"
></cdtr-domain-finder>

Complete Example with Event Handling

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/@lottiefiles/[email protected]/dist/dotlottie-wc.js" type="module"></script>
    <script type="module" src="https://cdn.skypack.dev/@creaditor/popover"></script>
    <script type="module" src="./my-element.js"></script>
</head>
<body>
    <cdtr-domain-finder 
      id="domain-finder"
      input-placeholder="Enter your business description..."
    ></cdtr-domain-finder>
    
    <div id="results"></div>

    <script>
        const finder = document.getElementById('domain-finder');
        const results = document.getElementById('results');

        // Handle domain suggestions
        finder.addEventListener('domain-suggestions', (e) => {
            results.innerHTML = `
                <h3>Found ${e.detail.domains.length} domains:</h3>
                <ul>
                    ${e.detail.domains.map(domain => 
                        `<li>${domain.domain} - ${domain.available ? 'Available' : 'Taken'}</li>`
                    ).join('')}
                </ul>
            `;
        });

        // Handle domain selection
        finder.addEventListener('domain-selected', (e) => {
            if (e.detail.available) {
                alert(`You selected: ${e.detail.domain}`);
                // Handle domain registration logic here
            }
        });

        // Handle errors
        finder.addEventListener('domain-error', (e) => {
            results.innerHTML = `<p style="color: red;">Error: ${e.detail.error}</p>`;
        });

        // Handle progress updates
        finder.addEventListener('domain-progress', (e) => {
            console.log('Progress:', e.detail.data.message);
        });
    </script>
</body>
</html>

API Integration

The component integrates with the Creaditor AI Domain Finder API:

Endpoint: https://agent.creaditor.ai/api/v1/domain-finder/find
Method: POST
Content-Type: application/json
Request Body: { "prompt": "business description" }
Response: Server-Sent Events stream with real-time progress and results

Styling

The component uses CSS custom properties and parts for styling:

CSS Parts

button - Main trigger button
input - TipTap editor input field

Custom Properties

You can override the component's styling using CSS custom properties:

cdtr-domain-finder {
  --primary-color: #667eea;
  --border-color: #e1e5e9;
  --text-color: #333;
  --background-color: #fff;
}

Browser Support

Chrome 88+
Firefox 85+
Safari 14+
Edge 88+

Dependencies

lit - Web components framework
@tiptap/core - Rich text editor
@creaditor/popover - Popover component
@lottiefiles/dotlottie-wc - Lottie animations

Development

# Install dependencies
npm install

# Build the component
npm run build

# Run development server
npm run serve

# Run tests
npm test

License

MIT License

Support

For support and questions, please contact the Creaditor team.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Domain Finder Component

Features

Installation

Basic Usage

Properties

Core Properties

Input Form Text Properties

Results View Text Properties

Events

domain-suggestions

domain-progress

domain-selected

domain-error

Usage Examples

Basic Usage

With Pre-set Business Name

Hebrew (RTL) Full Customization

Custom Branding

Minimal & Clean

Complete Example with Event Handling

API Integration

Styling

CSS Parts

Custom Properties

Browser Support

Dependencies

Development

License

Support

`domain-suggestions`

`domain-progress`

`domain-selected`

`domain-error`