BROWSER USE - Browser Use Agents: give Browser Use a task and receive completed work. API V4 is current for new integrations. - Browser Infrastructure: connect your agent or automation to managed browsers through SDK, REST, or CDP. Starts at $0.02/browser-hour. - Developer tools: Open Source, Browser Harness, SDK, and MCP support the two products above. [Developer Index](https://browser-use.com/index.md) [Product Map](https://browser-use.com/llms.txt) [Full Product Context](https://browser-use.com/llms-full.txt) [Pricing](https://browser-use.com/pricing.md) [Cloud Docs](https://docs.browser-use.com/cloud/quickstart) [Open Source Docs](https://docs.browser-use.com/open-source/introduction) --- # styles.: 52 WebMCP tools for AI agents ![](https://www.google.com/s2/favicons?domain=styles.krnl.studio&sz=96) Other · styles.krnl.studio ## styles. Free in-browser mockup and motion graphics editor. Agents can add artboards and layers, edit components and apply looks. [Open styles.krnl.studio](https://styles.krnl.studio/) ## Ask an agent to - Put my screenshot in a device frame on a gradient - Add a new artboard and align its layers - Apply a magic look to the current design ## 52 tools - `styles_add_animation` Adds an animation to a layer (target = layer id) or to the artboard camera (target = "@artboard", props camZoom, camX, camY, camRotation, camRx, camRy). Kinds: "preset" {preset… artboardId: string?, anim: object, replaceId: string? - `styles_add_annotation` Adds a hand-drawn mark to point at part of a design: arrow-curve, arrow, arrow-loop, circle, underline, box, callout, cross, tick, sparkle. x/y is the centre, size its width in px (default 22% of the artboard), color… artboardId: string?, kind: string, x: number?, y: number?, size: number?, color: string?, width: number?, rotation: number?, … (list cut; the site may define more) - `styles_add_artboard` Adds an artboard (one image or video when you export). Give a format id (x-16x9, x-1x1, x-4x5, x-9x16, x-header, ig-post, ig-square, ig-story, ...) or a width and height. Optionally copy another artboard. format: string?, width: integer?, height: integer?, name: string?, duration: number?, copyFrom: string? - `styles_add_asset` Registers an image or video (src is an https URL, or a data: URL for small files) so layers and devices can use it by id. Returns the asset id. id: string?, kind: string, name: string?, mime: string, width: number?, height: number?, duration: number?, src: string, … (list cut; the site may define more) - `styles_add_audio` Adds a sound to the artboard timeline from an audio asset (register it with add\_asset kind "audio" first): start (ms on the artboard), trimStart (ms into the file), length (ms, 0 = to the end), volume 0..1, fadeIn and… artboardId: string?, track: object - `styles_add_cursor` Adds a mouse pointer that glides from stop to stop (artboard px; the tip lands on each), pausing and clicking at each one with a ripple, like a screen recording. stops: 2 to 12 points (default: from the lower left to… artboardId: string?, stops: array?, start: number?, moveMs: number?, pauseMs: number?, click: boolean?, size: number?, theme: string?, … (list cut; the site may define more) - `styles_add_instance` Places a linked component at its own size, centred by default. Returns instanceId. artboardId: string?, componentId: string, x: number?, y: number?, width: number?, height: number? - `styles_add_layer` Adds a layer on top (or at index, or inside a group). Types: text, rect, ellipse, star, path, image, video, device, code, chart, group, instance. x/y is the CENTRE in artboard px. Missing fields get good defaults.… artboardId: string?, layer: object, parentId: string?, index: integer? - `styles_add_media_from_url` Downloads an image or video from an https URL into the design (stored in this browser) and places it in the selected or first empty device, or as a new layer. url: string - `styles_align_layers` Aligns layers to the artboard (one layer) or to each other (several): left, hcenter, right, top, vcenter, bottom. Or distributes them evenly: hdistribute, vdistribute. artboardId: string?, layerIds: array, align: string - `styles_apply_brand` Restyles the whole design with a brand: colors (1 to 5 accent colours, most important first), ink (darkest), paper (lightest), head and body fonts ({family, weight}). Saturated colours become the accents (each… colors: array, ink: string?, paper: string?, head: object?, body: object? - `styles_apply_layout` Arranges the artboard's devices with a layout (adding or removing devices to match its count): center (1), hero (1), low (1), turn-left (1), turn-right (1), lean-back (1), flat-lay (1), tilt (1), closeup (1), peek… artboardId: string?, layout: string - `styles_apply_template` Replaces the design with a template (undo brings the old one back). Media already in the design is kept. id: string - `styles_auto_animate` Replaces the artboard's animations with a full choreography: entrances in reading order, life on screen, a camera move and (for some moods) exits. Moods: smooth (Calm rises and slow drifts.) bold (Sharp reveals with… artboardId: string?, mood: string?, seed: integer? - `styles_clear_animations` Removes every animation from an artboard (or from one layer). artboardId: string?, layerId: string? - `styles_copy_design` Makes this design its own copy, with a new id and a name ending in (copy). - `styles_delete_animations` Deletes animations by id. artboardId: string?, animIds: array - `styles_delete_artboard` Deletes an artboard. The last scene cannot be deleted. artboardId: string - `styles_delete_audio` Removes a sound from the timeline. artboardId: string?, trackId: string - `styles_delete_component` Removes a component. Refuses while instances exist unless detach is true, which makes them independent first. componentId: string, detach: boolean? - `styles_delete_layers` Deletes layers (and their animations). artboardId: string?, layerIds: array - `styles_detach_instance` Replaces an instance with an independent group and its motion, with new layer ids. Returns layerId. artboardId: string?, layerId: string - `styles_duplicate_layers` Duplicates layers with their animations, offset by (dx, dy) px (default 24, 24). Returns the new ids. artboardId: string?, layerIds: array, dx: number?, dy: number? - `styles_export_image` Exports the current artboard as an image file the person downloads (png, jpg or webp, scale 1 to 4). format: string?, scale: number? - `styles_get_document`read-only Returns the whole design as JSON: artboards (size, duration, background), their layers (bottom to top) and animations. Read this before editing so you use real ids. - `styles_group_layers` Puts layers (siblings) into a new group. Children keep their place on the artboard. mask: true makes the bottom one a mask, so the others show only inside its shape (an image inside text, a reveal through a moving… artboardId: string?, layerIds: array, name: string?, mask: boolean? - `styles_import_svg` Turns SVG markup (a logo, an icon, a Figma "Copy as SVG") into editable path layers, one per shape, in a group you can animate shape by shape (stagger, draw the strokes with trim, morph). Fills, strokes, gradients… artboardId: string?, svg: string, x: number?, y: number?, size: number?, name: string? - `styles_list_backgrounds`read-only Lists background presets (id, name, collection). Use the returned \`bg\` object with update\_artboard {background}. collection: string? - `styles_list_components`read-only Lists each component id, name, width, height and number of instances across the design. - `styles_list_devices`read-only Lists device models (id, name, category, finishes) for device layers. - `styles_list_layers`read-only Lists the layers of an artboard (id, type, name, box) from bottom to top, flattened, with their parent group. artboardId: string? - `styles_list_templates`read-only Lists templates (id, name, category, format). Apply one with apply\_template. category: string? - `styles_magic_look` Restyles a mockup in one go from the screenshot's own colours: a matching background, a layout that suits the screen and a shadow. Change seed for another take. artboardId: string?, seed: integer? - `styles_make_component` Moves selected layers and their motion into a linked component, replacing them with an instance. Like Group, uses selected siblings in the first selected layer's parent and leaves other parents alone. Adjacent layers… artboardId: string?, layerIds: array, name: string? - `styles_make_sizes` Copies an artboard into other formats (x-16x9, x-1x1, x-4x5, x-9x16, x-header, ig-post, ig-square, ig-story, ...), each as a new artboard. Layers keep their place relative to the artboard and scale so nothing… artboardId: string?, formats: array - `styles_morph_to` Smart animate: animates this artboard into another one. Layers are matched by name and type; matched layers move, resize, turn, fade and change colour to match, text changes, new layers fade in and missing ones fade… artboardId: string?, toArtboardId: string, start: number?, length: number?, easing: object? - `styles_move_artboard` Moves an artboard to a new position in the list. artboardId: string, index: integer - `styles_paste_layers` Pastes layers with their animations, media and linked components into an artboard with new layer ids, offset by (dx, dy). Identical components are reused; conflicting component ids are remapped without changing… artboardId: string?, layers: array?, anims: array?, assets: object?, components: array?, dx: number?, dy: number?, animsOnly: boolean?, … (list cut; the site may define more) - `styles_play` Plays or pauses the animation preview, or moves the playhead to t ms. playing: boolean?, t: number? - `styles_rename_component` Changes a component name. componentId: string, name: string - `styles_reorder_layer` Moves a layer in the stack: to "front", "back", "forward", "backward", or a numeric index (0 = bottom). artboardId: string?, layerId: string, to - `styles_see_design`read-only Returns a picture of the current artboard (at time t ms, default the playhead) so you can check your work. t: number?, size: number? - `styles_select_artboard` Shows an artboard in the editor. artboardId: string - `styles_set_document` Sets the design name, the "made with styles" credit mark on exports (on by default), 3D mode, or your own mark (watermark): mark = { text, assetId (an image asset, for a logo), corner bl|br|tl|tr|bc, size, opacity… name: string?, credit: boolean?, mode3d: boolean?, mark?, film: object? - `styles_shift_animations` Moves animations in time by \`by\` ms, or staggers them: each next one (in the given order) starts \`stagger\` ms after the previous. artboardId: string?, animIds: array, by: number?, stagger: number? - `styles_ungroup` Dissolves a group, keeping its children where they are. artboardId: string?, layerId: string - `styles_update_animation` Changes an animation: start, end (ms), easing, to/from, preset, mode, effect, split, muted. artboardId: string?, animId: string, patch: object - `styles_update_artboard` Changes an artboard: name, width, height (or format id), duration (ms), fps, background, bgFx {noise, blur, vignette}, camera {zoom, x, y, rotation, rx, ry}, vfx {type, intensity}. Resizing lays the design out again… artboardId: string?, format: string?, name: string?, width: integer?, height: integer?, duration: number?, fps: integer?, background?, … (list cut; the site may define more) - `styles_update_audio` Changes a sound on the timeline (start, trimStart, length, volume, fadeIn, fadeOut, loop). artboardId: string?, trackId: string, patch: object - `styles_update_instance` Merges layer overrides and changes offset (ms), loop or the linked component. resetOverrides clears all overrides first; an empty layer override clears that layer. artboardId: string?, layerId: string, overrides: object?, offset: number?, loop: boolean?, componentId: string?, resetOverrides: boolean? - `styles_update_layer` Changes any properties of a layer (position x/y is the centre, width, height, rotation, scale, opacity 0..1, rx/ry tilt in degrees, shadow, blur, fill, text, style, media, model, finish, frame...). Nested objects like… artboardId: string?, layerId: string, patch: object - `styles_update_layers` Applies the same patch to several layers at once. artboardId: string?, layerIds: array, patch: object Tools 52 Registered with JavaScript Scan finished Oct 19, 2026 Tool names and descriptions are what styles.krnl.studio/ registered when we loaded it in Chrome 154 on Browser Use Cloud. The summary and the “ask an agent” lines are AI-written from them. To call the tools yourself, see [Chrome’s WebMCP docs](https://developer.chrome.com/docs/ai/webmcp). [How we found it](https://browser-use.com/webmcp#method). ## More other sites - [![](https://www.google.com/s2/favicons?domain=cez.cz&sz=64)ČEZ3 tools · cez.cz](https://browser-use.com/webmcp/cez.cz) - [![](https://www.google.com/s2/favicons?domain=realty.yandex.ru&sz=64)Yandex Realty3 tools · realty.yandex.ru](https://browser-use.com/webmcp/realty.yandex.ru) - [![](https://www.google.com/s2/favicons?domain=one-place.com&sz=64)One Place2 tools · one-place.com](https://browser-use.com/webmcp/one-place.com) - [![](https://www.google.com/s2/favicons?domain=2-luv.com&sz=64)2luv7 tools · 2-luv.com](https://browser-use.com/webmcp/2-luv.com) - [![](https://www.google.com/s2/favicons?domain=smogcheck.com&sz=64)SmogCheck.com5 tools · smogcheck.com](https://browser-use.com/webmcp/smogcheck.com) - [![](https://www.google.com/s2/favicons?domain=imgly.net&sz=64)ImgBox4 tools · imgly.net](https://browser-use.com/webmcp/imgly.net) [All 452 other sites →](https://browser-use.com/webmcp/other)