Service Contexts

Services exist in multiple contexts and render appropriately for each access pattern.

Service (abstract)
  ×
Context (Web, API, MCP, HumanTask)
  =
Rendering

The Four Contexts

Context	Access Pattern	Rendering
Web	Browser UI	React components (App/Site/Card)
API	HTTP endpoints	JSON responses + OpenAPI schema
MCP	Model Context Protocol	Resources + Tools + Prompts
HumanTask	Activity platform	Queue items + Forms + Workflows

Web Context

Services render as React components in browser UIs.

Component Hierarchy

// At every level
<ServiceApp />        // Full application
<ServiceView />       // Page within app
<ServicePanel />      // Widget in view
<ServiceSection />    // Section on site
<ServiceCard />       // Item in collection
<ServiceRow />        // Row in table

Example: API Service in Web

// As App
<ServiceApp
  serviceType="API"
  name="API Management"
  from="/api/services"
/>

// As Page Section
<Section title="Our APIs">
  <Cards of="Service" display="cards" />
</Section>

// As Card in Grid
<ServiceCard
  service={apiService}
  showMetrics
  onClick={() => navigate('/api/docs')}
/>

// As Row in Table
<ServiceRow
  service={apiService}
  columns={['name', 'version', 'status', 'requests']}
/>

Interactivity

Web context provides:

Click handlers
Selection
Drag and drop
Forms for editing
Real-time updates
Visual feedback

API Context

Services expose HTTP endpoints for programmatic access.

REST Endpoints

Every service is accessible via API:

# List all services
GET /api/services
GET /api/services?type=API
GET /api/services?active=true

# Get specific service
GET /api/services/{id}

# Create service
POST /api/services

# Update service
PATCH /api/services/{id}

# Delete service
DELETE /api/services/{id}

# Service-specific operations
POST /api/services/{id}/test
GET /api/services/{id}/health
GET /api/services/{id}/metrics
GET /api/services/{id}/logs

Response Format

{
  "$type": "API",
  "$id": "api://example.com/users",
  "name": "Users API",
  "version": "1.0.0",
  "baseUrl": "https://api.example.com",
  "apiType": "rest",
  "auth": "api_key",
  "endpoints": [
    {
      "path": "/api/users",
      "method": "GET",
      "description": "List all users",
      "authenticated": true
    }
  ],
  "active": true,
  "rateLimit": {
    "requests": 1000,
    "window": 3600,
    "scope": "key"
  }
}

OpenAPI Schema

Services auto-generate OpenAPI specs:

openapi: 3.1.0
info:
  title: Users API
  version: 1.0.0
paths:
  /api/users:
    get:
      summary: List all users
      security:
        - apiKey: []
      responses:
        200:
          description: List of users
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'

Service Discovery

# Discover available services
GET /api/services/discover

# Response
{
  "services": [
    {
      "$type": "API",
      "name": "Users API",
      "baseUrl": "https://api.example.com",
      "openapi": "https://api.example.com/openapi.json"
    }
  ]
}

MCP Context

Services expose capabilities via Model Context Protocol for AI agents.

MCP Server

Each service becomes an MCP server:

import { MCPServer } from '@modelcontextprotocol/sdk'

const server = new MCPServer({
  name: 'users-api',
  version: '1.0.0'
})

Resources

Service data as MCP resources:

// Service metadata
server.addResource({
  uri: 'service://api.example.com/users',
  name: 'Users API Service',
  description: 'REST API for user management',
  mimeType: 'application/json'
})

// Service endpoints
server.addResource({
  uri: 'service://api.example.com/users/endpoints',
  name: 'API Endpoints',
  description: 'Available endpoints in Users API',
  mimeType: 'application/json'
})

// Service documentation
server.addResource({
  uri: 'service://api.example.com/users/docs',
  name: 'API Documentation',
  description: 'OpenAPI specification and usage guide',
  mimeType: 'text/markdown'
})

Tools

Service operations as MCP tools:

// Call API endpoint
server.addTool({
  name: 'call_users_api',
  description: 'Make a request to the Users API',
  inputSchema: {
    type: 'object',
    properties: {
      endpoint: {
        type: 'string',
        description: 'API endpoint path'
      },
      method: {
        type: 'string',
        enum: ['GET', 'POST', 'PUT', 'DELETE']
      },
      body: {
        type: 'object',
        description: 'Request body (for POST/PUT)'
      }
    },
    required: ['endpoint', 'method']
  }
})

// Test webhook
server.addTool({
  name: 'test_webhook',
  description: 'Send a test event to a webhook',
  inputSchema: {
    type: 'object',
    properties: {
      webhookId: { type: 'string' },
      event: { type: 'string' },
      payload: { type: 'object' }
    },
    required: ['webhookId', 'event']
  }
})

// Check service health
server.addTool({
  name: 'check_health',
  description: 'Check service health status',
  inputSchema: {
    type: 'object',
    properties: {
      serviceId: { type: 'string' }
    },
    required: ['serviceId']
  }
})

Prompts

Service-specific prompts:

// Generate API request
server.addPrompt({
  name: 'generate_api_request',
  description: 'Generate a sample API request',
  arguments: [
    {
      name: 'endpoint',
      description: 'API endpoint to call',
      required: true
    },
    {
      name: 'language',
      description: 'Programming language for example',
      required: false
    }
  ]
})

// Debug API error
server.addPrompt({
  name: 'debug_api_error',
  description: 'Help debug an API error',
  arguments: [
    {
      name: 'statusCode',
      description: 'HTTP status code received',
      required: true
    },
    {
      name: 'response',
      description: 'Error response body',
      required: true
    }
  ]
})

