### Start Development Server

Source: https://github.com/reachbrt/vueai/blob/main/demo/README.md

After installing dependencies and setting up API keys, run this command to start the local development server for the demo application.

```bash
npm run dev
```

--------------------------------

### Clone and Run AIVue Demo

Source: https://github.com/reachbrt/vueai/blob/main/docs/DEMO_FIXES.md

Steps to clone the AIVue repository, run the setup script, and start the demo application.

```bash
git clone https://github.com/reachbrt/vueai.git
cd vueai
./simple-fix.sh
cd demo
npm run dev
```

--------------------------------

### Install All AIVue Packages

Source: https://github.com/reachbrt/vueai/blob/main/MASTER_DOCUMENTATION.md

Install all available AIVue packages at once for a complete setup.

```bash
npm install @aivue/core @aivue/chatbot @aivue/smartform @aivue/smart-datatable @aivue/autosuggest @aivue/360-spin @aivue/image-caption @aivue/voice-actions @aivue/emotion-ui @aivue/predictive-input @aivue/doc-intelligence @aivue/smart-notify @aivue/analytics
```

--------------------------------

### Install Core and UI Components

Source: https://github.com/reachbrt/vueai/blob/main/MASTER_DOCUMENTATION.md

Install the core package, which is required for all other components, and then install any desired UI components.

```bash
# Install core (required for all packages)
npm install @aivue/core

# Install any UI component
npm install @aivue/chatbot
npm install @aivue/smartform
npm install @aivue/smart-datatable
# ... etc
```

--------------------------------

### Clone Repository and Setup

Source: https://github.com/reachbrt/vueai/blob/main/docs/contributing.md

Clone the AIVue repository and set up the local development environment by adding the upstream remote and installing dependencies.

```bash
git clone https://github.com/YOUR_USERNAME/vueai.git
cd vueai
git remote add upstream https://github.com/reachbrt/vueai.git
npm install
```

--------------------------------

### Environment Variables Setup (.env)

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/ANGULAR_REACT_MIGRATION_GUIDE.md

Example of an .env file for storing environment-specific variables like API keys. These are typically used for sensitive information.

```bash
# .env
VITE_OPENAI_API_KEY=your_openai_key_here
VITE_STABILITY_API_KEY=your_stability_key_here
```

--------------------------------

### Install @aivue/smart-datatable and @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/PACKAGES_DOCUMENTATION.md

Install the packages required for the AI-powered SmartDataTable.

```bash
npm install @aivue/smart-datatable @aivue/core
```

--------------------------------

### React Project Setup with Vite

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/ANGULAR_REACT_MIGRATION_GUIDE.md

Commands to create a new React project using Vite with TypeScript template, navigate into the project directory, set up the package structure, and install dependencies.

```bash
# Create React project with Vite
npm create vite@latest react360spin -- --template react-ts
cd react360spin

# Create package structure
mkdir -p packages/react360-spin/src/{components,hooks,utils,types,styles}

# Install dependencies
npm install
```

--------------------------------

### Install VueAI Packages

Source: https://github.com/reachbrt/vueai/blob/main/COMPLETE_DOCUMENTATION_GUIDE.md

Install the core and chatbot packages using npm. Ensure you have Node.js and npm installed.

```bash
npm install @aivue/core @aivue/chatbot
```

--------------------------------

### Angular Project Setup for 360 Spin

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/ANGULAR_REACT_MIGRATION_GUIDE.md

Steps to create a new Angular workspace, generate a library, and install necessary dependencies for the 360 spin functionality.

```bash
ng new angular360spin --routing=false --style=css
cd angular360spin
ng generate library ng360-spin
npm install --save-dev @types/node
```

--------------------------------

### Install @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/MASTER_DOCUMENTATION.md

Install the core AI client library using npm.

```bash
npm install @aivue/core
```

--------------------------------

### Install @aivue/smartform and @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/docs/smartform.md

Install the necessary packages using npm, yarn, or pnpm.

```bash
# npm
npm install @aivue/smartform @aivue/core

# yarn
yarn add @aivue/smartform @aivue/core

# pnpm
pnpm add @aivue/smartform @aivue/core
```

--------------------------------

### Install VueAI Core and Components via npm

