4aba3dc5b4 improvement(landing): homepage redesign with live hero and real platform UI feature cards (#5408)
* improvement(landing): homepage redesign with live hero and real platform UI feature cards

* improvement(landing): build-card workflow showcase, real Logs UI monitor window, proportional feature cards

- Build card: replace the Mothership chat loop with a static left-to-right
  support-triage workflow showcase (two triggers converging on a triage agent,
  fanning out to Linear/Slack/Gmail/Tables) on the hero's solid --surface-3
  stage, with the goo cycle loader phasing in the bottom-left corner; the chat
  animation component stays parked in build-callout/components for reuse
- Monitor card: swap the floating logs panel for the REAL platform Logs page
  captured as a full window (new capture-logs-ui pipeline), framed and
  positioned identically to the Context card, over a new canyon backdrop
- Feature cards scale like Cursor's: media stages are aspect-locked
  (3:2 desktop, 4:3 stacked) instead of fixed-height, and the UI-window
  callouts use percentage insets so the whole composition scales
  proportionally with the browser
- Eyebrow chips relocate into the copy column above the title on stacked
  breakpoints instead of overlapping the full-width media
- Extract the hero stage's block card for reuse; export the horizontal
  smoothstep edge helper; drop the unused formation-graph and
  logs-table-preview components

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(landing): use surface-hover token for voice input button

Matches the token already used by its sibling composer buttons instead of a raw hex hover color.

* fix(landing): restore SandboxWorkspacePermissionsProvider for the capture harness

Staging removed the sandbox provider as unused when the academy pages were
deleted (#5388), but the landing-preview capture route committed on this
branch imports it - the branch failed to compile after rebasing. Restore the
lightweight provider with its consumer documented.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* fix(landing): satisfy HydrationState type in capture harness

The mock hydration state set by the readme-tour-capture route was missing
the required requestId/error fields added to HydrationState, breaking the
production typecheck.

* fix(landing): address Greptile/Cursor review findings

- hero.tsx: object-top-left isn't a real Tailwind v3 utility, so the crop
  fell back to center; use object-left-top.
- hero-workflow-stage.tsx: byId/builtIds were rebuilt on every render,
  including every drag pointermove frame; hoist the STAGE_BLOCKS lookup to
  module scope and memoize builtIds on builtCount.
- hero-platform-loop.tsx: prefers-reduced-motion was only read once on
  mount, so toggling it mid-loop didn't stop the scheduled animation;
  listen for the media query's change event like BuildChatAnimation does.
- landing-preview/page.tsx and readme-tour-capture/[workspaceId]/page.tsx:
  both are dev/preview-only scaffolds (one explicitly "local-only... delete
  before committing") that were reachable in production with no auth guard.
  404 them outside of production instead of leaving them open.

* fix(landing): reset fading when reduced motion cuts the loop short

showFinished (added when wiring up the prefers-reduced-motion change
listener) set the finished phase but left fading true if the preference
flipped mid reset-fade, leaving HeroChatLoop stuck at opacity-0.

* fix(landing): sync reduced-motion mid-reply in HeroChatLoop

The word-reveal effect only checked prefers-reduced-motion once per
showReply transition. If HeroPlatformLoop's showFinished set phase to
'reply' while it was already 'reply' (no re-render, no dependency change),
the running stream interval kept ticking at normal speed instead of
snapping to the full reply. Listen for the media query's change event,
mirroring the fix already applied to HeroPlatformLoop and BuildChatAnimation.

* fix(landing): sync reduced-motion mid-entrance in HeroStat

HeroStat's staggered count-up entrance only checked prefers-reduced-motion
once on mount, unlike the hero loops in this PR that now listen for the
media query's change event. Toggling the preference mid-entrance left the
scheduled timers/RAF running instead of snapping to the settled value.

* fix(landing): stop double-seeding query cache in capture harness

seed(queryClient) ran inside a useState lazy initializer, a render-phase
side effect that Strict Mode invokes twice. Replace it with a ref guard so
the store mutation runs exactly once, still synchronously before first
paint. Flagged across three Greptile review rounds.

* fix(landing): type the capture harness log filter seed as LogFilters

qc.setQueryData(logKeys.list(...)) requires LogFilters, but the inline
seed object had no annotation and timeRange inferred as string, which
TypeScript widened past the TimeRange literal union. Failed prod build
type-check. Also swap the stray `sandbox` prop back to `embedded` to
match Workflow's actual prop name.

---------

Co-authored-by: andresdjasso <andresdjasso@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Co-authored-by: waleed <walif6@gmail.com>
2026-07-07 18:02:45 -07:00

Sim.ai Documentation Discord X

Ask DeepWiki Set Up with Cursor

Sim — Integrate, Context, Build, and Monitor AI agents

A workspace to build, deploy and manage AI agents and workflows.

Quickstart

Cloud-hosted: sim.ai

Open sim.ai

Self-hosted

npx simstudio

Open http://localhost:3000

Docker must be installed and running. Use -p, --port <port> to run Sim on a different port, or --no-pull to skip pulling the latest Docker images.

The Sim platform — chat on the left, the visual workflow builder on the right

Capabilities

  • Connect 1,000+ integrations and every major LLM
  • Add Slack, Notion, HubSpot, Salesforce, databases, and more
  • Build agents visually, conversationally, or with code
  • Ingest files, knowledge bases, and structured table data
  • Monitor runs, logs, schedules, and workflow activity

One workspace, every surface

Chat and workflows are just the start — tables, files, knowledge, and scheduled tasks all live in the same workspace.

Tables in Sim — structured data your agents can query

Tables — a database, built in

Files in Sim — documents for your team and every agent

Files — one store for your team and every agent

Knowledge bases in Sim — synced docs your agents can search

Knowledge — your agents' memory

Scheduled tasks in Sim — recurring agent runs on a calendar

Scheduled tasks — runs on your schedule

Self-hosting

Docker Compose

git clone https://github.com/simstudioai/sim.git && cd sim
docker compose -f docker-compose.prod.yml up -d

Open http://localhost:3000

Sim also supports local models via Ollama and vLLM. See the Docker self-hosting docs for setup details.

Manual Setup

Requirements: Bun, Node.js v20+, PostgreSQL 12+ with pgvector

  1. Clone and install:
git clone https://github.com/simstudioai/sim.git
cd sim
bun install
bun run prepare  # Set up pre-commit hooks
  1. Set up PostgreSQL with pgvector:
docker run --name simstudio-db -e POSTGRES_PASSWORD=your_password -e POSTGRES_DB=simstudio -p 5432:5432 -d pgvector/pgvector:pg17

Or install manually via the pgvector guide.

  1. Configure environment:
cp apps/sim/.env.example apps/sim/.env
# Create your secrets
perl -i -pe "s/your_encryption_key/$(openssl rand -hex 32)/" apps/sim/.env
perl -i -pe "s/your_internal_api_secret/$(openssl rand -hex 32)/" apps/sim/.env
perl -i -pe "s/your_api_encryption_key/$(openssl rand -hex 32)/" apps/sim/.env
# DB configs for migration
cp packages/db/.env.example packages/db/.env
# Edit both .env files to set DATABASE_URL="postgresql://postgres:your_password@localhost:5432/simstudio"
  1. Run migrations:
cd packages/db && bun run db:migrate
  1. Start development servers:
bun run dev:full  # Starts Next.js app and realtime socket server

Or run separately: bun run dev (Next.js) and cd apps/sim && bun run dev:sockets (realtime).

Chat API Keys

Chat is a Sim-managed service. To use Chat on a self-hosted instance:

  • Go to https://sim.ai → Settings → Chat keys and generate a Chat API key
  • Set COPILOT_API_KEY environment variable in your self-hosted apps/sim/.env file to that value

Environment Variables

See the environment variables reference for the full list, or apps/sim/.env.example for defaults.

Tech Stack

Next.js · Bun · PostgreSQL · Drizzle · Better Auth · Tailwind — and the rest of the stack

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Built by the Sim team in San Francisco

Languages
TypeScript 77%
MDX 20.8%
JavaScript 1.9%
CSS 0.1%