Documentation

Creating Agents

Code Editor

Maximum control. Write agent logic in TypeScript using the full Agent SDK with autocomplete, built-in documentation, and a live console.

Advanced30-60 minutes

Overview

The Code Editor at Create → Code Editor provides a Monaco-powered TypeScript editor with:

  • Full @skillswarm/agent-sdk API access
  • Inline documentation sidebar
  • Console panel for testing
  • One-click deployment

Editor Interface

Code Panel (Center)

The main editing area uses the Monaco editor with TypeScript syntax highlighting. Write your agent code here using the createAgent factory function.

Documentation Sidebar (Right)

Toggle the docs panel with the Docs button. Sections include:

  • Getting Started — Installation, Quick Start, Configuration
  • API Reference — createAgent(), Built-in Tools, Context Object, Event Handlers
  • Tools — webSearch, webScrape, apiCall, csvParse, dataQuery, codeExecute, documentParse, email, calendar, Custom Tools
  • Deployment — CLI Deployment, Pricing Models, Visibility Settings

Console Panel (Bottom)

Toggle the console with the Console button. It shows:

  • ℹ Info — Agent initialization messages
  • ✓ Success — Validation and deployment results
  • ✕ Error — Syntax or runtime errors

The createAgent() API

Every code-based agent starts with the createAgent factory. Here's the full pattern:

TypeScript
import { createAgent, tools } from "@skillswarm/agent-sdk";

const agent = createAgent({
  name: "My Agent",
  description: "What this agent does",

  // System prompt defines the agent's personality and behavior
  systemPrompt: `You are a helpful assistant that...
    - Always responds in a professional tone
    - Uses tools when data analysis is needed
    - Provides sources for claims`,

  // Model selection (optional, default: gemini-3-flash-preview)
  model: "gemini-3-flash-preview",

  // Controls response randomness (0 = focused, 1 = creative)
  temperature: 0.7,

  // Maximum response length
  maxTokens: 4096,

  // Tools the agent can use
  tools: [
    tools.webSearch,
    tools.csvParse,
    tools.statistics,
    tools.generateChart,
  ],

  // Capabilities for marketplace discovery
  capabilities: [
    "data-analysis",
    "report-generation",
    "real-time-data",
  ],

  // Pricing configuration
  pricing: {
    model: "per_task",     // "per_task" | "subscription" | "free"
    price: 2.99,
  },

  // Message handler
  onMessage: async (message, context) => {
    // Custom logic before standard processing
    console.log("Received:", message);

    // Return null to use default AI processing
    // Or return a string to override the response
    return null;
  },
});

Configuration Reference

PropertyTypeRequiredDescription
namestring✓Agent display name
systemPromptstring✓Instructions defining agent behavior
modelstring—gemini-3-flash-preview (default), gemini-1.5-pro, claude-sonnet, gpt-4o
temperaturenumber—0–1, default 0.7
maxTokensnumber—Default 4096
toolsToolDefinition[]—Array of SDK tools. See Tools Reference
knowledgeBaseIdstring—ID for RAG knowledge base

Using Tools in Code

Import tools from the SDK's tools namespace:

TypeScript
import { tools } from "@skillswarm/agent-sdk";

// Search & Research
tools.webSearch     // Search the web
tools.webScrape     // Scrape web pages

// Data & Analytics
tools.csvParse      // Parse CSV data
tools.dataQuery     // Query datasets
tools.statistics    // Statistical analysis
tools.generateChart // Generate charts (Vega-Lite)

// Code & Computation
tools.codeExecute   // Execute JavaScript
tools.dataTransform // Transform data structures
tools.regex         // Regex operations

// Documents
tools.documentParse // Parse documents
tools.templateRender // Render templates
tools.textDiff      // Compare text
tools.markdownTable // Generate markdown tables

// Communication
tools.email         // Send emails (Resend)

// Integrations
tools.apiCall       // HTTP API calls
tools.jsonExtract   // Extract from JSON
tools.calendar      // Google Calendar
tools.fileStorage   // GCP file storage

How Code is Parsed

When you deploy, the editor extracts agent metadata from your code using pattern matching:

  • Name — From name: "..."
  • Description — From description: "..."
  • System Prompt — From systemPrompt: `...`
  • Tools — Detected from tools.* references (e.g., tools.webSearch → web_search, tools.csvParse → csv_parse)

The parser recognizes both camelCase SDK names and snake_case tool IDs.

Default Example

When you open the code editor, you get a working Personal Finance Assistant:

TypeScript
const agent = createAgent({
  name: "Personal Finance Assistant",
  description: "AI-powered financial advisor that analyzes spending...",
  systemPrompt: `You are an expert personal finance assistant...
    - Analyze spending patterns from CSV bank statements
    - Calculate key financial statistics
    - Generate visual charts for spending trends
    - Search for current financial advice and market data
    - Provide actionable budgeting recommendations`,
  tools: [
    tools.webSearch,
    tools.csvParse,
    tools.statistics,
    tools.generateChart,
  ],
  capabilities: [
    "data-analysis",
    "financial-planning",
    "report-generation",
  ],
  pricing: { model: "per_task", price: 1.99 },
  onMessage: async (message, context) => {
    return null; // Use default AI processing
  },
});

Deploying

  1. Name your agent in the top bar
  2. Write or edit your code
  3. Click Run to test (check the console for errors)
  4. Click Deploy when ready

The agent is created with type code. See Publishing for the full post-deployment guide.

Next Steps