Source: https://github.com/reachbrt/vueai/blob/main/README.md

Install the core package and any additional component packages as needed. You can also install all packages at once.

```bash
# Install the core package
npm install @aivue/core

# Install component packages as needed
npm install @aivue/chatbot
npm install @aivue/autosuggest
npm install @aivue/smartform
npm install @aivue/image-caption
npm install @aivue/emotion-ui
npm install @aivue/doc-intelligence
npm install @aivue/predictive-input
npm install @aivue/smart-notify
npm install @aivue/voice-actions
npm install @aivue/analytics
npm install @aivue/smart-datatable
npm install @aivue/360-spin
npm install @aivue/browser-llm

# Or install all packages at once
npm install @aivue/core @aivue/chatbot @aivue/autosuggest @aivue/smartform @aivue/image-caption @aivue/emotion-ui @aivue/doc-intelligence @aivue/predictive-input @aivue/smart-notify @aivue/voice-actions @aivue/analytics @aivue/smart-datatable @aivue/360-spin @aivue/browser-llm
```

--------------------------------

### Install @aivue/core

Source: https://github.com/reachbrt/vueai/wiki/CORE

Install the core package using npm, yarn, or pnpm.

```bash
# npm
npm install @aivue/core

# yarn
yarn add @aivue/core

# pnpm
pnpm add @aivue/core
```

--------------------------------

### Install @aivue/360-spin

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/README.md

Install the package using npm.

```bash
npm install @aivue/360-spin
```

--------------------------------

### Install @aivue/mcp-client

Source: https://github.com/reachbrt/vueai/blob/main/packages/mcp/README.md

Install the MCP client package using npm.

```bash
npm install @aivue/mcp-client
```

--------------------------------

### Install @aivue/guided-form

Source: https://github.com/reachbrt/vueai/blob/main/packages/guided-form/README.md

Install the guided-form package and its core dependency using npm.

```bash
npm install @aivue/guided-form @aivue/core
```

--------------------------------

### Install @aivue/voice-actions and @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/PACKAGES_DOCUMENTATION.md

Install the necessary packages for voice actions and core functionalities.

```bash
npm install @aivue/voice-actions @aivue/core
```

--------------------------------

### Install AIVue Packages

Source: https://github.com/reachbrt/vueai/blob/main/QUICK_REFERENCE.md

Install the core, chatbot, and smartform packages using npm.

```bash
npm install @aivue/core @aivue/chatbot @aivue/smartform
```

--------------------------------

### Install @aivue/chatbot and @aivue/core

Source: https://github.com/reachbrt/vueai/wiki/CHATBOT

Install the necessary packages using npm, yarn, or pnpm.

```bash
# npm
npm install @aivue/chatbot @aivue/core

# yarn
yarn add @aivue/chatbot @aivue/core

# pnpm
pnpm add @aivue/chatbot @aivue/core
```

--------------------------------

### Install @aivue/autosuggest and @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/PACKAGES_DOCUMENTATION.md

Install the autosuggest package and core utilities using npm.

```bash
npm install @aivue/autosuggest @aivue/core
```

--------------------------------

### Install Doc Intelligence

Source: https://github.com/reachbrt/vueai/blob/main/packages/doc-intelligence/README.md

Install the package using npm.

```bash
npm install @aivue/doc-intelligence
```

--------------------------------

### Install Netlify CLI

Source: https://github.com/reachbrt/vueai/blob/main/ALL_PACKAGES_GUIDE.md

Install the Netlify CLI globally to manage Netlify deployments.

```bash
npm install -g netlify-cli
```

--------------------------------

### Install Dependencies

Source: https://github.com/reachbrt/vueai/wiki/WIKI_CONTRIBUTING

Install project dependencies using npm.

```bash
npm install
```

--------------------------------

### Install @aivue/emotion-ui

Source: https://github.com/reachbrt/vueai/blob/main/packages/emotion-ui/README.md

Install the emotion-ui package and its core dependency using npm.

```bash
npm install @aivue/emotion-ui @aivue/core
```

--------------------------------

### Install @aivue/chatbot with yarn

Source: https://github.com/reachbrt/vueai/blob/main/packages/chatbot/README.md

