Building Your First AI App

This comprehensive tutorial will guide you through building your first AI application using BlueNexus AI. We'll create a simple AI-powered task management app that demonstrates key platform features.

What We'll Build

A task management application that:

• Stores tasks in a data collection

• Uses AI to categorize and prioritize tasks

• Integrates with external services (Google Calendar)

• Provides intelligent task suggestions

Prerequisites

• BlueNexus AI account

• Basic knowledge of JavaScript/Node.js

• Git installed on your machine

Step 1: Project Setup

Initialize the Project

mkdir my-ai-task-app
cd my-ai-task-app
npm init -y

Install Dependencies

npm install @bluenexus/sdk express dotenv
npm install -D nodemon

Project Structure

my-ai-task-app/
├── src/
│   ├── app.js
│   ├── routes/
│   │   ├── tasks.js
│   │   └── ai.js
│   └── services/
│       ├── bluenexus.js
│       └── ai.js
├── .env
├── package.json
└── README.md

Step 2: Environment Configuration

Create a .env file:

BLUENEXUS_API_KEY=your_api_key_here
PORT=3000

Step 3: BlueNexus Client Setup

Create src/services/bluenexus.js:

const { BlueNexusClient } = require('@bluenexus/sdk');

class BlueNexusService {
  constructor() {
    this.client = new BlueNexusClient({
      apiKey: process.env.BLUENEXUS_API_KEY
    });
  }

  // Data operations
  async createTask(task) {
    return await this.client.data.create('tasks', task);
  }

  async getTasks(filters = {}) {
    return await this.client.data.list('tasks', { filters });
  }

  async updateTask(taskId, updates) {
    return await this.client.data.update('tasks', taskId, updates);
  }

  async deleteTask(taskId) {
    return await this.client.data.delete('tasks', taskId);
  }

  // AI operations
  async categorizeTask(task) {
    const response = await this.client.llm.createCompletion({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: 'You are a task categorization assistant. Categorize tasks into: work, personal, health, learning, or other.'
        },
        {
          role: 'user',
          content: `Categorize this task: "${task.title}" - ${task.description}`
        }
      ],
      temperature: 0.3
    });

    return response.choices[0].message.content.trim();
  }

  async prioritizeTask(task) {
    const response = await this.client.llm.createCompletion({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: 'You are a task prioritization assistant. Rate tasks from 1-5 (1=low, 5=high) based on urgency and importance.'
        },
        {
          role: 'user',
          content: `Prioritize this task: "${task.title}" - ${task.description}. Due: ${task.dueDate}`
        }
      ],
      temperature: 0.3
    });

    const priority = parseInt(response.choices[0].message.content.match(/\d+/)?.[0] || '3');
    return Math.max(1, Math.min(5, priority));
  }

  async generateTaskSuggestions(userTasks) {
    const response = await this.client.llm.createCompletion({
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: 'system',
          content: 'You are a productivity assistant. Suggest 3 helpful tasks based on the user\'s existing tasks.'
        },
        {
          role: 'user',
          content: `Based on these tasks: ${userTasks.map(t => t.title).join(', ')}, suggest 3 helpful tasks.`
        }
      ],
      temperature: 0.7
    });

    return response.choices[0].message.content.split('\n').filter(line => line.trim());
  }
}

module.exports = new BlueNexusService();

Step 4: Express App Setup

Create src/app.js:

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const taskRoutes = require('./routes/tasks');
const aiRoutes = require('./routes/ai');

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware
app.use(cors());
app.use(express.json());

// Routes
app.use('/api/tasks', taskRoutes);
app.use('/api/ai', aiRoutes);

