# AI NFT Creation Integration Proposal for Portal

## Overview

Add AI-powered natural language NFT creation to the portal's NFT Mint Studio section. This will allow users to create NFTs using conversational commands instead of filling out complex forms.

## Recommended Location

**Primary Location: NFT Mint Studio Tab** (`#tab-nfts` section)

The AI functionality should be integrated as a **new mode/toggle** within the existing NFT Mint Studio, giving users the choice between:

1. **Traditional Form Mode** (existing)
2. **AI Assistant Mode** (new)

## UI Design Proposal

### Option 1: Toggle Mode (Recommended)

Add a toggle at the top of the NFT section to switch between modes:

```
┌─────────────────────────────────────────────────────────────┐
│  NFT Mint Studio                                            │
│  ┌──────────────┬──────────────┐                           │
│  │ 📝 Form Mode │ 🤖 AI Mode   │ ← Toggle buttons          │
│  └──────────────┴──────────────┘                           │
│                                                             │
│  [AI Mode Content]                                          │
│  ┌──────────────────────────────────────────────────────┐  │
│  │ 💬 AI Assistant                                      │  │
│  │                                                      │  │
│  │ ┌────────────────────────────────────────────────┐  │  │
│  │ │ Describe what you'd like to create...          │  │  │
│  │ │                                                │  │  │
│  │ │ "Create an NFT called 'Sunset Dream' with      │  │  │
│  │ │  description 'A beautiful sunset over the      │  │  │
│  │ │  ocean' priced at 0.5 SOL"                     │  │  │
│  │ └────────────────────────────────────────────────┘  │  │
│  │                                                      │  │
│  │  [Send] [Clear]                                      │  │
│  │                                                      │  │
│  │  💡 Example prompts:                                │  │
│  │  • "Create an NFT called [name] with description   │  │
│  │    [text] priced at [amount] SOL"                  │  │
│  │  • "Make a geospatial NFT in London at coordinates │  │
│  │    51.5074, -0.1278"                               │  │
│  └──────────────────────────────────────────────────────┘  │
│                                                             │
│  [Preview of parsed NFT details]                           │
│  [Create NFT Button]                                        │
└─────────────────────────────────────────────────────────────┘
```

### Option 2: Separate Tab/Section

Add a new subtab within the NFTs section:

```
NFTs Tab
├── Mint Studio (existing form)
└── AI Assistant (new AI mode)
```

### Option 3: Floating Assistant (Alternative)

Add a floating AI assistant button that can be triggered from anywhere, which opens a modal/panel.

## Implementation Approach

### File Structure

```
portal/
├── nft-mint-studio.js (existing - modify to add AI mode)
├── ai-nft-assistant.js (new - AI functionality)
└── portal.html (modify to add AI UI elements)
```

### Component Structure

1. **AI Assistant Component** (`ai-nft-assistant.js`)
   * Natural language input field
   * API call to backend/AI service
   * Parse and display preview
   * Submit to NFT creation API
2. **Integration Points**
   * Add toggle/mode switcher in NFT Mint Studio
   * Inject AI assistant UI when AI mode is active
   * Share same NFT creation API endpoint
3. **API Endpoint Needed**
   * Backend endpoint to handle AI parsing
   * Or direct OpenAI API calls (with API key stored securely)
   * Return structured NFT data

## UI/UX Design

### Visual Design

* **Modern chat-style interface** with message bubbles
* **Preview panel** showing parsed NFT details before creation
* **Loading states** during AI processing
* **Error handling** with helpful messages
* **Example prompts** to guide users
* **Suggestions** based on user input

### User Flow

1. User switches to "AI Mode"
2. User types natural language request
3. AI parses the request and shows preview
4. User reviews and confirms
5. NFT is created using parsed data
6. Success message with NFT details

### Example UI States

**Initial State:**

```
┌─────────────────────────────────────┐
│ 🤖 AI NFT Assistant                 │
│                                     │
│ Tell me what NFT you'd like to      │
│ create in plain English...          │
│                                     │
│ [Input field with placeholder]      │
│                                     │
│ [Create NFT] (disabled)             │
└─────────────────────────────────────┘
```

**After Input:**

```
┌─────────────────────────────────────┐
│ 🤖 AI NFT Assistant                 │
│                                     │
│ You: "Create an NFT called 'My      │
│      Art' with description 'Test'   │
│      priced at 1 SOL"               │
│                                     │
│ AI: [Parsing...]                    │
│                                     │
│ Preview:                            │
│ • Title: My Art                     │
│ • Description: Test                 │
│ • Price: 1 SOL                      │
│ • Chain: Solana                     │
│                                     │
│ [Edit] [Create NFT]                 │
└─────────────────────────────────────┘
```

## Technical Implementation

### Backend Options

**Option A: Direct OpenAI Integration (Client-side)**

* Store API key securely (environment variable or secure config)
* Make OpenAI API calls from JavaScript
* Parse response and create NFT

**Option B: Backend Proxy**

* Create backend endpoint (e.g., in ONODE API)
* Frontend sends user input to backend
* Backend calls OpenAI API
* Backend returns parsed NFT data
* Frontend creates NFT using existing API

**Option C: Use STAR API**

* If STAR API has AI endpoints, use those
* Otherwise, implement in ONODE backend

### Code Structure

```javascript
// ai-nft-assistant.js
class AINFTAssistant {
    constructor(container) {
        this.container = container;
        this.apiKey = null; // Load from secure config
        this.currentParsedData = null;
    }

    async parseUserInput(userInput) {
        // Call OpenAI API or backend endpoint
        // Parse response into NFT data structure
        // Return structured data
    }

    render() {
        // Create UI elements
        // Set up event handlers
        // Display chat interface
    }

    async createNFT(parsedData) {
        // Use existing NFT creation API
        // Show loading state
        // Handle success/error
    }
}
```

## Recommended Placement

**Best Option: Toggle Mode in NFT Mint Studio**

* ✅ Integrates naturally with existing UI
* ✅ Doesn't require new navigation structure
* ✅ Easy for users to switch between methods
* ✅ Maintains existing workflow

## Next Steps

1. **Decide on UI approach** (toggle mode recommended)
2. **Create `ai-nft-assistant.js` file**
3. **Modify `nft-mint-studio.js` to add toggle**
4. **Update `portal.html` to include AI UI**
5. **Implement backend API or client-side OpenAI integration**
6. **Add styling to match portal design**
7. **Test and iterate**

## Example Code Structure

See `ai-nft-assistant.js` implementation example for detailed code structure.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://oasis-web4.gitbook.io/oasis-web4-docs/portal/ai_nft_integration_proposal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.