feat: better error message + allow agent to restart the sandbox dev server (#2584)

* allow agent to restart the sandbox dev server

* surface better error messages

Author: Kitenite

apps/web/client/src/app/api/chat/route.ts

@@ -186,9 +186,28 @@ export const streamResponse = async (req: NextRequest) => {
                     .then(({ api }) => api.usage.revertIncrement({ usageRecordId, rateLimitId }))
                     .catch(error => console.error('Error in chat usage decrement', error));
             }
-            throw error;
         },
     });
 
-    return result.toDataStreamResponse();
+    return result.toDataStreamResponse(
+        {
+            getErrorMessage: errorHandler,
+        }
+    );
+}
+
+export function errorHandler(error: unknown) {
+    if (error == null) {
+        return 'unknown error';
+    }
+
+    if (typeof error === 'string') {
+        return error;
+    }
+
+    if (error instanceof Error) {
+        return error.message;
+    }
+
+    return JSON.stringify(error);
 }

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-messages/message-content/tool-call-simple.tsx

@@ -5,6 +5,7 @@ import {
     ONLOOK_INSTRUCTIONS_TOOL_NAME,
     READ_FILES_TOOL_NAME,
     READ_STYLE_GUIDE_TOOL_NAME,
+    SANDBOX_TOOL_NAME,
     SCRAPE_URL_TOOL_NAME,
     TERMINAL_COMMAND_TOOL_NAME
 } from '@onlook/ai';
@@ -22,6 +23,7 @@ const TOOL_ICONS: Record<string, any> = {
     [CREATE_FILE_TOOL_NAME]: Icons.FilePlus,
     [TERMINAL_COMMAND_TOOL_NAME]: Icons.Terminal,
     [SCRAPE_URL_TOOL_NAME]: Icons.Globe,
+    [SANDBOX_TOOL_NAME]: Icons.Cube,
 };
 
 export function ToolCallSimple({

apps/web/client/src/app/project/[id]/_hooks/use-chat.tsx

@@ -36,8 +36,6 @@ export function ChatProvider({ children }: { children: React.ReactNode }) {
                 editorEngine.chat.error.handleChatError(new Error('Output length limit reached'));
             } else if (finishReason === 'content-filter') {
                 editorEngine.chat.error.handleChatError(new Error('Content filter error'));
-            } else if (finishReason === 'error') {
-                editorEngine.chat.error.handleChatError(new Error('Error in chat'));
             } else if (finishReason === 'other' || finishReason === 'unknown') {
                 editorEngine.chat.error.handleChatError(new Error('Unknown finish reason'));
             }

apps/web/client/src/components/store/editor/sandbox/session.ts

@@ -32,6 +32,15 @@ export class SessionManager {
         await this.createTerminalSessions(this.session);
     }
 
+    async restartDevServer(): Promise<boolean> {
+        const task = await this.session?.tasks.get('dev');
+        if (task) {
+            await task.restart();
+            return true;
+        }
+        return false;
+    }
+
     getTerminalSession(id: string) {
         return this.terminalSessions.get(id) as TerminalSession | undefined;
     }

apps/web/client/src/components/tools.ts

@@ -16,6 +16,7 @@ import {
     ONLOOK_INSTRUCTIONS_TOOL_NAME,
     READ_FILES_TOOL_NAME,
     READ_STYLE_GUIDE_TOOL_NAME,
+    SANDBOX_TOOL_NAME,
     SCRAPE_URL_TOOL_NAME,
     TERMINAL_COMMAND_TOOL_NAME,
 } from '@onlook/ai';
@@ -62,6 +63,8 @@ export async function handleToolCall(toolCall: ToolCall<string, unknown>, editor
             return await handleScrapeUrlTool(
                 toolCall.args as z.infer<typeof SCRAPE_URL_TOOL_PARAMETERS>,
             );
+        } else if (toolName === SANDBOX_TOOL_NAME) {
+            return await handleSandboxTool(editorEngine);
         } else {
             throw new Error(`Unknown tool call: ${toolCall.toolName}`);
         }
@@ -209,4 +212,13 @@ async function handleScrapeUrlTool(
         console.error('Error scraping URL:', error);
         throw new Error(`Failed to scrape URL ${args.url}: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
+}
+
+async function handleSandboxTool(editorEngine: EditorEngine): Promise<string> {
+    const result = await editorEngine.sandbox.session.restartDevServer();
+    if (result) {
+        return 'Dev server restarted';
+    } else {
+        return 'Failed to restart dev server';
+    }
 }

packages/ai/src/tools/files.ts

@@ -63,3 +63,11 @@ export const terminalCommandTool = tool({
     description: 'Run a Bash command in the terminal',
     parameters: TERMINAL_COMMAND_TOOL_PARAMETERS,
 });
+
+export const SANDBOX_TOOL_NAME = 'restart_dev_server';
+export const SANDBOX_TOOL_PARAMETERS = z.object({});
+export const sandboxTool = tool({
+    description:
+        'Restart the development server. This should only be used if absolutely necessary such as if updating dependencies, clearing next cache, or if the server is not responding.',
+    parameters: SANDBOX_TOOL_PARAMETERS,
+});

packages/ai/src/tools/tools.ts

@@ -8,6 +8,8 @@ import {
     listFilesTool,
     READ_FILES_TOOL_NAME,
     readFilesTool,
+    SANDBOX_TOOL_NAME,
+    sandboxTool,
     TERMINAL_COMMAND_TOOL_NAME,
     terminalCommandTool,
 } from './files';
@@ -28,6 +30,7 @@ export const buildToolSet: ToolSet = {
     [CREATE_FILE_TOOL_NAME]: createFileTool,
     [TERMINAL_COMMAND_TOOL_NAME]: terminalCommandTool,
     [SCRAPE_URL_TOOL_NAME]: scrapeUrlTool,
+    [SANDBOX_TOOL_NAME]: sandboxTool,
 };
 
 export const askToolSet: ToolSet = {

packages/ui/src/components/icons/index.tsx

@@ -20,6 +20,7 @@ import {
     BorderSolidIcon,
     BorderTopIcon,
     BoxIcon,
+    BoxModelIcon,
     ButtonIcon,
     ChatBubbleIcon,
     CheckCircledIcon,
@@ -1460,6 +1461,7 @@ export const Icons = {
     Button: ButtonIcon,
     Bookmark: BookmarkIcon,
     BookmarkFilled: BookmarkFilledIcon,
+    BoxModel: BoxModelIcon,
 
     ChatBubble: ChatBubbleIcon,
     Check: CheckIcon,