🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more
Sign In

@stagewise/agent-interface

Package Overview
Dependencies
Maintainers
2
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@stagewise/agent-interface - npm Package Compare versions

Comparing version
0.2.3
to
0.3.0
+64
-121
dist/agent.d.cts
import * as ws from 'ws';
import * as http from 'http';
import { Application } from 'express';
import cors from 'cors';
import { Server } from 'node:http';
import { z } from 'zod';

@@ -73,90 +76,2 @@

declare const pendingToolCallSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
parameters: z.ZodRecord<z.ZodString, z.ZodUnknown>;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}>;
type PendingToolCall = z.infer<typeof pendingToolCallSchema>;
declare const toolCallResultSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
error: z.ZodOptional<z.ZodString>;
result: z.ZodAny;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}>;
type ToolCallResult = z.infer<typeof toolCallResultSchema>;
declare const toolSchema: z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>;
type Tool = z.infer<typeof toolSchema>;
declare const toolListSchema: z.ZodArray<z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>, "many">;
type ToolList = z.infer<typeof toolListSchema>;
interface ToolCallingImplementation {
/** Informs the toolbar about the open tool calls of the agent that should be executed by toolbar provided tools.
*
* ***You must re-yield all pending tool calls that have not yet timed out upon initial subscription of the toolbar.***
*
* ***You should not return in this function, as this closes the subscription and will prompt the toolbar to subscribe again.***
*/
getPendingToolCalls: () => AsyncIterable<PendingToolCall>;
/**
* Informs the agent that a tool call has been completed and returns the result
*
* *Make sure to ignore a result if it's call ID is unknown, timed-out, or already handled.*
*
* @param response - The result of the tool call.
*/
onToolCallResult: (response: ToolCallResult) => void;
/**
* Informs the agent about tools that it has available.
*
* The list also includes tool definitions that may have already been sent over previously.
*
* *Upon establishing a connect to the agent, the toolbar will automatically send over the list of tools it has available.*
*
* @param toolList The list of tools that the toolbar makes available to the agent
*/
onToolListUpdate: (toolList: ToolList) => void;
}
/** Information about a selected element */

@@ -1391,3 +1306,2 @@ declare const baseSelectedElementSchema: z.ZodObject<{

state: StateImplementation;
toolCalling?: ToolCallingImplementation;
}

@@ -1463,27 +1377,2 @@