// Health check
app.get('/health', (req, res) => {
  res.json({ status: 'OK', timestamp: new Date().toISOString() });
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Step 5: Task Routes

Create src/routes/tasks.js:

const express = require('express');
const router = express.Router();
const bluenexus = require('../services/bluenexus');

// Create a new task
router.post('/', async (req, res) => {
  try {
    const { title, description, dueDate } = req.body;
    
    if (!title) {
      return res.status(400).json({ error: 'Title is required' });
    }

    // Create task with AI categorization and prioritization
    const task = {
      title,
      description: description || '',
      dueDate: dueDate || null,
      status: 'pending',
      createdAt: new Date().toISOString()
    };

    // Use AI to categorize and prioritize
    const [category, priority] = await Promise.all([
      bluenexus.categorizeTask(task),
      bluenexus.prioritizeTask(task)
    ]);

    task.category = category;
    task.priority = priority;

    const createdTask = await bluenexus.createTask(task);
    res.status(201).json(createdTask);
  } catch (error) {
    console.error('Error creating task:', error);
    res.status(500).json({ error: 'Failed to create task' });
  }
});

// Get all tasks
router.get('/', async (req, res) => {
  try {
    const { category, status, priority } = req.query;
    const filters = {};

    if (category) filters.category = category;
    if (status) filters.status = status;
    if (priority) filters.priority = parseInt(priority);

    const tasks = await bluenexus.getTasks(filters);
    res.json(tasks);
  } catch (error) {
    console.error('Error fetching tasks:', error);
    res.status(500).json({ error: 'Failed to fetch tasks' });
  }
});

// Update a task
router.put('/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const updates = req.body;

    const updatedTask = await bluenexus.updateTask(id, updates);
    res.json(updatedTask);
  } catch (error) {
    console.error('Error updating task:', error);
    res.status(500).json({ error: 'Failed to update task' });
  }
});

// Delete a task
router.delete('/:id', async (req, res) => {
  try {
    const { id } = req.params;
    await bluenexus.deleteTask(id);
    res.status(204).send();
  } catch (error) {
    console.error('Error deleting task:', error);
    res.status(500).json({ error: 'Failed to delete task' });
  }
});

module.exports = router;

Step 6: AI Routes

Create src/routes/ai.js:

const express = require('express');
const router = express.Router();
const bluenexus = require('../services/bluenexus');

// Get AI task suggestions
router.get('/suggestions', async (req, res) => {
  try {
    const tasks = await bluenexus.getTasks();
    const suggestions = await bluenexus.generateTaskSuggestions(tasks.data);
    
    res.json({ suggestions });
  } catch (error) {
    console.error('Error generating suggestions:', error);
    res.status(500).json({ error: 'Failed to generate suggestions' });
  }
});

// Categorize a task
router.post('/categorize', async (req, res) => {
  try {
    const { task } = req.body;
    const category = await bluenexus.categorizeTask(task);
    res.json({ category });
  } catch (error) {
    console.error('Error categorizing task:', error);
    res.status(500).json({ error: 'Failed to categorize task' });
  }
});

// Prioritize a task
router.post('/prioritize', async (req, res) => {
  try {
    const { task } = req.body;
    const priority = await bluenexus.prioritizeTask(task);
    res.json({ priority });
  } catch (error) {
    console.error('Error prioritizing task:', error);
    res.status(500).json({ error: 'Failed to prioritize task' });
  }
});

module.exports = router;

Step 7: Frontend (Optional)

