Examples

Explore practical examples of how to integrate the Arcten agent into different types of applications.

E-commerce Platform

A shopping assistant that helps users find products, manage their cart, and track orders.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools (read-only)
function searchProducts(query: string) {
  const products = productDatabase.search(query);
  return products;
}

function getProductDetails(productId: string) {
  return productDatabase.findById(productId);
}

function getCartContents() {
  return shoppingCart.getItems();
}

function getUserOrderHistory(userId: string) {
  return orderDatabase.findByUser(userId);
}

// Tools requiring confirmation
function addToCart(productId: string, quantity: number) {
  shoppingCart.addItem(productId, quantity);
  return `Added ${quantity}x ${productId} to cart`;
}

function removeFromCart(productId: string) {
  shoppingCart.removeItem(productId);
  return `Removed ${productId} from cart`;
}

function placeOrder() {
  const order = orderService.createOrder(shoppingCart.getItems());
  shoppingCart.clear();
  return `Order #${order.id} placed successfully`;
}

export default function ShoppingApp() {
  const user = {
    id: "user_123",
    email: "shopper@example.com",
    name: "Jane Doe"
  };

  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* Your store UI */}
      </div>
      <ArctenAgent
        user={user}
        safeTools={[
          searchProducts,
          getProductDetails,
          getCartContents,
          getUserOrderHistory
        ]}
        tools={[addToCart, removeFromCart, placeOrder]}
        systemPrompt="You are a helpful shopping assistant. Help customers find products, manage their cart, and complete purchases. Always confirm before placing orders."
        title="Shopping Assistant"
        theme="auto"
      />
    </div>
  );
}

SaaS Dashboard

An AI assistant for a project management tool.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools
function getProjectList() {
  return projects.getAll();
}

function getTasksForProject(projectId: string) {
  return tasks.findByProject(projectId);
}

function getTeamMembers() {
  return team.getAll();
}

function searchTasks(query: string, status?: string) {
  return tasks.search(query, status);
}

// Tools requiring confirmation
function createTask(title: string, projectId: string, assigneeId: string) {
  const task = tasks.create({ title, projectId, assigneeId });
  return `Task "${title}" created and assigned to ${assigneeId}`;
}

function updateTaskStatus(taskId: string, status: string) {
  tasks.updateStatus(taskId, status);
  return `Task ${taskId} status updated to ${status}`;
}

function assignTask(taskId: string, userId: string) {
  tasks.assign(taskId, userId);
  return `Task ${taskId} assigned to ${userId}`;
}

function deleteTask(taskId: string) {
  tasks.delete(taskId);
  return `Task ${taskId} deleted`;
}

export default function ProjectDashboard() {
  const user = {
    id: "user_456",
    email: "manager@company.com",
    name: "John Manager",
    role: "project_manager"
  };

  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* Your dashboard */}
      </div>
      <ArctenAgent
        user={user}
        safeTools={[
          getProjectList,
          getTasksForProject,
          getTeamMembers,
          searchTasks
        ]}
        tools={[createTask, updateTaskStatus, assignTask, deleteTask]}
        systemPrompt={`You are a project management assistant.
          Help users manage tasks, track progress, and collaborate with their team.
          Current user role: ${user.role}`}
        title="PM Assistant"
        theme="dark"
        initiallyExpanded={true}
      />
    </div>
  );
}

Customer Support Portal

An agent that helps users troubleshoot issues and submit tickets.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools
function searchKnowledgeBase(query: string) {
  return kb.search(query);
}

function getArticle(articleId: string) {
  return kb.getArticle(articleId);
}

function getMyTickets(userId: string) {
  return tickets.findByUser(userId);
}

function getTicketStatus(ticketId: string) {
  return tickets.getStatus(ticketId);
}

function checkSystemStatus() {
  return statusPage.getCurrentStatus();
}

// Tools requiring confirmation
function createSupportTicket(subject: string, description: string, priority: string) {
  const ticket = tickets.create({ subject, description, priority });
  return `Support ticket #${ticket.id} created. Our team will respond within 24 hours.`;
}

function updateTicket(ticketId: string, message: string) {
  tickets.addMessage(ticketId, message);
  return `Your message has been added to ticket #${ticketId}`;
}

function closeTicket(ticketId: string) {
  tickets.close(ticketId);
  return `Ticket #${ticketId} has been closed`;
}

export default function SupportPortal() {
  const user = {
    id: "user_789",
    email: "customer@example.com",
    name: "Alice Customer"
  };

  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* Support portal content */}
      </div>
      <ArctenAgent
        user={user}
        safeTools={[
          searchKnowledgeBase,
          getArticle,
          getMyTickets,
          getTicketStatus,
          checkSystemStatus
        ]}
        tools={[createSupportTicket, updateTicket, closeTicket]}
        systemPrompt="You are a customer support agent. Help users find solutions in the knowledge base first. If they need additional help, assist them in creating support tickets. Always be empathetic and professional."
        title="Support Agent"
        theme="auto"
      />
    </div>
  );
}

Analytics Dashboard

An agent that helps users understand their data and generate reports.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools
function getMetrics(timeRange: string) {
  return analytics.getMetrics(timeRange);
}

function getUserGrowth(startDate: string, endDate: string) {
  return analytics.getUserGrowth(startDate, endDate);
}

function getRevenueData(period: string) {
  return analytics.getRevenue(period);
}

