@sctlib/bagent

v0.0.3

Published

4 months ago

AI Native Browser Tab - Autonomous AI agent for browser-based content generation

0High
0Medium
0Low

user-09876

ai browser agent svelte web-components llm autonomous

🤖 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.

✨ 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

npm install @sctlib/bagent

Option 2: CDN (No Build Required)

<!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

<!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

<!-- 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:

<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:

<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:

<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:

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:

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

3. Build Static Site

Transform exported states into deployable websites:

# 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/:

<!-- 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

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

# 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:

# .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:

# 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:

<ai-browser-tab 
    mode="preview" 
    import-content="./docs-state.json"
    edit="false">
</ai-browser-tab>

Interactive Dashboards

Build live data dashboards with AI assistance:

<ai-browser-tab 
    mode="edit" 
    show-conversation="true">
</ai-browser-tab>

Quick CDN Integration

No-build setup for rapid prototyping:

<!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:

<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:

<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 - Complete guide to AI-native website creation
API Reference - Full API documentation
Examples - Example exported states and use cases

🤝 Contributing

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with SvelteKit and TypeScript
Powered by Ollama for local AI models
Inspired by the vision of AI-native web applications

Start building AI-native websites today!

npm install @sctlib/bagent

Visit gitlab.com/sctlib/bagent for interactive examples and full documentation.