Create a simple HTML frontend in public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Task Manager</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .task { border: 1px solid #ddd; padding: 15px; margin: 10px 0; border-radius: 5px; }
        .priority-high { border-left: 4px solid #e74c3c; }
        .priority-medium { border-left: 4px solid #f39c12; }
        .priority-low { border-left: 4px solid #27ae60; }
        .category { background: #3498db; color: white; padding: 2px 8px; border-radius: 3px; font-size: 12px; }
        form { margin: 20px 0; }
        input, textarea, button { margin: 5px; padding: 8px; }
        button { background: #3498db; color: white; border: none; border-radius: 3px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>AI Task Manager</h1>
    
    <form id="taskForm">
        <input type="text" id="title" placeholder="Task title" required>
        <textarea id="description" placeholder="Task description"></textarea>
        <input type="date" id="dueDate">
        <button type="submit">Add Task</button>
    </form>

    <div id="tasks"></div>
    <button onclick="loadSuggestions()">Get AI Suggestions</button>
    <div id="suggestions"></div>

    <script>
        // Load tasks on page load
        loadTasks();

        // Add task form handler
        document.getElementById('taskForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const task = {
                title: document.getElementById('title').value,
                description: document.getElementById('description').value,
                dueDate: document.getElementById('dueDate').value
            };

            try {
                const response = await fetch('/api/tasks', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(task)
                });

                if (response.ok) {
                    loadTasks();
                    document.getElementById('taskForm').reset();
                }
            } catch (error) {
                console.error('Error adding task:', error);
            }
        });

        // Load tasks
        async function loadTasks() {
            try {
                const response = await fetch('/api/tasks');
                const tasks = await response.json();
                
                const tasksDiv = document.getElementById('tasks');
                tasksDiv.innerHTML = tasks.data.map(task => `
                    <div class="task priority-${task.priority <= 2 ? 'low' : task.priority <= 3 ? 'medium' : 'high'}">
                        <h3>${task.title}</h3>
                        <p>${task.description}</p>
                        <span class="category">${task.category}</span>
                        <span>Priority: ${task.priority}/5</span>
                        <button onclick="deleteTask('${task.id}')">Delete</button>
                    </div>
                `).join('');
            } catch (error) {
                console.error('Error loading tasks:', error);
            }
        }

        // Delete task
        async function deleteTask(id) {
            try {
                await fetch(`/api/tasks/${id}`, { method: 'DELETE' });
                loadTasks();
            } catch (error) {
                console.error('Error deleting task:', error);
            }
        }

        // Load AI suggestions
        async function loadSuggestions() {
            try {
                const response = await fetch('/api/ai/suggestions');
                const data = await response.json();
                
                const suggestionsDiv = document.getElementById('suggestions');
                suggestionsDiv.innerHTML = '<h3>AI Suggestions:</h3>' + 
                    data.suggestions.map(suggestion => `<p>• ${suggestion}</p>`).join('');
            } catch (error) {
                console.error('Error loading suggestions:', error);
            }
        }
    </script>
</body>
</html>

Step 8: Running the Application

Start the Server

npm start

Test the API

# Create a task
curl -X POST http://localhost:3000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{"title": "Learn AI development", "description": "Study machine learning concepts"}'

# Get all tasks
curl http://localhost:3000/api/tasks

# Get AI suggestions
curl http://localhost:3000/api/ai/suggestions

Step 9: Adding External Integrations

Google Calendar Integration

Add Google Calendar integration to sync tasks:

// In src/services/bluenexus.js
async createGoogleCalendarEvent(task) {
  const connection = await this.client.connections.get('google');
  
  if (!connection) {
    throw new Error('Google connection not found');
  }

  const event = {
    summary: task.title,
    description: task.description,
    start: {
      dateTime: task.dueDate,
      timeZone: 'UTC'
    },
    end: {
      dateTime: new Date(new Date(task.dueDate).getTime() + 3600000).toISOString(),
      timeZone: 'UTC'
    }
  };

  return await this.client.connections.call('google', 'calendar.events.insert', {
    calendarId: 'primary',
    resource: event
  });
}

Step 10: Deployment

Environment Variables

Set up environment variables in your deployment platform:

BLUENEXUS_API_KEY=your_production_api_key
NODE_ENV=production
PORT=3000

Package.json Scripts

{
  "scripts": {
    "start": "node src/app.js",
    "dev": "nodemon src/app.js",
    "test": "jest"
  }
}

Next Steps

Enhancements

1. User Authentication: Add user accounts and authentication

2. Real-time Updates: Use WebSockets for real-time task updates

3. Advanced AI: Implement more sophisticated AI features

4. Mobile App: Build a mobile application

5. Analytics: Add task completion analytics

Additional Features

1. Task Dependencies: Link related tasks

2. Time Tracking: Track time spent on tasks

3. Team Collaboration: Multi-user task management

4. Notifications: Email and push notifications

5. Reporting: Generate task reports

Troubleshooting

Common Issues

1. API Key Issues: Verify your API key is correct

2. Rate Limiting: Implement exponential backoff

3. Network Errors: Check your internet connection

4. CORS Issues: Configure CORS properly for frontend

Debug Mode

Enable debug mode for detailed logging:

const client = new BlueNexusClient({
  apiKey: process.env.BLUENEXUS_API_KEY,
  debug: true
});

Related Documentation

• Getting Started - Platform setup

• Data API Reference - Data operations

• LLM Services API - AI capabilities

• Connections API - External integrations

• Authentication Guide - Authentication methods