> ## Documentation Index
> Fetch the complete documentation index at: https://artifacts.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Web app

> The human-facing surface: dashboards, viewing, history, access, teams, and billing.

The web app is where people work with Artifacts. It handles marketing pages, login, dashboards, artifact viewing, version history, access settings, team workflows, and billing.

<Info>
  Looking for a full route and endpoint list? See the [REST API reference](/reference/rest-api).
</Info>

## Main routes

| Route                                                 | Purpose                     |
| ----------------------------------------------------- | --------------------------- |
| `/`                                                   | Marketing landing page      |
| `/login`                                              | Google sign-in and sign-up  |
| `/dashboard`                                          | Dashboard entry             |
| `/dashboard/:workspaceSlug`                           | Workspace dashboard         |
| `/dashboard/:workspaceSlug/p/:projectSlug`            | Project dashboard           |
| `/:workspaceSlug/:projectSlug`                        | Public project path         |
| `/:workspaceSlug/:projectSlug/:artifactSlug`          | Artifact render route       |
| `/:workspaceSlug/:projectSlug/:artifactSlug/history`  | Version history             |
| `/:workspaceSlug/:projectSlug/:artifactSlug/settings` | Artifact settings           |
| `/settings/billing`                                   | Billing and plan management |
| `/teams/new`                                          | Create a team workspace     |
| `/workspaces/new`                                     | Create a workspace          |
| `/share/:token`                                       | Resolve a share link        |

The bare artifact render route is immersive: it hides the shared app header so the artifact can take over the page.

## Authentication

The web app uses Better Auth with Google OAuth. Browser-visible auth URLs should match:

```bash theme={"theme":"github-dark"}
BETTER_AUTH_URL="https://your-app.example.com"
PUBLIC_APP_URL="https://your-app.example.com"
```

The API can run on a separate internal origin. The Next.js app rewrites API and MCP requests to it:

```text theme={"theme":"github-dark"}
/.well-known/oauth-protected-resource  ->  API
/.well-known/oauth-authorization-server -> API
/api/:path*                            ->  API
/mcp                                   ->  API
```

## How artifacts render

The web app resolves and renders artifacts through:

```text theme={"theme":"github-dark"}
GET /api/by-path/:username/:projectSlug/:slug
GET /api/artifacts/:artifactId/content
GET /api/artifacts/:artifactId/thumbnail
```

Rendering follows the artifact type: `html` as sandboxed HTML, `md` as sanitized Markdown, and `jsx` through the Preact-compatible runtime.

## What you can do in the dashboard

* List the workspaces available to you.
* List projects inside a workspace.
* Create projects and artifacts.
* Inspect artifact metadata.
* View and restore version history.
* Manage access settings.
* Create and revoke share links.
* Review audit events.

## Teams

Team workspaces add membership and invitations:

* Create team workspaces on the Team plan.
* Invite users by email.
* Grant roles: `admin`, `member`, `viewer`, `billing_admin`.
* Track seat usage against plan entitlements.

## Billing

Billing runs on Dodo Payments. The web app calls:

```text theme={"theme":"github-dark"}
GET  /api/billing/plans
GET  /api/billing/me
POST /api/billing/checkout
POST /api/billing/portal
```

The settings UI surfaces plan entitlements, current usage, checkout, and portal actions.

## Observability

When Better Stack tokens are configured, the web app reports Web Vitals, client error-boundary events, OAuth login errors, and failed internal API fetches from server components. It forwards `x-request-id` to the API so requests can be correlated end to end.