# Frontend

Where your app's interface comes from. Build your own UI and point Foundation at it, or use
Foundation's built-in components — either way, it connects to your backend automatically.

## Configure

### Choose your UI source

| Source | What it is |
|---|---|
| **Foundation-hosted** | Use the built-in UI components (login, registration, settings, plans) — nothing to host. |
| **External URL** | Point to a frontend you host yourself. |
| **GitHub repo** | Connect a repo (public or **private**) and Foundation builds and serves it. |

> This section just sets where your UI lives. Everything else about your app — data, auth, billing —
> is set in the other sections.

## Use in your app

However you host it, your frontend talks to the backend through the Foundation SDK and connector:
bootstrapping, login and registration, websockets, your entities, and your integrations — all wired up.
Bring your own framework, or drop in the built-in web components.

**Tell your agent:** "Set up the Foundation SDK in my app and gate the dashboard behind login."

```ts
import { createFoundation } from 'foundation-sdk'
import { cognitoAuth } from 'foundation-sdk/cognito'

// initialize once, then share it through your app's context/state
const foundation = await createFoundation({ auth: cognitoAuth })
```

Prefer not to build the UI yourself? Use the built-in components — e.g. `<foundation-connect>` for
service connections.

## Reference

- [SDK reference](/api/sdk) — init, auth, data, components
- [Authentication](/platform/auth) · [Deployments](/platform/deployment)