/**
* TOOL CALLING MANAGEMENT (Optional)
* Simplified tool calling with automatic lifecycle management
*/
toolCalling: {
/** Set tool call support.
* Agents have to manually set this to true if they want to support tool calling.
*
* Calling other functions in the toolCalling object will throw an error
* if tool calling is not supported.
*/
setToolCallSupport: (supported: boolean) => void;
/** Get a list of all available tools */
getAvailableTools: () => Tool[];
/** Add a listener that get's triggered whenever the list of available tools changes */
onToolListUpdate: (listener: (tools: Tool[]) => void) => void;
/** Remove a specific tool list update listener */
removeToolListUpdateListener: (listener: (tools: Tool[]) => void) => void;
/** Clear all tool list update listeners */
clearToolListUpdateListeners: () => void;
/** Make a tool call and wait for the result */
requestToolCall: (toolName: string, parameters: Record<string, unknown>) => Promise<ToolCallResult>;
/** Get all pending tool calls */
getPendingToolCalls: () => PendingToolCall[];
};
/**
* CLEANUP MANAGEMENT

@@ -1528,8 +1417,62 @@ * Methods to properly clean up resources and prevent memory leaks

/**
* Creates a new agent server and returns the server instance, the handler and the port it is running on.
* @param implementation - The implementation of the agent interface.
* Configuration options for creating an agent server
*/
interface AgentServerConfig {
/** Custom agent name */
name?: string;
/** Custom agent description */
description?: string;
/** Custom starting port for standalone server */
port?: number;
/** Custom info endpoint path */
infoPath?: string;
/** Custom WebSocket endpoint path */
wsPath?: string;
/** Custom CORS configuration */
cors?: cors.CorsOptions;
}
/**
* Configuration for hooking into an existing Express server
*/
interface AgentServerHookConfig extends AgentServerConfig {
/** Existing Express application to hook into */
app: Application;
/** Existing HTTP server to attach WebSocket to */
server: Server;
/** Whether to start the server (default: false when hooking) */
startServer?: boolean;
}
/**
* Configuration for creating a standalone server
*/
interface AgentServerStandaloneConfig extends AgentServerConfig {
/** Whether to start the server (default: true for standalone) */
startServer?: boolean;
}
/**
* Creates agent endpoints and WebSocket handler for an existing Express server
* @param config - Configuration for hooking into existing server
* @returns The WebSocket server, handler, and control functions
*/
declare const createAgentHook: (config: AgentServerHookConfig) => Promise<{
standalone: boolean;
server: Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
wss: ws.Server<typeof ws.default, typeof http.IncomingMessage>;
wsPath: string;
handler: {
broadcastReconnectNotification: () => void;
};
port: number;
interface: AgentInterface;
setAgentName: (newName: string) => void;
setAgentDescription: (newDescription: string) => void;
}>;
/**
* Creates a new standalone agent server and returns the server instance, the handler and the port it is running on.
* @param config - Configuration for the standalone server
* @returns The server instance, the handler and the port it is running on.
*/
declare const createAgentServer: () => Promise<{
server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
declare const createAgentServer: (config?: AgentServerStandaloneConfig) => Promise<{
standalone: boolean;
server: Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
wss: ws.Server<typeof ws.default, typeof http.IncomingMessage>;

@@ -1541,6 +1484,6 @@ handler: {

interface: AgentInterface;
setAgentName: (name: string) => void;
setAgentDescription: (description: string) => void;
setAgentName: (newName: string) => void;
setAgentDescription: (newDescription: string) => void;
}>;
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentServer, type AgentState, AgentStateType, type PendingToolCall, type SelectedElement, type StagewiseInfo, type Tool, type ToolCallResult, type ToolList, type TransportInterface, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, agentMessageContentItemPartSchema, agentMessageUpdateSchema, baseSelectedElementSchema, createAgentServer, pendingToolCallSchema, selectedElementSchema, toolCallResultSchema, toolListSchema, toolSchema, userMessageContentItemSchema, userMessageMetadataSchema, userMessageSchema };
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentServer, type AgentServerConfig, type AgentServerHookConfig, type AgentServerStandaloneConfig, type AgentState, AgentStateType, type SelectedElement, type StagewiseInfo, type TransportInterface, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, agentMessageContentItemPartSchema, agentMessageUpdateSchema, baseSelectedElementSchema, createAgentHook, createAgentServer, selectedElementSchema, userMessageContentItemSchema, userMessageMetadataSchema, userMessageSchema };
import * as ws from 'ws';
import * as http from 'http';
import { Application } from 'express';
import cors from 'cors';
import { Server } from 'node:http';
import { z } from 'zod';

@@ -73,90 +76,2 @@

declare const pendingToolCallSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
parameters: z.ZodRecord<z.ZodString, z.ZodUnknown>;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}>;
type PendingToolCall = z.infer<typeof pendingToolCallSchema>;
declare const toolCallResultSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
error: z.ZodOptional<z.ZodString>;
result: z.ZodAny;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}>;
type ToolCallResult = z.infer<typeof toolCallResultSchema>;
declare const toolSchema: z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>;
type Tool = z.infer<typeof toolSchema>;
declare const toolListSchema: z.ZodArray<z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>, "many">;
type ToolList = z.infer<typeof toolListSchema>;
interface ToolCallingImplementation {
/** Informs the toolbar about the open tool calls of the agent that should be executed by toolbar provided tools.
*
* ***You must re-yield all pending tool calls that have not yet timed out upon initial subscription of the toolbar.***
*
* ***You should not return in this function, as this closes the subscription and will prompt the toolbar to subscribe again.***
*/
getPendingToolCalls: () => AsyncIterable<PendingToolCall>;
/**
* Informs the agent that a tool call has been completed and returns the result
*
* *Make sure to ignore a result if it's call ID is unknown, timed-out, or already handled.*
*
* @param response - The result of the tool call.
*/
onToolCallResult: (response: ToolCallResult) => void;
/**
* Informs the agent about tools that it has available.
*
* The list also includes tool definitions that may have already been sent over previously.
*
* *Upon establishing a connect to the agent, the toolbar will automatically send over the list of tools it has available.*
*
* @param toolList The list of tools that the toolbar makes available to the agent
*/
onToolListUpdate: (toolList: ToolList) => void;
}
/** Information about a selected element */