function getTopProducts(limit: number) {
  return analytics.getTopProducts(limit);
}

function compareTimeRanges(range1: string, range2: string) {
  return analytics.compare(range1, range2);
}

// Tools requiring confirmation
function exportReport(reportType: string, format: string) {
  const report = reports.generate(reportType, format);
  return `Report exported as ${format}. Download: ${report.url}`;
}

function scheduleReport(reportType: string, frequency: string, recipients: string) {
  reports.schedule(reportType, frequency, recipients);
  return `Report scheduled: ${reportType} will be sent ${frequency} to ${recipients}`;
}

function createDashboard(name: string, widgets: string[]) {
  const dashboard = dashboards.create(name, widgets);
  return `Dashboard "${name}" created with ${widgets.length} widgets`;
}

export default function AnalyticsDashboard() {
  const user = {
    id: "user_999",
    email: "analyst@company.com",
    name: "Data Analyst",
    role: "analyst"
  };

  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* Analytics charts and graphs */}
      </div>
      <ArctenAgent
        user={user}
        safeTools={[
          getMetrics,
          getUserGrowth,
          getRevenueData,
          getTopProducts,
          compareTimeRanges
        ]}
        tools={[exportReport, scheduleReport, createDashboard]}
        systemPrompt="You are a data analytics assistant. Help users understand their metrics, identify trends, and generate insights. Explain data in clear, non-technical terms."
        title="Analytics AI"
        theme="dark"
        model="anthropic:sonnet-4.5"
      />
    </div>
  );
}

Documentation Site

An agent that helps users navigate documentation and find answers.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools
function searchDocs(query: string) {
  return docsSearch.search(query);
}

function getDocPage(slug: string) {
  return docs.getPage(slug);
}

function getRelatedPages(slug: string) {
  return docs.getRelated(slug);
}

function getCodeExamples(topic: string) {
  return examples.findByTopic(topic);
}

function getAPIReference(endpoint: string) {
  return apiDocs.getEndpoint(endpoint);
}

// Tools requiring confirmation
function submitFeedback(pageSlug: string, feedback: string, helpful: boolean) {
  feedbackService.submit({ pageSlug, feedback, helpful });
  return "Thank you for your feedback!";
}

function suggestEdit(pageSlug: string, suggestion: string) {
  editSuggestions.create({ pageSlug, suggestion });
  return "Your suggestion has been submitted for review";
}

export default function DocsViewer() {
  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* Documentation content */}
      </div>
      <ArctenAgent
        safeTools={[
          searchDocs,
          getDocPage,
          getRelatedPages,
          getCodeExamples,
          getAPIReference
        ]}
        tools={[submitFeedback, suggestEdit]}
        systemPrompt="You are a documentation assistant. Help users find relevant documentation, explain concepts clearly, and provide code examples. Always cite the specific documentation pages you reference."
        title="Docs Helper"
        theme="auto"
        initiallyExpanded={false}
      />
    </div>
  );
}

Content Management System

An agent that helps content creators manage their posts and media.

import { ArctenAgent } from "@arcteninc/core";
import "@arcteninc/core/styles";

// Safe tools
function searchPosts(query: string, status?: string) {
  return posts.search(query, status);
}

function getPostStats(postId: string) {
  return analytics.getPostStats(postId);
}

function getMediaLibrary(type?: string) {
  return media.getAll(type);
}

function getSEOSuggestions(postId: string) {
  return seo.analyze(postId);
}

// Tools requiring confirmation
function createDraft(title: string, content: string) {
  const post = posts.createDraft({ title, content });
  return `Draft "${title}" created`;
}

function publishPost(postId: string, publishDate?: string) {
  posts.publish(postId, publishDate);
  return `Post published${publishDate ? ` on ${publishDate}` : ''}`;
}

function unpublishPost(postId: string) {
  posts.unpublish(postId);
  return `Post unpublished`;
}

function deletePost(postId: string) {
  posts.delete(postId);
  return `Post deleted`;
}

function uploadMedia(fileName: string, file: File) {
  const upload = media.upload(fileName, file);
  return `File uploaded: ${upload.url}`;
}

export default function CMSEditor() {
  const user = {
    id: "user_content_1",
    email: "editor@blog.com",
    name: "Content Editor",
    role: "editor"
  };

  return (
    <div className="flex h-screen">
      <div className="flex-1 overflow-scroll">
        {/* CMS editor */}
      </div>
      <ArctenAgent
        user={user}
        safeTools={[
          searchPosts,
          getPostStats,
          getMediaLibrary,
          getSEOSuggestions
        ]}
        tools={[
          createDraft,
          publishPost,
          unpublishPost,
          deletePost,
          uploadMedia
        ]}
        systemPrompt="You are a content management assistant. Help editors create, manage, and publish content. Provide SEO suggestions and content insights."
        title="CMS Assistant"
        theme="light"
      />
    </div>
  );
}

Tips for Building Your Integration

Start Simple: Begin with a few essential tools and expand as needed
Use Descriptive Names: Function names should clearly describe what they do
Return Helpful Messages: The agent reads return values to understand results
Separate Safe/Unsafe: Put read-only operations in safeTools for faster responses
Provide Context: Include relevant user/app context in the systemPrompt
Test Thoroughly: Test all tools before deploying to users
Handle Errors: Return clear error messages when tools fail
Consider UX: Think about which actions should require confirmation