Install the chatbot package and core dependencies using yarn.

```bash
yarn add @aivue/chatbot @aivue/core
```

--------------------------------

### Install Vercel CLI

Source: https://github.com/reachbrt/vueai/blob/main/ALL_PACKAGES_GUIDE.md

Install the Vercel CLI globally to manage Vercel deployments.

```bash
npm install -g vercel
```

--------------------------------

### Install @aivue/autosuggest and @aivue/core

Source: https://github.com/reachbrt/vueai/blob/main/docs/autosuggest.md

Install the autosuggest package and its core dependency using npm, yarn, or pnpm.

```bash
# npm
npm install @aivue/autosuggest @aivue/core

# yarn
yarn add @aivue/autosuggest @aivue/core

# pnpm
pnpm add @aivue/autosuggest @aivue/core
```

--------------------------------

### Install @aivue/chatbot

Source: https://github.com/reachbrt/vueai/blob/main/MASTER_DOCUMENTATION.md

Install the chatbot UI package along with the core AI client library using npm.

```bash
npm install @aivue/chatbot @aivue/core
```

--------------------------------

### Install Hierarchical Memory

Source: https://github.com/reachbrt/vueai/blob/main/packages/hierarchical-memory/README.md

Install the library using npm. This is the first step to using the hierarchical memory features.

```bash
npm install @aivue/hierarchical-memory
```

--------------------------------

### Vue 2 Quick Start with GuidedFormContainer

Source: https://github.com/reachbrt/vueai/blob/main/packages/guided-form/README.md

Integrate the GuidedFormContainer component in a Vue 2 application. This example shows the setup using the Options API and the useGuidedForm composable.

```vue
<template>
  <div>
    <GuidedFormContainer
      :currentStep="currentStep"
      :currentStepIndex="currentStepIndex"
      :totalSteps="totalSteps"
      :progress="progress"
      :canGoBack="canGoBack"
      :canGoNext="canGoNext"
      :isComplete="isComplete"
      :isLoading="isLoading"
      :validationErrors="validationErrors"
      @next="goToNext"
      @previous="goToPrevious"
      @change="setAnswer"
    />
  </div>
</template>

<script>
import { useGuidedForm } from '@aivue/guided-form';

export default {
  setup() {
    const schema = { /* same as above */ };
    
    return useGuidedForm({ schema });
  },
};
</script>
```

--------------------------------

### Configure API Keys

Source: https://github.com/reachbrt/vueai/blob/main/demo/README.md

Copy the example environment file and add your API keys, such as the OpenAI API key, to the `.env` file for full functionality. A fallback provider is available if keys are omitted.

```bash
# OpenAI API Key
VITE_OPENAI_API_KEY=your_openai_key_here
```

--------------------------------

### Complete Smart Datatable Example

Source: https://github.com/reachbrt/vueai/blob/main/packages/smart-datatable/README.md

This example demonstrates the full integration of the SmartDataTable component with custom cell templates, AI client, actions, and event handlers. It includes setup for data, columns, and actions, along with custom styling.

