Build your first AI application in minutes with our comprehensive quick start guide

Quick Start Guide

Get up and running with Soom AI in just 15 minutes! This guide will walk you through building a complete AI-powered chat application from scratch.

What You'll Build

By the end of this guide, you'll have:

✅ A working AI chat application
✅ A RESTful API for chat functionality
✅ An AI agent that can answer questions
✅ A simple web interface
✅ Your application deployed to the cloud

Prerequisites

Make sure you have completed the Getting Started guide and have:

Soom CLI installed and authenticated
A Soom AI account with API access
Node.js 18+ installed
A code editor ready

Step 1: Create Your Project

Let's start by creating a new project:

# Create a new project
soom init my-chat-app

# Navigate to the project directory
cd my-chat-app

# Install dependencies
npm install

Step 2: Create Your AI Agent

First, let's create an AI agent that can handle chat conversations:

# Create a new agent
soom agent create chat-agent

This will create a new agent file at src/agents/chat-agent/index.ts. Let's customize it:

// src/agents/chat-agent/index.ts
import { Agent } from '@soom/agent-sdk';

export class ChatAgent extends Agent {
  constructor() {
    super({
      name: 'chat-agent',
      description: 'A helpful AI assistant for chat conversations',
      model: 'gpt-4',
      capabilities: ['text-generation', 'reasoning', 'conversation'],
    });
  }

  async process(input: string, context?: any): Promise<string> {
    // Add some personality to your agent
    const systemPrompt = `You are a helpful AI assistant. You're friendly, knowledgeable, and always ready to help. 
    Keep your responses concise but informative. If you don't know something, say so honestly.`;

    // Process the user input
    const response = await this.generateResponse(input, {
      systemPrompt,
      context: context || {},
    });

    return response;
  }

  async generateResponse(input: string, options: any): Promise<string> {
    // This is where you'd integrate with your AI model
    // For now, we'll return a simple response
    return `Hello! I received your message: "${input}". How can I help you today?`;
  }
}

Step 3: Create Your API

Now let's create a RESTful API to handle chat requests:

# Create a new API endpoint
soom api create chat

This will create a new API file at src/apis/chat/index.ts. Let's customize it:

// src/apis/chat/index.ts
import { APIRoute } from '@soom/api-sdk';
import { ChatAgent } from '../../agents/chat-agent';

// Initialize the chat agent
const chatAgent = new ChatAgent();

export const chatAPI: APIRoute = {
  method: 'POST',
  path: '/api/chat',
  handler: async (req, res) => {
    try {
      const { message, context } = req.body;

      if (!message) {
        return res.status(400).json({
          error: 'Message is required',
        });
      }

      // Process the message with the chat agent
      const response = await chatAgent.process(message, context);

      res.json({
        success: true,
        response,
        timestamp: new Date().toISOString(),
      });
    } catch (error) {
      console.error('Chat API error:', error);
      res.status(500).json({
        error: 'Internal server error',
      });
    }
  },
};

// Also create a GET endpoint for health checks
export const healthCheck: APIRoute = {
  method: 'GET',
  path: '/api/health',
  handler: async (req, res) => {
    res.json({
      status: 'healthy',
      timestamp: new Date().toISOString(),
    });
  },
};

Step 4: Create a Simple Web Interface

Let's create a simple HTML interface to test our chat application:

# Create a public directory for static files
mkdir -p public

Create a simple HTML file:

