Navigation

The ApogeeShell API gives your app control over navigation within the webAI shell. You can route to built-in views like the launcher, whiteboard, or browser programmatically.

Switching views

The setView() method navigates the shell to a specific built-in view:

const shell = window.ApogeeShell ?? window.parent?.ApogeeShell;
if (shell?.setView) {
  shell.setView(viewId);
}

Available views

View ID	Description
`'launcher'`	The main app launcher / home screen
`'browse-web'`	The embedded web browser
`'settings'`	Application settings
`'whiteboard'`	The collaborative whiteboard
`'collab-editor'`	The collaborative document editor (legacy alias)
`'docs'`	The collaborative document editor
`'tasks'`	The task manager
`'slides'`	The slide deck builder
`'pixel'`	The pixel grid editor
`'files'`	File management
`'messages'`	Direct messages and space chat
`'contacts'`	Contact management
`'profile'`	User profile
`'apps-page'`	The apps directory

API reference

`ApogeeShell.setView(viewId)`

Navigate to a built-in shell view.

Parameter	Type	Description
`viewId`	`string`	The ID of the view to navigate to

Returns: void

Usage in components

React
Vue

import { setView } from './webai';

function NavigateToWhiteboard() {
  return (
    <button onClick={() => setView('whiteboard')}>Open Whiteboard</button>
  );
}

<template>
  <button @click="setView('whiteboard')">Open Whiteboard</button>
</template>

<script setup>
import { setView } from './webai';
</script>

Getting Started

Platform APIs

Building & Deploying

Switching views

Available views

API reference

`ApogeeShell.setView(viewId)`

Usage in components

Next steps

Collaboration API

Identity API

Getting Started

Platform APIs

Building & Deploying

​Switching views

​Available views

​API reference

​ApogeeShell.setView(viewId)

​Usage in components

​Next steps

Collaboration API

Identity API

Switching views

Available views

API reference

`ApogeeShell.setView(viewId)`

Usage in components

Next steps