npm package: @sctlib/bagent
Description: AI Native Browser Tab - Autonomous AI agent for browser-based content generation
Author: bagent contributors
Latest version: 0.0.3

# 🤖 AI Browser Tab Agent

**Create AI-native websites with autonomous content generation**

AI Browser Tab Agent is a revolutionary web component that transforms any webpage into an AI-powered content creation platform. Generate, edit, and publish AI-created content seamlessly within your browser.

[![npm version](https://badge.fury.io/js/%40sctlib%2Fbagent.svg)](https://www.npmjs.com/package/@sctlib/bagent)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)

## ✨ Features

### 🎯 Three Operating Modes
- **Full Mode**: Complete development interface with conversation, activity log, and all controls
- **Edit Mode**: Focused editing interface with highlighted edit capabilities  
- **Preview Mode**: Clean presentation mode for AI-generated websites

### 📦 Export/Import System
- Export complete agent state as JSON (conversations, content, configuration)
- Import state from JSON files or URLs for seamless content restoration
- Share and collaborate on AI-generated content effortlessly

### 🏗️ Static Site Generation
- `npm run build:content` command transforms exported states into deployable websites
- Custom template support with variable substitution
- Automatic library bundling for standalone operation

### 🎨 Content Generation
- **HTML Pages**: Static content, documentation, landing pages
- **JavaScript Widgets**: Interactive components, calculators, live data displays
- **Dashboards**: Complex multi-widget layouts with real-time data

## 🚀 Quick Start

### Installation

#### Option 1: NPM Package

```bash
npm install @sctlib/bagent
```

#### Option 2: CDN (No Build Required)

```html
<!DOCTYPE html>
<html>
<head>
    <title>My AI-Powered Website</title>
</head>
<body>
    <ai-browser-tab mode="full"></ai-browser-tab>
    
    <!-- Load from CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@sctlib/bagent@latest/dist-lib/bagent.umd.js"></script>
    <script>
        // Component is automatically available as <ai-browser-tab>
        // Or create programmatically:
        const agent = AIBrowserTab.default({
            mode: 'preview',
            editEnabled: true
        });
        // document.body.appendChild(agent);
    </script>
</body>
</html>
```

### Basic Usage

```html
<!DOCTYPE html>
<html>
<head>
    <title>My AI-Powered Website</title>
</head>
<body>
    <!-- Full development mode -->
    <ai-browser-tab mode="full"></ai-browser-tab>
    
    <script type="module">
        import AIBrowserTab from '@sctlib/bagent';
        // Component auto-initializes from attributes
    </script>
</body>
</html>
```

### Preview Mode for Published Sites

```html
<!-- Clean presentation mode with optional editing -->
<ai-browser-tab 
    mode="preview" 
    import-content="./my-content.json"
    edit="true"
    show-conversation="false">
</ai-browser-tab>
```

## 📖 Operating Modes

### Full Mode
Perfect for content creation and development:
```html
<ai-browser-tab mode="full"></ai-browser-tab>
```
- Complete conversation interface
- Activity log and debugging tools
- Export/import functionality
- All editing controls

### Edit Mode  
Focused interface for content modification:
```html
<ai-browser-tab mode="edit" show-conversation="true"></ai-browser-tab>
```
- Streamlined editing interface
- Visual edit indicators
- Conversation context
- Reduced UI complexity

### Preview Mode
Clean presentation for end users:
```html
<ai-browser-tab 
    mode="preview" 
    import-content="./content.json"
    edit="true"
    show-conversation="false">
</ai-browser-tab>
```
- Minimal UI footprint
- Generated content prominently displayed
- Optional conversation reveal
- Can upgrade to edit mode

## 🛠️ Development Workflow

### 1. Create Content
Start with full mode to generate AI content:

```bash
npm run dev
# Navigate to http://localhost:5173
# Use the interface to create content with AI
```

### 2. Export State
Export your agent's complete state including conversations and generated content:

```javascript
const agent = document.querySelector('ai-browser-tab');
agent.downloadState(); // Downloads JSON file
```

### 3. Build Static Site
Transform exported states into deployable websites:

```bash
# Place exported JSON files in ./content/
cp ~/Downloads/my-ai-content.json content/

# Generate static websites
npm run build:content

# Deploy the generated sites
rsync -av dist-content/my-ai-content/ user@server:/var/www/html/
```

## 📁 Project Structure

```
my-project/
├── content/                    # Exported AI states
│   ├── dashboard.json         # Weather dashboard state
│   └── portfolio.json         # Portfolio site state
├── dist-content/              # Generated static sites
│   ├── dashboard/
│   │   ├── index.html        # Preview page with AI agent
│   │   ├── state.json        # Original state
│   │   └── *.js              # Library files
│   └── portfolio/
├── src/templates/             # Custom templates (optional)
│   └── index.html
└── package.json
```

## 🎨 Custom Templates

Override default templates in `src/templates/`:

```html
<!-- src/templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>{{TITLE}}</title>
    <meta name="description" content="{{DESCRIPTION}}">
</head>
<body>
    <header>
        <h1>🤖 {{TITLE}}</h1>
        <p>Generated: {{CREATED_DATE}} | Items: {{CONTENT_COUNT}}</p>
    </header>
    
    <main>
        <ai-browser-tab 
            mode="preview" 
            import-content="{{STATE_FILE}}"
            edit="true">
        </ai-browser-tab>
    </main>
</body>
</html>
```

## ⚙️ Configuration

### HTML Attributes

| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `mode` | `full`, `edit`, `preview` | `full` | Operating mode |
| `edit` | `true`, `false` | `true` | Enable content editing |
| `show-conversation` | `true`, `false` | `true` | Show conversation panel |
| `import-content` | URL/path | - | Import state from file |
| `ollama-url` | URL | `http://localhost:11434/api/chat` | Ollama API endpoint |
| `model` | string | `qwen3:0.6b` | Default AI model |

### JavaScript API

```javascript
import AIBrowserTab from 'bagent';

// Create with configuration
const agent = AIBrowserTab({
  mode: 'preview',
  editEnabled: true,
  showConversation: false,
  ollamaUrl: 'https://my-ollama-server.com/api/chat'
});

document.body.appendChild(agent);

// Export/import state
const state = agent.exportState();
await agent.importState(state);
```

## 🏗️ Build Commands

```bash
# Development
npm run dev              # Start development server
npm run dev:lib          # Watch library builds
npm run dev:website      # Start website dev server

# Production
npm run build            # Build both library and website
npm run build-lib        # Build library only
npm run build-website    # Build website only
npm run build:content    # Generate static sites from content/

# Quality
npm run check            # TypeScript type checking
npm run test             # Run tests
```

## 🌐 Deployment

### GitLab Pages
Automatic deployment via GitLab CI/CD:

```yaml
# .gitlab-ci.yml (already configured)
pages:
  script:
    - npm install
    - npm run build-website
    - mv dist-website public
  artifacts:
    paths:
      - public
```

### Static Hosting
Deploy generated content sites:

```bash
# Build content sites
npm run build:content

# Deploy to any static host
netlify deploy --dir=dist-content/my-site
# or
vercel --cwd dist-content/my-site
# or
aws s3 sync dist-content/my-site s3://my-bucket
```

## 📚 Use Cases

### AI-Generated Documentation
Create interactive documentation with live examples:
```html
<ai-browser-tab 
    mode="preview" 
    import-content="./docs-state.json"
    edit="false">
</ai-browser-tab>
```

### Interactive Dashboards
Build live data dashboards with AI assistance:
```html
<ai-browser-tab 
    mode="edit" 
    show-conversation="true">
</ai-browser-tab>
```

### Quick CDN Integration
No-build setup for rapid prototyping:
```html
<!DOCTYPE html>
<html>
<head>
    <title>Quick AI Website</title>
</head>
<body>
    <h1>My AI-Generated Content</h1>
    <ai-browser-tab mode="preview" edit="true"></ai-browser-tab>
    
    <script src="https://cdn.jsdelivr.net/npm/@sctlib/bagent@latest/dist-lib/bagent.umd.js"></script>
</body>
</html>
```

### Portfolio Websites
Generate and customize portfolio sites:
```html
<ai-browser-tab 
    mode="preview" 
    import-content="./portfolio.json"
    edit="true"
    show-conversation="false">
</ai-browser-tab>
```

### Collaborative Content Creation
Share editable AI-generated content:
```html
<ai-browser-tab 
    mode="edit" 
    import-content="./shared-content.json">
</ai-browser-tab>
```

## 🔧 Requirements

- **Node.js** 18+ for development
- **Modern browser** with ES modules support
- **Ollama** running locally or remote API for AI functionality

## 📖 Documentation

- [AI Native Webpage Guide](./docs/AI-NATIVE-WEBPAGE.md) - Complete guide to AI-native website creation
- [API Reference](https://sctlib.gitlab.io/bagent) - Full API documentation
- [Examples](./content/) - Example exported states and use cases

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/amazing-feature`
3. Commit changes: `git commit -m 'Add amazing feature'`
4. Push to branch: `git push origin feature/amazing-feature`
5. Open a Pull Request

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- Built with [SvelteKit](https://kit.svelte.dev/) and [TypeScript](https://www.typescriptlang.org/)
- Powered by [Ollama](https://ollama.ai/) for local AI models
- Inspired by the vision of AI-native web applications

---

**Start building AI-native websites today!**

```bash
npm install @sctlib/bagent
```

Visit [gitlab.com/sctlib/bagent](https://gitlab.com/sctlib/bagent) for interactive examples and full documentation.