@@ -1391,3 +1306,2 @@ declare const baseSelectedElementSchema: z.ZodObject<{

state: StateImplementation;
toolCalling?: ToolCallingImplementation;
}

@@ -1463,27 +1377,2 @@

/**
* TOOL CALLING MANAGEMENT (Optional)
* Simplified tool calling with automatic lifecycle management
*/
toolCalling: {
/** Set tool call support.
* Agents have to manually set this to true if they want to support tool calling.
*
* Calling other functions in the toolCalling object will throw an error
* if tool calling is not supported.
*/
setToolCallSupport: (supported: boolean) => void;
/** Get a list of all available tools */
getAvailableTools: () => Tool[];
/** Add a listener that get's triggered whenever the list of available tools changes */
onToolListUpdate: (listener: (tools: Tool[]) => void) => void;
/** Remove a specific tool list update listener */
removeToolListUpdateListener: (listener: (tools: Tool[]) => void) => void;
/** Clear all tool list update listeners */
clearToolListUpdateListeners: () => void;
/** Make a tool call and wait for the result */
requestToolCall: (toolName: string, parameters: Record<string, unknown>) => Promise<ToolCallResult>;
/** Get all pending tool calls */
getPendingToolCalls: () => PendingToolCall[];
};
/**
* CLEANUP MANAGEMENT

@@ -1528,8 +1417,62 @@ * Methods to properly clean up resources and prevent memory leaks

/**
* Creates a new agent server and returns the server instance, the handler and the port it is running on.
* @param implementation - The implementation of the agent interface.
* Configuration options for creating an agent server
*/
interface AgentServerConfig {
/** Custom agent name */
name?: string;
/** Custom agent description */
description?: string;
/** Custom starting port for standalone server */
port?: number;
/** Custom info endpoint path */
infoPath?: string;
/** Custom WebSocket endpoint path */
wsPath?: string;
/** Custom CORS configuration */
cors?: cors.CorsOptions;
}
/**
* Configuration for hooking into an existing Express server
*/
interface AgentServerHookConfig extends AgentServerConfig {
/** Existing Express application to hook into */
app: Application;
/** Existing HTTP server to attach WebSocket to */
server: Server;
/** Whether to start the server (default: false when hooking) */
startServer?: boolean;
}
/**
* Configuration for creating a standalone server
*/
interface AgentServerStandaloneConfig extends AgentServerConfig {
/** Whether to start the server (default: true for standalone) */
startServer?: boolean;
}
/**
* Creates agent endpoints and WebSocket handler for an existing Express server
* @param config - Configuration for hooking into existing server
* @returns The WebSocket server, handler, and control functions
*/
declare const createAgentHook: (config: AgentServerHookConfig) => Promise<{
standalone: boolean;
server: Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
wss: ws.Server<typeof ws.default, typeof http.IncomingMessage>;
wsPath: string;
handler: {
broadcastReconnectNotification: () => void;
};
port: number;
interface: AgentInterface;
setAgentName: (newName: string) => void;
setAgentDescription: (newDescription: string) => void;
}>;
/**
* Creates a new standalone agent server and returns the server instance, the handler and the port it is running on.
* @param config - Configuration for the standalone server
* @returns The server instance, the handler and the port it is running on.
*/
declare const createAgentServer: () => Promise<{
server: http.Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
declare const createAgentServer: (config?: AgentServerStandaloneConfig) => Promise<{
standalone: boolean;
server: Server<typeof http.IncomingMessage, typeof http.ServerResponse>;
wss: ws.Server<typeof ws.default, typeof http.IncomingMessage>;

@@ -1541,6 +1484,6 @@ handler: {

interface: AgentInterface;
setAgentName: (name: string) => void;
setAgentDescription: (description: string) => void;
setAgentName: (newName: string) => void;
setAgentDescription: (newDescription: string) => void;
}>;
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentServer, type AgentState, AgentStateType, type PendingToolCall, type SelectedElement, type StagewiseInfo, type Tool, type ToolCallResult, type ToolList, type TransportInterface, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, agentMessageContentItemPartSchema, agentMessageUpdateSchema, baseSelectedElementSchema, createAgentServer, pendingToolCallSchema, selectedElementSchema, toolCallResultSchema, toolListSchema, toolSchema, userMessageContentItemSchema, userMessageMetadataSchema, userMessageSchema };
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentServer, type AgentServerConfig, type AgentServerHookConfig, type AgentServerStandaloneConfig, type AgentState, AgentStateType, type SelectedElement, type StagewiseInfo, type TransportInterface, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, agentMessageContentItemPartSchema, agentMessageUpdateSchema, baseSelectedElementSchema, createAgentHook, createAgentServer, selectedElementSchema, userMessageContentItemSchema, userMessageMetadataSchema, userMessageSchema };

