@syncagent/angular

@syncagent/angular

Angular SDK for SyncAgent — injectable service with Angular Signals and RxJS observables for AI database chat.

Works with MongoDB, PostgreSQL, MySQL, SQLite, SQL Server, and Supabase.

Get Your API Key

• Sign up for a free account
• Go to your Dashboard → New Project → choose your database type
• Copy your API key (starts with sa_)

Every new project gets a 14-day trial with 500 free requests — no credit card required. After the trial, you get 100 free requests/month on the Free plan.

Install

npm install @syncagent/angular @syncagent/js

Quick Start

// app.component.ts
import { Component, OnInit } from "@angular/core";
import { SyncAgentService } from "@syncagent/angular";
import { environment } from "./environments/environment";

@Component({
  selector: "app-root",
  providers: [SyncAgentService],
  template: `
    <div class="chat">
      <div *ngIf="agent.status() as s" class="status">⏳ {{ s.label }}</div>

      <div class="messages">
        <div *ngFor="let msg of agent.messages()" [class]="'message ' + msg.role">
          {{ msg.content }}
        </div>
      </div>

      <div *ngIf="agent.error() as err" class="error">⚠️ {{ err.message }}</div>

      <div class="input-row">
        <input [(ngModel)]="input" (keydown.enter)="send()" placeholder="Ask about your data..." [disabled]="agent.isLoading()" />
        <button (click)="send()" [disabled]="agent.isLoading() || !input.trim()">Send</button>
        <button *ngIf="agent.isLoading()" (click)="agent.stop()">Stop</button>
        <button (click)="agent.reset()">Clear</button>
      </div>
    </div>
  `,
})
export class AppComponent implements OnInit {
  input = "";

  constructor(public agent: SyncAgentService) {}

  ngOnInit() {
    this.agent.configure({
      apiKey: environment.syncagentKey,
      connectionString: environment.databaseUrl,
    });
  }

  send() {
    if (!this.input.trim()) return;
    this.agent.sendMessage(this.input);
    this.input = "";
  }
}

Environment Setup

// environments/environment.ts
export const environment = {
  production: false,
  syncagentKey: "sa_your_api_key",
  databaseUrl: "mongodb+srv://user:pass@cluster/db",
};

⚠️ Security note: In production, pass the connection string from your backend API instead of bundling it in the client.

Multi-tenant SaaS

@Component({ providers: [SyncAgentService] })
export class DashboardComponent implements OnInit {
  constructor(
    public agent: SyncAgentService,
    private authService: AuthService,
  ) {}

  ngOnInit() {
    const user = this.authService.currentUser;

    this.agent.configure({
      apiKey: environment.syncagentKey,
      connectionString: environment.databaseUrl,
      filter: { organizationId: user.orgId },
      operations: user.isAdmin
        ? ["read", "create", "update", "delete"]
        : ["read"],
      context: { userId: user.id, userRole: user.role },
    });
  }
}

Using RxJS Observables

import { Subject, takeUntil, filter } from "rxjs";

@Component({ providers: [SyncAgentService] })
export class ChatComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(public agent: SyncAgentService) {}

  ngOnInit() {
    this.agent.configure({ apiKey: "...", connectionString: "..." });

    // Subscribe to messages stream
    this.agent.messages$
      .pipe(takeUntil(this.destroy$))
      .subscribe(messages => console.log("Messages:", messages.length));

    // Subscribe to each new assistant message
    this.agent.message$
      .pipe(takeUntil(this.destroy$))
      .subscribe(msg => console.log("New:", msg.content.slice(0, 50)));

    // Subscribe to status updates
    this.agent.status$
      .pipe(takeUntil(this.destroy$), filter(Boolean))
      .subscribe(({ step, label }) => console.log(`[${step}] ${label}`));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Custom Tools

this.agent.configure({
  apiKey: environment.syncagentKey,
  connectionString: environment.databaseUrl,
  tools: {
    sendEmail: {
      description: "Send an email to a user",
      inputSchema: {
        to:      { type: "string", description: "Recipient email" },
        subject: { type: "string", description: "Subject line" },
        body:    { type: "string", description: "Email body" },
      },
      execute: async ({ to, subject, body }) => {
        await this.emailService.send({ to, subject, body });
        return { sent: true };
      },
    },
  },
  onData: (data) => {
    if (data.collection === "orders") {
      this.orders = data.data;
    }
  },
});

Tools-only Mode

Use toolsOnly: true when you want the agent to only call your custom tools — no database access:

this.agent.configure({
  apiKey: environment.syncagentKey,
  toolsOnly: true,
  tools: {
    searchProducts: {
      description: "Search products by name",
      inputSchema: { query: { type: "string", description: "Search query" } },
      execute: async ({ query }) => {
        const res = await fetch(`/api/products?q=${query}`);
        return res.json();
      },
    },
    createTicket: {
      description: "Create a support ticket",
      inputSchema: {
        title:   { type: "string" },
        message: { type: "string" },
      },
      execute: async ({ title, message }) => {
        return await this.ticketService.create({ title, message });
      },
    },
  },
});

API Reference

SyncAgentService

Methods:

Method	Description
configure(config)	Initialize with API key, connection string, and options
sendMessage(content)	Send a message and start streaming
stop()	Abort the current stream
reset()	Clear all messages

Angular Signals:

Signal	Type	Description
messages()	Message[]	Conversation history
isLoading()	boolean	True while streaming
error()	Error | null	Last error
status()	{step,label} | null	Live status (connecting, querying, thinking, done)
lastData()	ToolData | null	Last DB query result

RxJS Observables:

Observable	Type	Description
messages$	Observable<Message[]>	Conversation history stream
isLoading$	Observable<boolean>	Loading state stream
error$	Observable<Error|null>	Error stream
status$	Observable<{step,label}|null>	Status stream
message$	Observable<Message>	Emits each new assistant message

Supported Databases

Database	Connection String Format
MongoDB	mongodb+srv://user:[e-mail]/mydb
PostgreSQL	postgresql://user:pass@host:5432/mydb
MySQL	mysql://user:pass@host:3306/mydb
SQLite	/absolute/path/to/database.sqlite
SQL Server	Server=host,1433;Database=mydb;User Id=user;Password=pass;Encrypt=true;
Supabase	https://xxx.supabase.co|your-anon-key

Security

• Your database connection string is never stored on SyncAgent servers
• Passed at runtime, used once, immediately discarded
• API keys are hashed with bcrypt — raw keys are never stored

Plans & Pricing

Plan	Requests/mo	Collections	Price
Free (+ 14-day trial)	100 (500 during trial)	5	GH₵0
Starter	5,000	20	GH₵150/mo
Pro	50,000	Unlimited	GH₵500/mo
Enterprise	Unlimited	Unlimited	Custom

View full pricing →

Resources

• Documentation
• Dashboard
• Pricing
• Changelog

License

MIT