diff --git a/apps/agent/biome.json b/apps/agent/biome.json index 1c02279b..633fe8b1 100644 --- a/apps/agent/biome.json +++ b/apps/agent/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json", + "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json", "root": false, "extends": "//", "vcs": { diff --git a/apps/agent/components/sidebar/SettingsSidebar.tsx b/apps/agent/components/sidebar/SettingsSidebar.tsx index e20a07b6..754aae31 100644 --- a/apps/agent/components/sidebar/SettingsSidebar.tsx +++ b/apps/agent/components/sidebar/SettingsSidebar.tsx @@ -1,6 +1,7 @@ import { ArrowLeft, Bot, + Compass, Info, MessageSquare, Palette, @@ -38,6 +39,7 @@ const settingsNavItems: NavItem[] = [ icon: Palette, feature: Feature.CUSTOMIZATION_SUPPORT, }, + { name: 'Explore Features', to: '/onboarding/features', icon: Compass }, { name: 'Revisit Onboarding', to: '/onboarding', icon: RotateCcw }, ] diff --git a/apps/agent/entrypoints/onboarding/features/BentoCard.tsx b/apps/agent/entrypoints/onboarding/features/BentoCard.tsx index 0c59f980..6d32f0a2 100644 --- a/apps/agent/entrypoints/onboarding/features/BentoCard.tsx +++ b/apps/agent/entrypoints/onboarding/features/BentoCard.tsx @@ -1,6 +1,6 @@ import { DialogClose, DialogContent } from '@radix-ui/react-dialog' -import { ArrowRight, type LucideIcon, X } from 'lucide-react' -import type { FC, ReactNode } from 'react' +import { ArrowRight, Check, type LucideIcon, X } from 'lucide-react' +import type { FC } from 'react' import { Dialog, DialogOverlay, @@ -15,14 +15,10 @@ export interface Feature { Icon: LucideIcon tag: string title: string - description: string | ReactNode - highlights: { - title: string - description: string | ReactNode - Icon: LucideIcon - }[] + description: string + detailedDescription: string + highlights: string[] videoDuration?: string - tip: string gridClass: string videoUrl?: string gifUrl?: string @@ -156,41 +152,24 @@ export const BentoCard: FC = ({ feature, mounted, index }) => { - {/* Feature Highlights - Bento Layout */} -
-

- {feature.description} + {/* Feature Details */} +

+

+ {feature.detailedDescription}

- {/* Bento Grid for Highlights */} -
+ {/* Highlights List */} +
    {feature.highlights.map((highlight, index) => ( -
    - {typeof highlight.description === 'string' && - highlight.description?.length < 70 && ( - - )} - -
    -

    - {highlight.title} -

    -

    - {highlight.description} -

    -
    -
    + + {highlight} + ))} -
- -
-

- đź’ˇ Tip: {feature.tip} -