@@ -73,90 +73,2 @@ import * as _trpc_server from '@trpc/server';

declare const pendingToolCallSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
parameters: z.ZodRecord<z.ZodString, z.ZodUnknown>;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}>;
type PendingToolCall = z.infer<typeof pendingToolCallSchema>;
declare const toolCallResultSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
error: z.ZodOptional<z.ZodString>;
result: z.ZodAny;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}>;
type ToolCallResult = z.infer<typeof toolCallResultSchema>;
declare const toolSchema: z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>;
type Tool = z.infer<typeof toolSchema>;
declare const toolListSchema: z.ZodArray<z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>, "many">;
type ToolList = z.infer<typeof toolListSchema>;
interface ToolCallingImplementation {
/** Informs the toolbar about the open tool calls of the agent that should be executed by toolbar provided tools.
*
* ***You must re-yield all pending tool calls that have not yet timed out upon initial subscription of the toolbar.***
*
* ***You should not return in this function, as this closes the subscription and will prompt the toolbar to subscribe again.***
*/
getPendingToolCalls: () => AsyncIterable<PendingToolCall>;
/**
* Informs the agent that a tool call has been completed and returns the result
*
* *Make sure to ignore a result if it's call ID is unknown, timed-out, or already handled.*
*
* @param response - The result of the tool call.
*/
onToolCallResult: (response: ToolCallResult) => void;
/**
* Informs the agent about tools that it has available.
*
* The list also includes tool definitions that may have already been sent over previously.
*
* *Upon establishing a connect to the agent, the toolbar will automatically send over the list of tools it has available.*
*
* @param toolList The list of tools that the toolbar makes available to the agent
*/
onToolListUpdate: (toolList: ToolList) => void;
}
/** Information about a selected element */

@@ -1206,3 +1118,2 @@ declare const baseSelectedElementSchema: z.ZodObject<{

state: StateImplementation;
toolCalling?: ToolCallingImplementation;
}

@@ -1349,37 +1260,2 @@ declare const interfaceRouter: (implementation: TransportInterface) => _trpc_server.TRPCBuiltRouter<{

}>>;
toolCalling: _trpc_server.TRPCBuiltRouter<{
ctx: {};
meta: object;
errorShape: _trpc_server.TRPCDefaultErrorShape;
transformer: true;
}, _trpc_server.TRPCDecorateCreateRouterOptions<{
getPendingToolCalls: _trpc_server.TRPCSubscriptionProcedure<{
input: void;
output: AsyncIterable<{
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, void, unknown>;
meta: object;
}>;
sendToolCallResult: _trpc_server.TRPCMutationProcedure<{
input: {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
};
output: void | undefined;
meta: object;
}>;
sendToolListUpdate: _trpc_server.TRPCMutationProcedure<{
input: {
description: string;
toolName: string;
parameters: {};
}[];
output: void | undefined;
meta: object;
}>;
}>>;
}>>;

@@ -1419,2 +1295,2 @@ type InterfaceRouter = ReturnType<typeof interfaceRouter>;