```vue
<template>
  <div class="app">
    <SmartDataTable
      :data="products"
      :columns="columns"
      :ai-client="aiClient"
      title="Product Inventory"
      search-placeholder="Search products..."
      empty-message="No products found"
      :pagination="true"
      :page-size="25"
      :page-size-options="[10, 25, 50, 100]"
      :selectable="true"
      :actions="actions"
      theme="light"
      row-key="id"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
      @export="handleExport"
    >
      <!-- Custom cell for price -->
      <template #cell-price="{ value }">
        <span class="price">${{ value.toFixed(2) }}</span>
      </template>

      <!-- Custom cell for stock status -->
      <template #cell-stock="{ value }">
        <span :class="value > 10 ? 'in-stock' : 'low-stock'">
          {{ value }} units
        </span>
      </template>
    </SmartDataTable>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { AIClient } from '@aivue/core';
import { SmartDataTable } from '@aivue/smart-datatable';
import '@aivue/smart-datatable/style.css';

const aiClient = new AIClient({
  provider: 'openai',
  apiKey: import.meta.env.VITE_OPENAI_API_KEY
});

const products = ref([
  { id: 1, name: 'Laptop', category: 'Electronics', price: 999.99, stock: 15 },
  { id: 2, name: 'Mouse', category: 'Accessories', price: 29.99, stock: 50 },
  { id: 3, name: 'Keyboard', category: 'Accessories', price: 79.99, stock: 8 }
]);

const columns = ref([
  { key: 'id', label: 'ID', sortable: true },
  { key: 'name', label: 'Product Name', sortable: true },
  { key: 'category', label: 'Category', sortable: true },
  { key: 'price', label: 'Price', sortable: true, type: 'number' },
  { key: 'stock', label: 'Stock', sortable: true, type: 'number' }
]);

const actions = ref([
  { label: 'Edit', icon: '✏️', handler: editProduct },
  { label: 'Delete', icon: '🗑️', handler: deleteProduct },
  { label: 'View', icon: '👁️', handler: viewProduct }
]);

function handleRowClick(row) {
  console.log('Row clicked:', row);
}

function handleSelectionChange(rows) {
  console.log('Selected rows:', rows);
}

function handleExport(data, format) {
  console.log(`Exported ${data.length} rows as ${format}`);
}

function editProduct(product) {
  console.log('Edit:', product);
}

function deleteProduct(product) {
  console.log('Delete:', product);
}

function viewProduct(product) {
  console.log('View:', product);
}
</script>

<style scoped>
.price {
  font-weight: 600;
  color: #059669;
}

.in-stock {
  color: #059669;
}

.low-stock {
  color: #dc2626;
  font-weight: 600;
}
</style>
```

--------------------------------

### React Project Setup

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/MIGRATION_SUMMARY.md

Steps to set up a new React project using Vite and TypeScript. Includes commands for creating the project, building, and publishing.

```bash
npm create vite@latest react360spin -- --template react-ts
# Copy code from documentation
npm run build
npm publish
```

--------------------------------

### Angular Project Setup

Source: https://github.com/reachbrt/vueai/blob/main/packages/360-spin/MIGRATION_SUMMARY.md

Steps to set up a new Angular project and generate a library for the 360-spin component. Includes commands for creating the project, generating the library, building, and publishing.

```bash
ng new angular360spin
ng generate library ng360-spin
# Copy code from documentation
npm run build
npm publish
```

--------------------------------

### Run Demo from Demo Directory

Source: https://github.com/reachbrt/vueai/blob/main/demo/README.md

Navigate to the 'demo' directory and use npm scripts or Vite directly to run the development server. This provides more granular control over the demo environment.

```bash
cd demo
npm run dev
```

```bash
cd demo
npm start
```

```bash
cd demo
npx vite --host localhost --port 8080
```

--------------------------------

### AIClient Streaming Chat Example

Source: https://github.com/reachbrt/vueai/blob/main/MASTER_DOCUMENTATION.md

Initiate a streaming chat request with the AIClient and handle events for start, token reception, completion, and errors.

```typescript
client.chatStream(
  [{ role: 'user', content: 'Write a poem' }],
  {
    onStart: () => console.log('Started'),
    onToken: (token) => console.log(token),
    onComplete: (text) => console.log('Done:', text),
    onError: (error) => console.error(error)
  }
);
```

--------------------------------

### Build Demo for React

Source: https://github.com/reachbrt/vueai/blob/main/QUICK_START_GUIDE.md

Command to build the demo application for React.

```bash
npm run build
```

--------------------------------

### Vue 3 Quick Start with GuidedFormContainer

Source: https://github.com/reachbrt/vueai/blob/main/packages/guided-form/README.md

Integrate the GuidedFormContainer component in a Vue 3 application. This example demonstrates setting up the form schema and using the useGuidedForm composable to manage form state and interactions.

