gograb-ai Library Quick Start Guide

This Quick Start guide will help you get up and running with the gograb-ai library for Angular applications.

Prerequisites

• Angular 16+ application
• Node.js 16+ and yarn package manager
• An OpenAI and/or Anthropic API key

Step 1: Installation

Install the library using yarn:

yarn add @gograb-ai

Step 2: Configure the Library

Set up the library in your Angular application's app.config.ts file:

import { ApplicationConfig, APP_INITIALIZER, Injector } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter([/* your routes */]),
    provideHttpClient(),
    
    // GoGrab AI Configuration
    {
      provide: APP_INITIALIZER,
      useFactory: (injector: Injector) => {
        return async () => {
          try {
            // Dynamically import gograb-ai
            const gograbAIModule = await import('@gograb-ai');
            
            // Provide and configure the AI services
            return gograbAIModule.provideGograbAI({
              // API Keys
              openAIKey: 'your-openai-key', // Replace with your actual key
              anthropicKey: 'your-anthropic-key', // Replace with your actual key
              
              // Configuration for providers
              implementationConfig: {
                [gograbAIModule.AIProvider.ANTHROPIC]: {
                  baseUrl: 'http://localhost:3001/api/anthropic', // Proxy URL
                  maxRetries: 1,
                  timeout: 60000,  // 1 minute timeout
                  fallbackBehavior: 'retry'
                },
                [gograbAIModule.AIProvider.OPENAI]: {
                  fallbackBehavior: 'retry',
                  maxRetries: 2
                }
              }
            });
          } catch (error) {
            console.error('Error initializing Gograb AI:', error);
            return false;
          }
        };
      },
      deps: [Injector],
      multi: true
    }
  ]
};

Step 3: For Anthropic Users - Start the Proxy Server

Anthropic's API requires a proxy server to handle CORS issues. Start it with:

yarn anthropic:proxy

This will start a proxy server on port 3001 that handles requests to Anthropic's API. Keep this running while developing.

Step 4: Create a Simple AI Chat Component

Create a basic chat component that uses the AI service:

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AIFactoryService, AIProvider, Message, MessageRole } from '@gograb-ai';

@Component({
  selector: 'app-chat',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="chat-container">
      <h2>AI Chat</h2>
      
      <!-- Message History -->
      <div class="messages">
        <div *ngFor="let msg of messages" 
             [class]="msg.role === 'user' ? 'user-message' : 'ai-message'">
          <div class="message-content">{{ msg.content }}</div>
        </div>
      </div>
      
      <!-- Input Area -->
      <div class="input-area">
        <textarea [(ngModel)]="userInput" 
                  placeholder="Type your message..." 
                  [disabled]="isLoading"></textarea>
        <button (click)="sendMessage()" [disabled]="isLoading || !userInput.trim()">
          {{ isLoading ? 'Sending...' : 'Send' }}
        </button>
      </div>
    </div>
  `,
  styles: [`
    .chat-container {
      display: flex;
      flex-direction: column;
      height: 500px;
      border: 1px solid #ccc;
      border-radius: 8px;
      overflow: hidden;
    }
    .messages {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .user-message, .ai-message {
      max-width: 80%;
      padding: 0.75rem;
      border-radius: 8px;
    }
    .user-message {
      background-color: #e3f2fd;
      align-self: flex-end;
    }
    .ai-message {
      background-color: #f5f5f5;
      align-self: flex-start;
    }
    .input-area {
      display: flex;
      padding: 0.5rem;
      border-top: 1px solid #eee;
    }
    textarea {
      flex: 1;
      min-height: 60px;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      resize: none;
    }
    button {
      padding: 0 1rem;
      margin-left: 0.5rem;
      background-color: #2196f3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:disabled {
      background-color: #cccccc;
    }
  `]
})
export class ChatComponent {
  private aiFactory = inject(AIFactoryService);
  
  // State
  messages: Message[] = [];
  userInput = '';
  isLoading = false;
  
  // Choose your provider
  provider = AIProvider.ANTHROPIC; // or AIProvider.OPENAI
  
  sendMessage() {
    if (!this.userInput.trim() || this.isLoading) return;
    
    // Add user message to the conversation
    this.messages.push({
      role: MessageRole.USER,
      content: this.userInput
    });
    
    // Store input and clear field
    const input = this.userInput;
    this.userInput = '';
    this.isLoading = true;
    
    // Get AI service from the factory
    const aiService = this.aiFactory.getService(this.provider);
    
    // Prepare messages to send (including conversation history)
    const messagesToSend = [
      { role: MessageRole.SYSTEM, content: 'You are a helpful assistant.' },
      ...this.messages
    ];
    
    // Send to AI service and handle the response
    aiService.complete(messagesToSend, {
      temperature: 0.7,
      maxTokens: 1000
    }).subscribe({
      next: (response) => {
        // Add AI response to messages
        this.messages.push({
          role: MessageRole.ASSISTANT,
          content: response.text
        });
        this.isLoading = false;
      },
      error: (error) => {
        console.error('AI error:', error);
        // Add error message
        this.messages.push({
          role: MessageRole.ASSISTANT,
          content: `Error: ${error.message || 'Unknown error occurred'}`
        });
        this.isLoading = false;
      }
    });
  }
}

Step 5: Add the Component to a Route

Add the chat component to your routes:

// app.routes.ts
import { Routes } from '@angular/router';
import { ChatComponent } from './chat/chat.component';

export const routes: Routes = [
  { path: 'chat', component: ChatComponent },
  { path: '', redirectTo: '/chat', pathMatch: 'full' }
];

Step 6: Test Your Implementation

1. Start your Angular application
2. If using Anthropic, make sure the proxy server is running
3. Navigate to the chat route and test sending a message
4. Check the browser console for any errors

Troubleshooting

Common Issues:

1. API Key Errors:

   • Ensure your OpenAI key starts with 'sk-'
   • Ensure your Anthropic key starts with 'sk-ant-'
   • Verify the keys are active in their respective dashboards

2. Proxy Server Issues:

   • Ensure the proxy is running on port 3001
   • Check for errors in the terminal where the proxy is running
   • Test with curl http://localhost:3001/health to verify it's responding

3. CORS Issues:

   • Make sure you're using the proxy server for Anthropic
   • Check network requests in browser developer tools

4. Integration Errors:

   • Verify the services are properly injected
   • Check that you're using the correct imports from '@gograb-ai'

Next Steps

Once you have the basic implementation working, you can:

1. Customize the AI settings (temperature, max tokens, etc.)
2. Add more complex prompt handling
3. Incorporate AI search enhancements
4. Try different AI models and providers

For more details on advanced usage, check the advanced documentation and the API reference.

Getting Help

If you encounter issues, check the following resources:

• Anthropic Integration Guide
• OpenAI Documentation
• Anthropic Documentation