<!-- 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>Soom AI Chat</title>
    <style>
      body {
        font-family:
          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f5f5f5;
      }
      .chat-container {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      .chat-messages {
        height: 400px;
        overflow-y: auto;
        border: 1px solid #ddd;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
      }
      .message {
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 5px;
      }
      .user-message {
        background-color: #007bff;
        color: white;
        text-align: right;
      }
      .ai-message {
        background-color: #f8f9fa;
        color: #333;
      }
      .input-container {
        display: flex;
        gap: 10px;
      }
      input[type='text'] {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 16px;
      }
      button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #0056b3;
      }
      button:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <div class="chat-container">
      <h1>🤖 Soom AI Chat</h1>
      <div class="chat-messages" id="chatMessages">
        <div class="message ai-message">
          <strong>AI Assistant:</strong> Hello! I'm your AI assistant. How can I
          help you today?
        </div>
      </div>
      <div class="input-container">
        <input
          type="text"
          id="messageInput"
          placeholder="Type your message here..."
        />
        <button id="sendButton" onclick="sendMessage()">Send</button>
      </div>
    </div>

    <script>
      const chatMessages = document.getElementById('chatMessages');
      const messageInput = document.getElementById('messageInput');
      const sendButton = document.getElementById('sendButton');

      function addMessage(content, isUser = false) {
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
        messageDiv.innerHTML = `<strong>${isUser ? 'You' : 'AI Assistant'}:</strong> ${content}`;
        chatMessages.appendChild(messageDiv);
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }

      async function sendMessage() {
        const message = messageInput.value.trim();
        if (!message) return;

        // Add user message to chat
        addMessage(message, true);
        messageInput.value = '';
        sendButton.disabled = true;
        sendButton.textContent = 'Sending...';

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

          const data = await response.json();

          if (data.success) {
            addMessage(data.response);
          } else {
            addMessage('Sorry, I encountered an error. Please try again.');
          }
        } catch (error) {
          console.error('Error:', error);
          addMessage('Sorry, I encountered an error. Please try again.');
        } finally {
          sendButton.disabled = false;
          sendButton.textContent = 'Send';
        }
      }

      // Allow sending message with Enter key
      messageInput.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
          sendMessage();
        }
      });
    </script>
  </body>
</html>

Step 5: Configure Your Project

Update your project configuration to serve static files:

// .soom/config.json
{
  "project": {
    "name": "my-chat-app",
    "version": "1.0.0",
    "description": "A simple AI chat application"
  },
  "agents": {
    "enabled": true,
    "defaultModel": "gpt-4"
  },
  "apis": {
    "enabled": true,
    "port": 3000,
    "staticFiles": "./public"
  },
  "deployment": {
    "environment": "development",
    "region": "us-east-1"
  }
}

Step 6: Test Your Application

Now let's test your application locally:

# Start the development server
soom dev

This will start your application on http://localhost:3000. You should see:

Your chat interface at http://localhost:3000
API health check at http://localhost:3000/api/health
Chat API at http://localhost:3000/api/chat

Test the chat functionality by typing a message and clicking "Send"!

Step 7: Deploy to the Cloud

Once you're satisfied with your local development, let's deploy to the cloud:

# Deploy to development environment
soom deploy --environment development

This will:

Build your application
Deploy your agents and APIs
Provide you with a public URL
Set up monitoring and logging

Step 8: Monitor Your Application

After deployment, you can monitor your application:

# View deployment logs
soom logs --environment development

# Check deployment status
soom status --environment development

# View metrics
soom metrics --environment development

Next Steps

Congratulations! You've built your first AI application with Soom AI. Here's what you can do next:

Enhance Your Application

Add More Features: Implement file uploads, voice messages, or image generation
Improve the AI: Add more sophisticated prompts and context handling
Add Authentication: Implement user authentication and chat history
Style Your App: Customize the UI with your brand colors and styling

Explore Advanced Features

Multi-Agent Systems: Create multiple agents that work together
API Integrations: Connect to external APIs and services
Database Integration: Store chat history and user data
Real-time Features: Add WebSocket support for real-time chat

Learn More

Key Features - Explore all platform capabilities
Architecture - Understand the technical architecture
API Documentation - Learn about all available APIs
Agent Development - Master AI agent development

Join the Community

Discord: Share your project and get help from the community
GitHub: Contribute to open-source projects
Blog: Read about AI development best practices

Troubleshooting

Common Issues

Port Already in Use

# Use a different port
soom dev --port 3001

API Key Issues

# Verify your API key
soom whoami

# Update your API key
soom config set api-key your_new_api_key

Build Errors

# Clear cache and rebuild
soom clean
soom build

Getting Help

Documentation: Check our comprehensive documentation
Community: Ask questions in our Discord community
Support: Contact our support team for enterprise customers

What You've Learned

In this quick start guide, you've learned how to:

✅ Create a new Soom AI project
✅ Build an AI agent with custom logic
✅ Create RESTful APIs for your AI services
✅ Build a simple web interface
✅ Deploy your application to the cloud
✅ Monitor and manage your deployment

You're now ready to build more sophisticated AI applications with Soom AI!

Quick Start Guide

On this page