```vue
<template>
  <div>
    <GuidedFormContainer
      :currentStep="currentStep"
      :currentStepIndex="currentStepIndex"
      :totalSteps="totalSteps"
      :progress="progress"
      :canGoBack="canGoBack"
      :canGoNext="canGoNext"
      :isComplete="isComplete"
      :isLoading="isLoading"
      :validationErrors="validationErrors"
      :aiEnabled="true"
      :showProgress="true"
      @next="goToNext"
      @previous="goToPrevious"
      @change="setAnswer"
      @getHint="handleGetHint"
    />
  </div>
</template>

<script setup>
import { useGuidedForm } from '@aivue/guided-form';

const schema = {
  id: 'contact-form',
  name: 'Contact Information',
  version: '1.0.0',
  status: 'published',
  steps: [
    {
      id: 'step-1',
      type: 'question',
      field: {
        fieldId: 'name',
        fieldType: 'text',
        required: true,
      },
      ui: {
        title: "What's your name?",
        subtitle: 'We\'d love to know who we\'re talking to',
        helpText: 'Enter your full name',
      },
    },
    {
      id: 'step-2',
      type: 'question',
      field: {
        fieldId: 'email',
        fieldType: 'email',
        required: true,
        validationRules: [
          { type: 'email', message: 'Please enter a valid email address' }
        ],
      },
      ui: {
        title: "What's your email address?",
        subtitle: 'We\'ll use this to get in touch',
      },
    },
  ],
  settings: {
    aiFlags: {
      enabled: true,
      provider: 'openai',
      apiKey: 'your-api-key',
      model: 'gpt-3.5-turbo',
    },
    keyboard: {
      enterToNext: true,
      numericShortcuts: true,
      tabNavigation: true,
    },
  },
};

const {
  currentStep,
  currentStepIndex,
  totalSteps,
  progress,
  canGoBack,
  canGoNext,
  isComplete,
  isLoading,
  validationErrors,
  goToNext,
  goToPrevious,
  setAnswer,
  getAIHint,
} = useGuidedForm({ schema });

const handleGetHint = async (type) => {
  const hints = await getAIHint(type);
  console.log('AI Hints:', hints);
};
</script>
```

--------------------------------

### TypeScript AI Client Example

Source: https://github.com/reachbrt/vueai/blob/main/demo/public/index.html

Demonstrates how to create a typed AI client and message array in TypeScript for interacting with AI models. Ensure you have the '@aivue/core' package installed and your API key configured in environment variables.

```typescript
import { AIClient, Message } from '@aivue/core';

// Create a typed AI client
const client: AIClient = new AIClient({
  provider: 'openai',
  apiKey: process.env.OPENAI_API_KEY,
  model: 'gpt-4'
});

// Create a typed message array
const messages: Message[] = [
  {
    role: 'system',
    content: 'You are a helpful assistant.'
  },
  {
    role: 'user',
    content: 'Hello, AI!'
  }
];

// Type-safe function
async function getResponse(messages: Message[]): Promise {
  return await client.chat(messages);
}
```

--------------------------------

### Quick Start with OpenAI

Source: https://github.com/reachbrt/vueai/blob/main/docs/AI_PROVIDERS.md

Configure the AI client to use OpenAI. Replace 'your-openai-api-key' with your actual key. Choose between 'gpt-4' or 'gpt-3.5-turbo' models.

```javascript
import { AIClient } from '@aivue/core';

// Create an AI client with OpenAI
const aiClient = new AIClient({
  provider: 'openai',
  apiKey: 'your-openai-api-key', // Replace with your actual API key
  options: {
    model: 'gpt-4', // or 'gpt-3.5-turbo' for a more economical option
    temperature: 0.7,
    maxTokens: 1000
  }
});
```

--------------------------------

### useAiTableQuery Composable Setup

Source: https://github.com/reachbrt/vueai/blob/main/packages/smart-datatable/DETAILED_DOCUMENTATION.md

Composable for natural language query processing. It handles converting queries to filters, getting suggestions, and applying filters to data. Requires an AI client, table schema, and an optional query result handler.

```typescript
import { useAiTableQuery } from '@aivue/smart-datatable';

const { 
  loading,
  error,
  lastQuery,
  lastResult,
  queryToFilter,
  getSuggestions,
  applyFilter
} = useAiTableQuery({
  aiClient,
  schema: ref({
    columns: [...],
    rowCount: 100,
    sampleRows: [...] 
  }),
  onQueryResult: (result) => {
    console.log('Query processed:', result);
  }
});
```

--------------------------------

### Demo Integration with OpenAI

Source: https://github.com/reachbrt/vueai/blob/main/docs/AI_PROVIDERS.md