-
+
diff --git a/apps/agent/entrypoints/onboarding/features/Features.tsx b/apps/agent/entrypoints/onboarding/features/Features.tsx index bbcfb7a8..a7414d11 100644 --- a/apps/agent/entrypoints/onboarding/features/Features.tsx +++ b/apps/agent/entrypoints/onboarding/features/Features.tsx @@ -1,27 +1,14 @@ import { ArrowDown, - ArrowLeftRight, ArrowRight, BookOpenText, - ClipboardList, - CodeXml, - FileTerminal, - Layers, - LayoutDashboard, - Link, + Bot, + Code2, + FolderOpen, + GitBranch, LinkIcon, - Lock, - MessageSquare, - Monitor, - MousePointerClick, - Puzzle, - Search, - Settings, - ShieldCheck, - SlidersVertical, + Plug, SplitSquareHorizontal, - SquareStack, - Zap, } from 'lucide-react' import { type FC, useEffect, useState } from 'react' import DiscordLogo from '@/assets/discord-logo.svg' @@ -29,13 +16,14 @@ import GithubLogo from '@/assets/github-logo.svg' import SlackLogo from '@/assets/slack-logo.svg' import { PillIndicator } from '@/components/elements/pill-indicator' import { Button } from '@/components/ui/button' -import { Kbd, KbdGroup } from '@/components/ui/kbd' import { AGENT_MODE_DEMO_URL, + AGENTIC_CODING_DEMO_URL, BROWSER_OS_INTRO_VIDEO_URL, + COWORK_DEMO_URL, MCP_SERVER_DEMO_URL, - QUICK_SEARCH_GIF_URL, SPLIT_VIEW_GIF_URL, + WORKFLOWS_DEMO_URL, } from '@/lib/constants/mediaUrls' import { discordUrl, @@ -49,157 +37,115 @@ import { VideoFrame } from './VideoFrame' const features: Feature[] = [ { - id: 'split-view', - Icon: SplitSquareHorizontal, - tag: 'CORE', - title: 'Split-View Mode', - description: 'Use ChatGPT, Claude, and Gemini alongside any website.', + id: 'agent', + Icon: Bot, + tag: 'AI AGENT', + title: 'Built-in AI Agent', + description: + 'Describe any task and watch BrowserOS execute it—clicking, typing, and navigating for you.', + detailedDescription: + 'The BrowserOS Agent turns your words into browser actions. Describe what you need in plain English—fill out this form, extract data from that page, navigate through these steps—and the agent handles the rest. It clicks buttons, types text, navigates between pages, and completes multi-step workflows automatically. Everything runs locally on your machine with your own API keys, so your data stays private.', highlights: [ - { - title: 'Stop Tab Switching Chaos', - description: - 'Access ChatGPT, Gemini, and Claude on any website without switching tabs. Use your own logins and API keys.', - Icon: LayoutDashboard, - }, - { - title: 'Clash-of-GPTs', - description: - 'Use multiple LLMs side-by-side. Compare responses from different AI providers simultaneously.', - Icon: ShieldCheck, - }, - { - title: 'Toggle with Shortcut', - description: ( - <> - - Alt+K - {' '} - on any webpage - - ), - Icon: ArrowLeftRight, - }, - { - title: 'Switch Provider with Shortcut', - description: ( - <> - - Alt+L - {' '} - to switch providers - - ), - Icon: SlidersVertical, - }, + 'Multi-tab execution — run agents in multiple tabs simultaneously', + 'Smart navigation — automatically finds and interacts with page elements', + 'Form filling — completes forms with intelligent context understanding', + 'Data extraction — pulls structured data from any webpage', + 'Auto-save sessions — pick up where you left off from the Assistant panel', ], - tip: 'Use shortcuts to toggle split-view mode and switch providers.', + videoDuration: '2:22', gridClass: 'md:col-span-2', - gifUrl: SPLIT_VIEW_GIF_URL, + videoUrl: AGENT_MODE_DEMO_URL, }, { - id: 'context-aware', - tag: 'AI', - Icon: MessageSquare, - title: 'Built in Agent', + id: 'mcp-server', + Icon: Plug, + tag: 'MCP', + title: 'BrowserOS as MCP Server', description: - 'Let BrowserOS Agent browse, click, type, and complete tasks for you. Just describe what you need done!', + 'Connect Claude Code, Gemini CLI, or any MCP client to control your browser with 31 tools.', + detailedDescription: + 'BrowserOS includes a built-in MCP server that lets AI coding agents control your browser. Claude Code can open tabs, click elements, fill forms, take screenshots, and read page content—all through natural language commands. Unlike Chrome DevTools MCP which requires debug profiles and separate servers, BrowserOS works out of the box. Just copy the URL from settings and connect.', highlights: [ - { - title: 'Smart Navigation', - description: - 'Agent navigates websites and finds information automatically', - Icon: MousePointerClick, - }, - { - title: 'Form Filling', - description: - 'Automatically fills forms with intelligent context understanding', - Icon: ClipboardList, - }, - { - title: 'Data Extraction', - description: 'Extracts and organizes data from any webpage', - Icon: SquareStack, - }, - { - title: 'Privacy Protected', - description: 'All automation runs locally with your own API keys', - Icon: Lock, - }, + 'One-line setup — run `claude mcp add` with your server URL to connect', + '31 browser tools — tabs, clicks, typing, screenshots, bookmarks, history', + 'Works everywhere — Claude Code, Gemini CLI, Codex, Claude Desktop', + 'Authenticated access — extract data from logged-in pages like LinkedIn', ], - videoDuration: '2:22', - tip: 'Simply describe your task in natural language and let the agent handle the complexity!', + videoDuration: '1:40', gridClass: 'md:col-span-1', - videoUrl: AGENT_MODE_DEMO_URL, + videoUrl: MCP_SERVER_DEMO_URL, }, { - id: 'workflow-presets', - tag: 'PRODUCTIVITY', - Icon: Layers, - title: 'BrowserOS as MCP Server', + id: 'workflows', + Icon: GitBranch, + tag: 'AUTOMATION', + title: 'Visual Workflows', description: - 'Connect BrowserOS with Claude Code, Claude Desktop, and other MCP clients for powerful agentic browser automation', + 'Build reliable, repeatable automations with a visual graph builder.', + detailedDescription: + 'Workflows turn complex browser tasks into reliable, reusable automations. Instead of hoping the agent figures out the right steps each time, you define the exact sequence in a visual graph. Describe what you want in chat, and the workflow agent generates the graph. Add loops, conditionals, and parallel branches. Save workflows and run them on-demand whenever you need.', highlights: [ - { - title: 'Agentic Browser Automation', - description: 'Execute web tasks autonomously through natural language', - Icon: Monitor, - }, - { - title: 'Seamless Integration', - description: 'Works with Claude Code, Desktop, and MCP clients', - Icon: Link, - }, - { - title: 'Web Development Workflows', - description: 'Accelerate frontend development and prototyping', - Icon: CodeXml, - }, - { - title: 'Web Automation', - description: 'Automate repetitive web tasks and workflows', - Icon: FileTerminal, - }, + 'Chat-to-graph — describe your automation and get a visual workflow', + 'Parallel execution — run multiple branches simultaneously', + 'Loops & conditionals — handle complex logic with flow control', + 'Save & reuse — run saved workflows on-demand, daily, or weekly', ], - videoDuration: '1:40', - tip: 'Use commands like "Open amazon.com on browseros" to control your browser directly from Claude! Read the setup guide to get started.', gridClass: 'md:col-span-1', - videoUrl: MCP_SERVER_DEMO_URL, + videoUrl: WORKFLOWS_DEMO_URL || undefined, }, { - id: 'search', - tag: 'SEARCH', - Icon: Search, - title: 'Quick Search', + id: 'cowork', + Icon: FolderOpen, + tag: 'FILES', + title: 'Cowork', description: - 'Lightning-fast search using any AI provider from the new tab page.', + 'Give the agent access to local files. Research the web, then save reports to your computer.', + detailedDescription: + 'Cowork lets the agent read and write files on your computer. Select a folder and the agent can read documents, write reports, and run shell commands—all while browsing the web. Research a topic online and generate an HTML report. Scrape product data and save it as a spreadsheet. The agent is sandboxed to your selected folder and cannot access anything outside it.', highlights: [ - { - title: 'Instant AI Search', - description: - 'Search with any AI provider directly from your new tab page', - Icon: Search, - }, - { - title: 'Lightning Fast', - description: 'Opens the search results within 400ms!', - Icon: Zap, - }, - { - title: 'Easy Configuration', - description: 'You can customize providers in settings.', - Icon: Settings, - }, - { - title: 'Multiple Providers', - description: - 'Switch between Google, ChatGPT, Claude, Gemini and more instantly', - Icon: Puzzle, - }, + 'Read & write files — create reports, spreadsheets, and markdown documents', + 'Run shell commands — execute commands within your selected folder', + 'Browser + files — combine web research with local file operations', + 'Sandboxed security — agent can only access the folder you select', ], - tip: 'Set up your default AI provider in settings for the fastest search experience!', gridClass: 'md:col-span-2', - gifUrl: QUICK_SEARCH_GIF_URL, + videoUrl: COWORK_DEMO_URL || undefined, + }, + { + id: 'split-view', + Icon: SplitSquareHorizontal, + tag: 'CORE', + title: 'Split-View Mode', + description: + 'Open ChatGPT, Claude, or Gemini alongside any webpage. Compare responses in the LLM Hub.', + detailedDescription: + 'Access AI chat on any webpage without switching tabs. Click the Chat button or press Alt+K to open a panel with Claude, ChatGPT, or Gemini right next to your current page. Copy page content, attach screenshots, and get answers in context. Open the LLM Hub (Cmd+Shift+U) to query multiple models simultaneously and compare their responses side-by-side.', + highlights: [ + 'AI on any page — chat panel stays open as you browse', + 'LLM Hub — compare responses from Claude, ChatGPT, and Gemini at once', + 'Quick toggle — Alt+K opens chat, Alt+L switches providers', + 'Copy & screenshot — grab page content or capture screenshots for context', + ], + gridClass: 'md:col-span-2', + gifUrl: SPLIT_VIEW_GIF_URL, + }, + { + id: 'agentic-coding', + Icon: Code2, + tag: 'DEV', + title: 'Agentic Coding', + description: + 'Claude Code tests your web app, reads console errors, and fixes your code in one loop.', + detailedDescription: + 'The killer workflow for frontend developers. Claude Code connects to BrowserOS, opens your localhost app, clicks through the UI, reads console errors and network failures, then goes back to your codebase to fix the bugs—all in one continuous loop. No more switching between terminal and browser. No more copy-pasting error messages. Just describe the issue and let the agent debug it end-to-end.', + highlights: [ + 'Test & fix loop — Claude navigates your app, finds bugs, and patches them', + 'Console access — read browser console and network errors from your terminal', + 'Screenshot debugging — Claude captures screenshots to understand visual issues', + 'Rapid prototyping — build UIs faster with AI that sees your work', + ], + gridClass: 'md:col-span-1', + videoUrl: AGENTIC_CODING_DEMO_URL || undefined, }, ] diff --git a/apps/agent/lib/constants/mediaUrls.ts b/apps/agent/lib/constants/mediaUrls.ts index 0b83c5b6..29fbe59c 100644 --- a/apps/agent/lib/constants/mediaUrls.ts +++ b/apps/agent/lib/constants/mediaUrls.ts @@ -27,3 +27,24 @@ export const MCP_SERVER_DEMO_URL = */ export const QUICK_SEARCH_GIF_URL = 'https://pub-b52e24a001bd463a848cb2d8c8667f63.r2.dev/quick-search.gif' + +/** + * @public + * TODO: Replace with actual video URL + */ +export const COWORK_DEMO_URL = + 'https://pub-80f8a01e6e8b4239ae53a7652ef85877.r2.dev/resources/organize%20files%20on%20desktop%201.4x.mp4' + +/** + * @public + * TODO: Replace with actual video URL + */ +export const WORKFLOWS_DEMO_URL = + 'https://pub-80f8a01e6e8b4239ae53a7652ef85877.r2.dev/resources/browseros-workflow-demo.mp4' + +/** + * @public + * TODO: Replace with actual video URL + */ +export const AGENTIC_CODING_DEMO_URL = + 'https://pub-80f8a01e6e8b4239ae53a7652ef85877.r2.dev/resources/cowork-hn-extract-demo.mp4' diff --git a/apps/server/src/agent/provider-adapter/ui-message-stream.ts b/apps/server/src/agent/provider-adapter/ui-message-stream.ts index 59aaf7c8..6e9a34ab 100644 --- a/apps/server/src/agent/provider-adapter/ui-message-stream.ts +++ b/apps/server/src/agent/provider-adapter/ui-message-stream.ts @@ -24,9 +24,9 @@ export type UIMessageStreamEvent = type: 'tool-input-available' toolCallId: string toolName: string - input: unknown + input?: unknown } - | { type: 'tool-output-available'; toolCallId: string; output: unknown } + | { type: 'tool-output-available'; toolCallId: string; output?: unknown } | { type: 'tool-input-error'; toolCallId: string; errorText: string } | { type: 'tool-output-error'; toolCallId: string; errorText: string } | { type: 'source-url'; sourceId: string; url: string; title?: string } diff --git a/biome.json b/biome.json index 41a04abd..58701288 100644 --- a/biome.json +++ b/biome.json @@ -1,5 +1,5 @@ { - "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json", + "$schema": "https://biomejs.dev/schemas/2.3.10/schema.json", "vcs": { "enabled": true, "clientKind": "git",