export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentState, AgentStateType, DEFAULT_STARTING_PORT, type InterfaceRouter, type PendingToolCall, type SelectedElement, type StagewiseInfo, type Tool, type ToolCallResult, type ToolList, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, transformer, userMessageMetadataSchema, userMessageSchema };
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentState, AgentStateType, DEFAULT_STARTING_PORT, type InterfaceRouter, type SelectedElement, type StagewiseInfo, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, transformer, userMessageMetadataSchema, userMessageSchema };

@@ -73,90 +73,2 @@ import * as _trpc_server from '@trpc/server';

declare const pendingToolCallSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
parameters: z.ZodRecord<z.ZodString, z.ZodUnknown>;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, {
id: string;
toolName: string;
parameters: Record<string, unknown>;
}>;
type PendingToolCall = z.infer<typeof pendingToolCallSchema>;
declare const toolCallResultSchema: z.ZodObject<{
toolName: z.ZodString;
id: z.ZodString;
error: z.ZodOptional<z.ZodString>;
result: z.ZodAny;
}, "strip", z.ZodTypeAny, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}, {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
}>;
type ToolCallResult = z.infer<typeof toolCallResultSchema>;
declare const toolSchema: z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>;
type Tool = z.infer<typeof toolSchema>;
declare const toolListSchema: z.ZodArray<z.ZodObject<{
toolName: z.ZodString;
description: z.ZodString;
parameters: z.ZodObject<{}, "strip", z.ZodTypeAny, {}, {}>;
}, "strip", z.ZodTypeAny, {
description: string;
toolName: string;
parameters: {};
}, {
description: string;
toolName: string;
parameters: {};
}>, "many">;
type ToolList = z.infer<typeof toolListSchema>;
interface ToolCallingImplementation {
/** Informs the toolbar about the open tool calls of the agent that should be executed by toolbar provided tools.
*
* ***You must re-yield all pending tool calls that have not yet timed out upon initial subscription of the toolbar.***
*
* ***You should not return in this function, as this closes the subscription and will prompt the toolbar to subscribe again.***
*/
getPendingToolCalls: () => AsyncIterable<PendingToolCall>;
/**
* Informs the agent that a tool call has been completed and returns the result
*
* *Make sure to ignore a result if it's call ID is unknown, timed-out, or already handled.*
*
* @param response - The result of the tool call.
*/
onToolCallResult: (response: ToolCallResult) => void;
/**
* Informs the agent about tools that it has available.
*
* The list also includes tool definitions that may have already been sent over previously.
*
* *Upon establishing a connect to the agent, the toolbar will automatically send over the list of tools it has available.*
*
* @param toolList The list of tools that the toolbar makes available to the agent
*/
onToolListUpdate: (toolList: ToolList) => void;
}
/** Information about a selected element */

@@ -1206,3 +1118,2 @@ declare const baseSelectedElementSchema: z.ZodObject<{

state: StateImplementation;
toolCalling?: ToolCallingImplementation;
}

@@ -1349,37 +1260,2 @@ declare const interfaceRouter: (implementation: TransportInterface) => _trpc_server.TRPCBuiltRouter<{

}>>;
toolCalling: _trpc_server.TRPCBuiltRouter<{
ctx: {};
meta: object;
errorShape: _trpc_server.TRPCDefaultErrorShape;
transformer: true;
}, _trpc_server.TRPCDecorateCreateRouterOptions<{
getPendingToolCalls: _trpc_server.TRPCSubscriptionProcedure<{
input: void;
output: AsyncIterable<{
id: string;
toolName: string;
parameters: Record<string, unknown>;
}, void, unknown>;
meta: object;
}>;
sendToolCallResult: _trpc_server.TRPCMutationProcedure<{
input: {
id: string;
toolName: string;
error?: string | undefined;
result?: any;
};
output: void | undefined;
meta: object;
}>;
sendToolListUpdate: _trpc_server.TRPCMutationProcedure<{
input: {
description: string;
toolName: string;
parameters: {};
}[];
output: void | undefined;
meta: object;
}>;
}>>;
}>>;

@@ -1419,2 +1295,2 @@ type InterfaceRouter = ReturnType<typeof interfaceRouter>;