Example of updating the demo client configuration to use OpenAI. Remember to replace 'your-api-key' with your actual key.

```javascript
import { AIClient } from '@aivue/core';

export const aiClient = new AIClient({
  provider: 'openai',
  apiKey: 'your-api-key', // Replace with your actual API key
  options: {
    model: 'gpt-4',
    temperature: 0.7,
    maxTokens: 1000
  }
});
```

--------------------------------

### useAiInsights Composable Setup

Source: https://github.com/reachbrt/vueai/blob/main/packages/smart-datatable/DETAILED_DOCUMENTATION.md

Composable for AI-powered data insights. It allows generating various types of insights (trends, outliers, etc.), getting summaries, and clearing insights. Requires an AI client, table schema, data, and optional configuration for insight categories.

```typescript
import { useAiInsights } from '@aivue/smart-datatable';

const { 
  insights,
  loading,
  error,
  hasInsights,
  generateInsights,
  generateContextualInsights,
  getSummary,
  clearInsights
} = useAiInsights({
  aiClient,
  schema,
  data,
  config: {
    categories: ['trends', 'outliers', 'recommendations']
  }
});
```

--------------------------------

### Install @aivue/tabular-intelligence

Source: https://github.com/reachbrt/vueai/blob/main/packages/tabular-intelligence/README.md

Install the package using npm, yarn, or pnpm. Ensure @aivue/core is also installed.

```bash
# npm
npm install @aivue/tabular-intelligence @aivue/core

# yarn
yarn add @aivue/tabular-intelligence @aivue/core

# pnpm
pnpm add @aivue/tabular-intelligence @aivue/core
```

--------------------------------

### Set up AI Client with OpenAI

Source: https://github.com/reachbrt/vueai/blob/main/packages/autosuggest/README.md

Initialize an AIClient from @aivue/core, specifying the provider, API key (using environment variables), and the desired model.

```javascript
// ai-client.js
import { AIClient } from '@aivue/core';

export const aiClient = new AIClient({
  provider: 'openai', // or 'anthropic', 'gemini', 'huggingface', 'ollama', 'deepseek'
  apiKey: import.meta.env.VITE_OPENAI_API_KEY, // Use environment variables for API keys
  model: 'gpt-4o' // Specify the model to use
});

```

--------------------------------

### Install AIVue Core with npm

Source: https://github.com/reachbrt/vueai/wiki/GETTING_STARTED

Install the core AIVue package using npm. Additional packages can be installed separately or all at once.

```bash
# Using npm
npm install @aivue/core

# Install additional packages as needed
npm install @aivue/chatbot
npm install @aivue/autosuggest
npm install @aivue/smartform

# Or install all packages at once
npm install @aivue/core @aivue/chatbot @aivue/autosuggest @aivue/smartform
```

--------------------------------

### Run Demo from Root Directory

Source: https://github.com/reachbrt/vueai/blob/main/demo/README.md

Execute the demo application from the project's root directory using npm scripts or the provided shell script. This command starts the development server.

```bash
npm run demo
```

```bash
./run-demo.sh
```

--------------------------------

### Install @aivue/predictive-input

Source: https://github.com/reachbrt/vueai/blob/main/packages/predictive-input/README.md

Install the package using npm.

```bash
npm install @aivue/predictive-input
```

--------------------------------

### Clone Repository and Setup

Source: https://github.com/reachbrt/vueai/wiki/WIKI_CONTRIBUTING

Clone the AIVue repository and set up the upstream remote for future updates.

```bash
git clone https://github.com/YOUR_USERNAME/vueai.git
cd vueai
git remote add upstream https://github.com/reachbrt/vueai.git
```

--------------------------------

### Install Core and Component Packages

Source: https://github.com/reachbrt/vueai/blob/main/ALL_PACKAGES_GUIDE.md

Install the core package, which is required for all other packages, and any additional component packages you intend to use.

```bash
npm install @aivue/core

npm install @aivue/chatbot
npm install @aivue/smartform
# ... etc
```

--------------------------------

### Install @aivue/mcp

Source: https://github.com/reachbrt/vueai/blob/main/packages/mcp/QUICK_START.md

Install the @aivue/mcp package using npm.

```bash
npm install @aivue/mcp
```

--------------------------------