Agent Usage

AI agents use services via MCP:

// Agent discovers service
const resources = await mcp.listResources()
// Returns: service metadata, endpoints, docs

// Agent uses service tool
const result = await mcp.callTool('call_users_api', {
  endpoint: '/api/users',
  method: 'GET'
})

// Agent gets help with prompt
const example = await mcp.getPrompt('generate_api_request', {
  endpoint: '/api/users',
  language: 'javascript'
})

HumanTask Context

Services become activities on the ing.as platform that humans and agents perform.

Activity URLs

{object}.{verb}.ing.as/{context}/{role}

# Service activities
api.creat.ing.as/developer/engineer     # Creating APIs
api.test.ing.as/developer/tester        # Testing APIs
api.document.ing.as/developer/writer    # Documenting APIs

webhook.configur.ing.as/developer/admin # Configuring webhooks
webhook.test.ing.as/developer/tester    # Testing webhooks

integration.setup.ing.as/admin/ops      # Setting up integrations
integration.troubleshoot.ing.as/support/agent # Troubleshooting

Queue Items

Services become tasks in activity queues:

interface ServiceTaskItem {
  $type: 'Task'
  $id: string

  // Activity info
  activity: string  // e.g., "api.test.ing.as"
  context: string   // e.g., "developer"
  role: string      // e.g., "tester"

  // Service reference
  service: ServiceProps

  // Task details
  action: string    // What to do: "test", "configure", "debug"
  priority: number
  deadline?: Date

  // Assignment
  assignedTo?: string  // Human or Agent ID
  status: 'pending' | 'in_progress' | 'completed' | 'escalated'
}

Activity Forms

Services render as activity forms:

// API Testing Activity
<Activity
  url="api.test.ing.as/developer/tester"
  service={apiService}
>
  <ServiceTestForm
    service={apiService}
    onSubmit={handleTest}
  />
</Activity>

// Webhook Configuration Activity
<Activity
  url="webhook.configur.ing.as/developer/admin"
  service={webhookService}
>
  <ServiceConfigForm
    service={webhookService}
    onSave={handleSave}
  />
</Activity>

// Integration Setup Activity
<Activity
  url="integration.setup.ing.as/admin/ops"
  service={integrationService}
>
  <ServiceSetupWizard
    service={integrationService}
    onComplete={handleComplete}
  />
</Activity>

Worker Interface

Both humans and agents perform service activities:

interface Worker {
  ask(prompt: string): Promise<Response>
  do(task: Task): Promise<Result>
}

// Human performing API testing
const human: Worker = {
  async do(task: ServiceTaskItem) {
    // Show ServiceTestForm in browser
    // Wait for human to fill form and submit
    return result
  }
}

// Agent performing API testing
const agent: Worker = {
  async do(task: ServiceTaskItem) {
    // Use MCP tool to test API
    const result = await mcp.callTool('call_users_api', {
      endpoint: task.service.endpoints[0].path,
      method: task.service.endpoints[0].method
    })
    return result
  }
}

Service Workflows

Complex service operations as multi-step workflows:

// API Creation Workflow
const workflow = {
  activity: 'api.creat.ing.as',
  steps: [
    {
      name: 'design',
      worker: 'human',
      form: <APIDesignForm />
    },
    {
      name: 'implement',
      worker: 'agent',
      action: 'generate-code'
    },
    {
      name: 'test',
      worker: 'agent',
      action: 'run-tests'
    },
    {
      name: 'review',
      worker: 'human',
      form: <APIReviewForm />
    },
    {
      name: 'deploy',
      worker: 'agent',
      action: 'deploy-api'
    }
  ]
}

Context Switching

Services adapt their rendering based on context:

function renderService(service: ServiceProps, context: Context) {
  switch (context) {
    case 'web':
      return <ServiceCard service={service} />

    case 'api':
      return Response.json(service)

    case 'mcp':
      return {
        resource: serviceToMCPResource(service),
        tools: serviceToMCPTools(service),
        prompts: serviceToMCPPrompts(service)
      }

    case 'humantask':
      return {
        queueItem: serviceToTask(service),
        form: <ServiceActivityForm service={service} />
      }
  }
}

Context Examples

API Service Across Contexts

Web Context:

<ServiceCard service={usersAPI} showMetrics />

API Context:

GET /api/services/users-api
# Returns JSON representation

MCP Context:

// Resource
service://api.example.com/users

// Tool
mcp.callTool('call_users_api', {
  endpoint: '/api/users',
  method: 'GET'
})

HumanTask Context:

api.test.ing.as/developer/tester
# Queue item for testing Users API

Webhook Service Across Contexts

Web Context:

<ServiceRow
  service={webhook}
  columns={['url', 'events', 'successRate']}
/>

API Context:

POST /api/webhooks
{
  "url": "https://example.com/webhook",
  "events": ["user.created", "user.updated"]
}

MCP Context:

mcp.callTool('test_webhook', {
  webhookId: 'webhook_123',
  event: 'user.created',
  payload: { id: '1', name: 'Alice' }
})

HumanTask Context:

webhook.configur.ing.as/developer/admin
# Activity for configuring webhook

Summary

Services render in four contexts:

Web - React components for browser UIs
API - JSON over HTTP for programmatic access
MCP - Resources, tools, and prompts for AI agents
HumanTask - Activity queue items and forms for ing.as platform

Each context provides the appropriate interface for its access pattern, enabling services to be managed by humans, agents, APIs, and applications seamlessly.

Service Contexts

On this page