export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentState, AgentStateType, DEFAULT_STARTING_PORT, type InterfaceRouter, type PendingToolCall, type SelectedElement, type StagewiseInfo, type Tool, type ToolCallResult, type ToolList, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, transformer, userMessageMetadataSchema, userMessageSchema };
export { type AgentAvailability, AgentAvailabilityError, type AgentMessageContentItemPart, type AgentMessageUpdate, type AgentState, AgentStateType, DEFAULT_STARTING_PORT, type InterfaceRouter, type SelectedElement, type StagewiseInfo, type UserMessage, type UserMessageContentItem, type UserMessageMetadata, transformer, userMessageMetadataSchema, userMessageSchema };
{
"name": "@stagewise/agent-interface",
"author": "tiq UG (haftungsbeschränkt)",
"version": "0.2.3",
"version": "0.3.0",
"license": "AGPL-3.0-only",

@@ -40,2 +40,3 @@ "type": "module",

"tsup": "^8.4.0",
"tsx": "^4.19.2",
"typescript": "^5.8.3",

@@ -50,4 +51,6 @@ "vitest": "^3.2.4",

"prebuild": "pnpm clean",
"test": "vitest --run"
"test": "vitest --run",
"example:standalone": "tsx examples/standalone-server.ts",
"example:express": "tsx examples/express-integration.ts"
}
}
+4
-318

@@ -1,321 +0,7 @@