### Proxy Configuration Example

Source: https://github.com/reachbrt/vueai/blob/main/COMPLETE_PACKAGES_DOCUMENTATION.md

Shows how to configure proxy settings for secure API requests.

```APIDOC
## Proxy Configuration

### Description
Configure proxy settings to securely route API requests.

### Usage
```vue
<AiChatWindow
  :proxy-url="'https://your-proxy.com/api'"
  :proxy-headers="{
    'X-Custom-Header': 'value'
  }"
/>
```
```

--------------------------------

### API Key Handling Example

Source: https://github.com/reachbrt/vueai/blob/main/packages/autosuggest/README.md

Example demonstrating secure API key handling using environment variables.

```APIDOC
## API Key Handling

For security reasons, never hardcode API keys in your code. Use environment variables instead:

```javascript
// .env file
VITE_OPENAI_API_KEY=your-api-key

// In your code
const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
```
```

--------------------------------

### Install Smart Datatable Dependencies

Source: https://github.com/reachbrt/vueai/blob/main/packages/smart-datatable/DETAILED_DOCUMENTATION.md

Install the necessary packages for Smart Datatable and the core AI client using npm. Ensure you have both packages installed for full functionality.

```bash
# Install
npm install @aivue/smart-datatable @aivue/core
```

--------------------------------

### Component Registration Example

Source: https://github.com/reachbrt/vueai/blob/main/packages/autosuggest/README.md

Example of how to import and register the Autosuggest component.

```APIDOC
## Component Registration

```javascript
// Correct import
import { Autosuggest } from '@aivue/autosuggest';

// For local registration in a component
export default {
  components: {
    Autosuggest
  }
}

// Or with script setup
import { Autosuggest } from '@aivue/autosuggest';
```

When using the component in templates, you can use either PascalCase or kebab-case:

```html
<!-- Both of these work -->
<Autosuggest :client="aiClient" />
<autosuggest :client="aiClient" />
```
```

--------------------------------

### List and Execute Tools

Source: https://github.com/reachbrt/vueai/blob/main/packages/mcp/QUICK_START.md

Connect to the MCP server, list available tools, and then execute the first tool in the list. This demonstrates a common workflow for interacting with tools.

```typescript
const { tools, connect, callTool } = useMCP({
  transport: {
    type: 'http',
    url: 'http://localhost:3000/mcp',
  },
});

await connect();

// List all tools
console.log('Available tools:', tools.value);

// Execute first tool
if (tools.value.length > 0) {
  const result = await callTool({
    name: tools.value[0].name,
    arguments: {},
  });
  console.log('Result:', result);
}
```

--------------------------------

### Install @aivue/browser-llm

Source: https://github.com/reachbrt/vueai/blob/main/packages/browser-llm/README.md

Install the browser-llm package using npm, yarn, or pnpm.

```bash
npm install @aivue/browser-llm
# or
yarn add @aivue/browser-llm
# or
pnpm add @aivue/browser-llm
```

--------------------------------

### Set up AI Client with OpenAI

Source: https://github.com/reachbrt/vueai/blob/main/packages/chatbot/README.md

Initialize an AIClient instance from '@aivue/core' for interacting with AI models. Ensure API keys are stored securely in environment variables.

```javascript
// ai-client.js
import { AIClient } from '@aivue/core';

export const aiClient = new AIClient({
  provider: 'openai', // or 'claude', 'gemini', 'huggingface', 'ollama', 'deepseek'
  apiKey: import.meta.env.VITE_OPENAI_API_KEY, // Use environment variables for API keys
  model: 'gpt-4o' // Specify the model to use
});
```

--------------------------------

### Install @aivue/ai-360-generator

Source: https://github.com/reachbrt/vueai/blob/main/packages/ai-360-generator/README.md

Install the AI 360 Generator package and its core dependency.

```bash
npm install @aivue/ai-360-generator @aivue/core
```

--------------------------------

### Set Up Monorepo with npm Workspaces

Source: https://github.com/reachbrt/vueai/blob/main/QUICK_START_GUIDE.md

Create a monorepo structure by defining workspace directories in the root package.json.

```bash
mkdir -p packages/{core,chatbot,autosuggest,smartform,analytics}
```