# <img src="https://github.com/stagewise-io/assets/blob/main/media/logo.png?raw=true" alt="stagewise logo" width="48" height="48" style="border-radius: 50%; vertical-align: middle; margin-right: 8px;" /> stagewise
# <img src="https://github.com/stagewise-io/assets/blob/main/media/logo.png?raw=true" alt="stagewise logo" width="42" height="42" style="border-radius: 50%; vertical-align: middle; margin-right: 8px; margin-bottom:4px;" /> The frontend coding agent for production codebases
# Visual vibe coding. Right in your codebase.
## Agent Interface
[![VS Code Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/stagewise.stagewise-vscode-extension?label=VS%20Code%20Marketplace)](https://marketplace.visualstudio.com/items?itemName=stagewise.stagewise-vscode-extension) [![GitHub Repo stars](https://img.shields.io/github/stars/stagewise-io/stagewise)](https://github.com/stagewise-io/stagewise) [![Join us on Discord](https://img.shields.io/discord/1229378372141056010?label=Discord&logo=discord&logoColor=white)](https://discord.gg/gkdGsDYaKA) <!-- [![Build Status](https://img.shields.io/github/actions/workflow/status/stagewise-io/stagewise/ci.yml?branch=main)](https://github.com/stagewise-io/stagewise/actions) -->
This package offers both interface definitions and base-functionality to integrate agents with stagewise.
![stagewise demo](https://github.com/stagewise-io/assets/blob/main/media/demo.gif?raw=true)
## About the project
**stagewise is a browser toolbar that connects your frontend UI to your code ai agents in your code editor.**
* 🧠 Select any element(s) in your web app
* 💬 Leave a comment on it
* 💡 Let your AI-Agent do the magic
> Perfect for devs tired of pasting folder paths into prompts. stagewise gives your AI real-time, browser-powered context.
## ✨ Features
The stagewise Toolbar makes it incredibly easy to edit your frontend code with AI agents:
* ⚡ Works out of the box
* 🧩 Customise and extend functionality with Plugins
* 🧠 Sends DOM elements & more metadata to your AI agent
* 🧪 Comes with examples for React, Vue, Svelte and more
## 📖 Quickstart
### 1. 🧩 **Install the extension**
Install the extension from the extension store of your code editor:
- **Cursor**: [cursor:extension/stagewise.stagewise-vscode-extension](cursor:extension/stagewise.stagewise-vscode-extension)
- **VS Code**: [vscode:extension/stagewise.stagewise-vscode-extension](vscode:extension/stagewise.stagewise-vscode-extension)
- **Trae**: [trae:extension/stagewise.stagewise-vscode-extension](trae:extension/stagewise.stagewise-vscode-extension)
- **Windsurf**: [windsurf:extension/stagewise.stagewise-vscode-extension](windsurf:extension/stagewise.stagewise-vscode-extension)
### 2. 👨🏽‍💻 **Install and inject the toolbar (the extension will guide you)**
> [!TIP]
> 🪄 **AI-Assisted Setup (recommended):**
> 1. In Cursor, Press `CMD + Shift + P`
> 2. Enter `setupToolbar`
> 3. Execute the command and the toolbar will init automatically 🦄
Or follow the Manual Setup:
Install [@stagewise/toolbar](https://www.npmjs.com/package/@stagewise/toolbar):
```bash
pnpm i -D @stagewise/toolbar
```
Inject the toolbar into your app dev-mode:
```ts
// 1. Import the toolbar
import { initToolbar } from '@stagewise/toolbar';
// 2. Define your toolbar configuration
const stagewiseConfig = {
plugins: [],
};
// 3. Initialize the toolbar when your app starts
// Framework-agnostic approach - call this when your app initializes
function setupStagewise() {
// Only initialize once and only in development mode
if (process.env.NODE_ENV === 'development') {
initToolbar(stagewiseConfig);
}
}
// Call the setup function when appropriate for your framework
setupStagewise();
```
> ⚡️ The toolbar will **automatically connect** to the extension!
### 3. 🎉 **Start dev mode and begin coding!**
The toolbar should appear in the bottom right corner of your web app. If not, please reach out via [Discord](https://discord.gg/gkdGsDYaKA).
### Framework-specific integration examples
For easier integration, we provide framework-specific NPM packages that come with dedicated toolbar components (e.g., `<StagewiseToolbar>`). You can usually import these from `@stagewise/toolbar-[framework-name]`.
<details>
<summary>React.js</summary>
We provide the `@stagewise/toolbar-react` package for React projects. Initialize the toolbar in your main entry file (e.g., `src/main.tsx`) by creating a separate React root for it. This ensures it doesn't interfere with your main application tree.
```tsx
// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { StagewiseToolbar } from '@stagewise/toolbar-react';
import './index.css';
// Render the main app
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
);
// Initialize toolbar separately
const toolbarConfig = {
plugins: [], // Add your custom plugins here
};
document.addEventListener('DOMContentLoaded', () => {
const toolbarRoot = document.createElement('div');
toolbarRoot.id = 'stagewise-toolbar-root'; // Ensure a unique ID
document.body.appendChild(toolbarRoot);
createRoot(toolbarRoot).render(
<StrictMode>
<StagewiseToolbar config={toolbarConfig} />
</StrictMode>
);
});
```
</details>
<details>
<summary>Next.js</summary>
Use the `@stagewise/toolbar-next` package for Next.js applications. Include the `<StagewiseToolbar>` component in your root layout file (`src/app/layout.tsx`).
```tsx
// src/app/layout.tsx
import { StagewiseToolbar } from '@stagewise/toolbar-next';
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<StagewiseToolbar
config={{
plugins: [], // Add your custom plugins here
}}
/>
{children}
</body>
</html>
);
}
```
</details>
<details>
<summary>Nuxt.js</summary>
For Nuxt.js projects, you can use the `@stagewise/toolbar-vue` package. Place the `<StagewiseToolbar>` component in your `app.vue` or a relevant layout file.
```vue
// app.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';
const config: ToolbarConfig = {
plugins: [], // Add your custom plugins here
};
</script>
<template>
<div>
<NuxtRouteAnnouncer />
<ClientOnly>
<StagewiseToolbar :config="config" />
</ClientOnly>
<NuxtWelcome />
</div>
</template>
```
</details>
<details>
<summary>Vue.js</summary>
Use the `@stagewise/toolbar-vue` package for Vue.js projects. Add the `<StagewiseToolbar>` component to your main App component (e.g., `App.vue`).
```vue
// src/App.vue
<script setup lang="ts">
import { StagewiseToolbar, type ToolbarConfig } from '@stagewise/toolbar-vue';
const config: ToolbarConfig = {
plugins: [], // Add your custom plugins here
};
</script>
<template>
<StagewiseToolbar :config="config" />
<div>
<!-- Your app content -->
</div>
</template>
```
</details>
<details>
<summary>SvelteKit</summary>
For SvelteKit, you can integrate the toolbar using `@stagewise/toolbar` and Svelte's lifecycle functions, or look for a dedicated `@stagewise/toolbar-svelte` package if available. Create a component that conditionally renders/initializes the toolbar on the client side (e.g., `src/lib/components/StagewiseToolbarLoader.svelte` or directly in `src/routes/+layout.svelte`).
**Using `onMount` in `+layout.svelte` (with `@stagewise/toolbar`):**
```svelte
<!-- src/routes/+layout.svelte -->
<script lang="ts">
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { initToolbar, type ToolbarConfig } from '@stagewise/toolbar'; // Adjust path if needed
onMount(() => {
if (browser) {
const stagewiseConfig: ToolbarConfig = {
plugins: [
// Add your Svelte-specific plugins or configurations here
],
};
initToolbar(stagewiseConfig);
}
});
</script>
<slot />
```
**Using a loader component (example from repository):**
The example repository uses a `ToolbarLoader.svelte` which wraps `ToolbarWrapper.svelte`. `ToolbarWrapper.svelte` would then call `initToolbar` from `@stagewise/toolbar`.
```svelte
<!-- examples/svelte-kit-example/src/lib/components/stagewise/ToolbarLoader.svelte -->
<script lang="ts">
import type { ToolbarConfig } from '@stagewise/toolbar';
// ToolbarWrapper.svelte is a custom component that would call initToolbar
import ToolbarWrapper from './ToolbarWrapper.svelte';
import { browser } from '$app/environment';
const stagewiseConfig: ToolbarConfig = {
plugins: [
// ... your svelte plugin config
],
};
</script>
{#if browser}
<ToolbarWrapper config={stagewiseConfig} />
{/if}
```
You would then use `StagewiseToolbarLoader` in your `src/routes/+layout.svelte`.
</details>
## 🤖 Agent support
| **Agent** | **Supported** |
| -------------- | -------------- |
| Cursor | ✅ |
| GitHub Copilot | ✅ |
| Windsurf | ✅ |
| Cline | ✅ |
| Roo Code | ✅ |
| Kilo Code | ✅ |
| Trae | ✅ |
## 🛣️ Roadmap
Check out our [project roadmap](./.github/ROADMAP.md) for upcoming features, bug fixes, and progress.
## 📜 License
stagewise is developed by tiq UG (haftungsbeschränkt) and offered under the AGPLv3 license.
For more information on the license model, visit the [FAQ about the GNU Licenses](https://www.gnu.org/licenses/gpl-faq.html).
For use cases that fall outside the scope permitted by the AGPLv3 license, feel free to [📬 Contact Us](#contact-us-section).
## 🤝 Contributing
We're just getting started and love contributions! Check out our [CONTRIBUTING.md](https://github.com/stagewise-io/stagewise/blob/main/CONTRIBUTING.md) guide to get involved. For bugs and fresh ideas, please [Open an issue!](https://github.com/stagewise-io/stagewise/issues)
## 💻 Test stagewise locally
1. `git clone https://github.com/stagewise-io/stagewise && cd stagewise`
2. `pnpm i && pnpm dev`
3. Open the `stagewise` project in your IDE
4. Uninstall/ Disable the official `stagewise` extension
5. Press F5 (a new IDE window with the local extension-version installed will open up)
6. Visit `http://localhost:3002`
> You will see a next.js example application with the `stagewise`-toolbar already set up.
> It will be connected to the local vscode-extension in `apps/vscode-extension` and reflect all the extension-changes you apply locally.
## 💬 Community & Support
* 👾 [Join our Discord](https://discord.gg/gkdGsDYaKA)
* 📖 Open an [issue on GitHub](https://github.com/stagewise-io/stagewise/issues) for dev support.
## 📬 Contact Us
Got questions or want to license stagewise for commercial or enterprise use?
📧 **[sales@stagewise.io](mailto:sales@stagewise.io)**
You can find more information on how to use this interface in the following guide: [Build custom Agent Integrations](https://stagewise.io/docs/developer-guides/build-custom-agent-integrations)

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display