Skip to content

Redesign documentation homepage for product discoverability #627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Devon-White wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Redesign documentation homepage for product discoverability #627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43d2ca3
feat(docs): redesign documentation homepage
Devon-White Aug 24, 2026
c959eba
feat(docs): enhance AI capabilities section and add AI Sidecar reference
Devon-White Aug 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,7 @@ dist

# Internal process artifacts (superpowers / brainstorming specs)
docs/superpowers/
.superpowers/
.superpowers/

# Superdesign working files
.superdesign/
1 change: 1 addition & 0 deletions fern/brand-tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@

/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-xl: 12px;
}

Expand Down
319 changes: 234 additions & 85 deletions fern/products/home/pages/welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,108 +9,257 @@ layout: custom

<Markdown src="/snippets/llms-hint.mdx" />

<div class="lp-page-container">
<div class="main-content">
{/* Dashed Pattern */}
<div class="dashed-pattern dashed-pattern-left"></div>
<div class="dashed-pattern dashed-pattern-right"></div>

{/* Hero Section */}
<div class="hero-section">
<div class="hero-content">
<h1 class="fern-page-heading text-balance break-words">Build on SignalWire</h1>
<div class="fern-page-subtitle break-words leading-7">
Voice, video, messaging, and AI — one programmable platform, every interface you need.
<llms-ignore>

<div class="lp-page-container lp-command-center">
<div class="lp-command-shell">
{/* Hero: a docs orientation surface, not a second marketing navbar. */}
<section class="lp-hero" aria-labelledby="homepage-title">
<div class="lp-hero-content">
<p class="lp-eyebrow">SignalWire developer platform</p>
<h1 class="lp-hero-title" id="homepage-title">One programmable platform for every communication.</h1>
<p class="lp-hero-copy">
Build voice, messaging, video, and AI applications from your backend, the browser, or the phone network.
</p>
<div class="lp-hero-actions">
<a class="lp-btn lp-btn--primary" href="/docs/platform/getting-started">Get started <Icon icon="regular arrow-right" size="3" /></a>
<a class="lp-btn lp-btn--secondary" href="#product-directory">Explore the platform <Icon icon="regular arrow-down" size="3" /></a>
</div>
</div>
</div>

{/* Getting Started Banner */}
<div class="hp-callout">
<Icon icon="circle-info" size="4" />
<span class="hp-callout-desc"><strong>New to SignalWire?</strong> Set up your account, grab API credentials, and start building.</span>
<Button intent="primary" href="/docs/platform/getting-started" rightIcon="arrow-right">Get started</Button>
</div>

{/* What are you building? */}
<div class="products-section">
<div class="section-header">
<h2>What are you building?</h2>
</section>

{/* Native Fern tabs keep the examples interactive and accessible. */}
<section class="lp-workbench-section" aria-label="Product examples and common starting points">
<div class="lp-workbench">
<div class="lp-workbench-status" aria-label="Product examples ready">
<span class="lp-status-dot" aria-hidden="true"></span>
<span class="lp-status-name">PRODUCT_EXAMPLES</span>
<span>ready</span>
</div>
<div class="lp-product-tabs">

<Tabs>
<Tab title="Server SDK">

```python
from signalwire import AgentBase

agent = AgentBase(name="quickstart-agent")
agent.set_prompt_text("You are a concise and helpful assistant.")
agent.run()
```

</Tab>
<Tab title="REST API">

```bash
curl --request POST \
--url "https://${SIGNALWIRE_SPACE}.signalwire.com/api/messaging/messages" \
--user "$SIGNALWIRE_PROJECT_ID:$SIGNALWIRE_API_TOKEN" \
--header "Content-Type: application/json" \
--data '{
"from": "+15559876543",
"to": "+15551234567",
"body": "Hello from SignalWire!"
}'
```

</Tab>
<Tab title="SWML">

```yaml
version: 1.0.0
sections:
main:
- answer: {}
- play:
url: "say:Hello World!"
- hangup: {}
```

</Tab>
<Tab title="Browser SDK">

```typescript
import { embeddableCall } from "@signalwire/js";

const call = await embeddableCall({
to: "/public/conference",
embedToken: "YOUR_EMBED_TOKEN",
host: "your-space.signalwire.com",
});
```

</Tab>
</Tabs>

</div>
<div class="lp-fast-starts">
<a class="lp-fast-start" href="/docs/platform/ai/quickstart">
<span class="lp-fast-code lp-fast-code--ai">01 / AI</span>
<span>Build an AI agent</span>
<Icon icon="regular arrow-up-right" size="3" />
</a>
<a class="lp-fast-start" href="/docs/platform/getting-started">
<span class="lp-fast-code lp-fast-code--calling">02 / CALL</span>
<span>Place a call</span>
<Icon icon="regular arrow-up-right" size="3" />
</a>
<a class="lp-fast-start" href="/docs/apis/rest/messages/create-message">
<span class="lp-fast-code lp-fast-code--messaging">03 / MSG</span>
<span>Send a message</span>
<Icon icon="regular arrow-up-right" size="3" />
</a>
<a class="lp-fast-start" href="/docs/browser-sdk/v4/guides/overview">
<span class="lp-fast-code lp-fast-code--browser">04 / WEB</span>
<span>Configure Browser SDK</span>
<Icon icon="regular arrow-up-right" size="3" />
</a>
</div>
</div>
</section>

<CardGroup cols={4}>
<Card title="AI voice agent" icon="fa-regular fa-robot" href="/docs/platform/getting-started#ai-application">
LLM-powered phone agents and virtual assistants
</Card>
<Card title="Browser or mobile" icon="fa-regular fa-browser" href="/docs/platform/getting-started#browser-or-mobile-app">
WebRTC voice, video, and chat in your app
</Card>
<Card title="Server application" icon="fa-regular fa-server" href="/docs/platform/getting-started#server-application">
Backend call routing, SMS, and IVR systems
</Card>
<Card title="No-code" icon="fa-regular fa-diagram-project" href="/docs/platform/getting-started#no-code--low-code">
Drag-and-drop call flows and Dashboard AI agents
</Card>
</CardGroup>
</div>

{/* Interfaces & SDKs */}
<div class="products-section">
<div class="section-header">
<h2>Interfaces & SDKs</h2>
<p class="fern-page-subtitle">
APIs, markup languages, and client libraries for building on SignalWire.
</p>
{/*
Feature destinations are provisional until canonical platform guide hubs
exist. Keep this directory structure independent from the eventual route
taxonomy so links can move from references to guides without a redesign.
*/}
<section class="lp-section" id="product-directory" aria-labelledby="product-directory-heading">
<header class="lp-section-header">
<span class="lp-section-index">01 / Product directory</span>
<h2 id="product-directory-heading">Explore by product</h2>
<p>Go directly to the communication capability or implementation guide you need.</p>
</header>

<div class="lp-capability-grid">
<article class="lp-capability" aria-labelledby="capability-ai">
<h3 id="capability-ai"><a href="/docs/platform/ai">AI</a></h3>
<p>Conversational agents that answer calls and act on your systems.</p>
<ul class="lp-directory-links">
<li><a href="/docs/platform/ai/quickstart"><span>Build your first agent</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/apis/rest/ai-chat/chat-methods"><span>AI Chat</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/swml/reference/calling/ai-sidecar"><span>AI Sidecar</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/swml/reference/calling/live-translate"><span>Live translation</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/swml/reference/calling/live-transcribe"><span>Live transcription</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
</ul>
<a class="lp-directory-all" href="/docs/platform/ai">All AI docs <Icon icon="regular arrow-right" size="3" /></a>
</article>

<article class="lp-capability" aria-labelledby="capability-calling">
<h3 id="capability-calling"><a href="/docs/platform/calling">Calling</a></h3>
<p>Voice, video, and fax across the phone network, SIP, and browser.</p>
<ul class="lp-directory-links">
<li><a href="/docs/platform/voice"><span>Voice</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/video"><span>Video</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/fax"><span>Fax</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/voice/sip"><span>SIP trunking</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/phone-numbers"><span>Phone numbers</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
</ul>
<a class="lp-directory-all" href="/docs/platform/calling">All Calling docs <Icon icon="regular arrow-right" size="3" /></a>
</article>

<article class="lp-capability" aria-labelledby="capability-messaging">
<h3 id="capability-messaging"><a href="/docs/platform/messaging">Messaging</a></h3>
<p>SMS, MMS, WhatsApp, and in-app chat for production traffic.</p>
<ul class="lp-directory-links">
<li><a href="/docs/apis/rest/messages/create-message"><span>Send a message</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/messaging/whatsapp"><span>WhatsApp</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/chat"><span>Chat</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/messaging/campaign-registry/registration"><span>Campaign registration</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
<li><a href="/docs/platform/messaging/sms-best-practices"><span>Delivery best practices</span><Icon icon="regular arrow-up-right" size="3" /></a></li>
</ul>
<a class="lp-directory-all" href="/docs/platform/messaging">All Messaging docs <Icon icon="regular arrow-right" size="3" /></a>
</article>
</div>
</section>

<section class="lp-section" aria-labelledby="interfaces-heading">
<header class="lp-section-header">
<span class="lp-section-index">02 / Interfaces</span>
<h2 id="interfaces-heading">Choose how you build</h2>
<p>Start with a primary implementation interface, then use the supporting tools as needed.</p>
</header>

<CardGroup cols={3}>
<Card title="REST APIs" icon="fa-regular fa-rectangle-api" href="/docs/apis">
Complete API reference for voice, video, messaging, and AI services.
<div class="lp-group-label"><span>Primary interfaces</span><span aria-hidden="true"></span></div>
<CardGroup cols={4}>
<Card title="Server SDKs" icon="regular code" href="/docs/server-sdks">
Build agents and control calls from your backend.
</Card>
<Card title="SWML" icon="/assets/icons/swml.svg" href="/docs/swml">
Markup language that unifies LLMs, TTS, and STT with PSTN, SIP, and WebRTC.
<Card title="REST APIs" icon="regular rectangle-api" href="/docs/apis">
Provision resources and control calls over HTTP.
</Card>
<Card title="Server SDKs" icon="fa-regular fa-code" href="/docs/server-sdks">
Build AI agents, control calls, send messages, and more.
<Card title="SWML" icon="regular terminal" href="/docs/swml">
Describe communication flows in JSON or YAML.
</Card>
<Card title="Browser SDK" icon="fa-regular fa-browser" href="/docs/browser-sdk">
Add video calling, audio calling, and chat directly to your website.
<Card title="Browser SDK" icon="regular browser" href="/docs/browser-sdk/v4/guides/overview">
WebRTC voice, video, and chat in the browser.
</Card>
</CardGroup>
</div>

{/* Tools */}
<div class="products-section">
<div class="section-header">
<h2>Tools</h2>
<p class="fern-page-subtitle">
No-code builders and utilities to accelerate development.
</p>
</div>

<CardGroup cols={3}>
<Card title="Call Flow Builder" icon="fa-regular fa-diagram-project" href="/docs/call-flow-builder">
Build drag-and-drop calling applications without writing code.
<div class="lp-group-label lp-group-label--tools"><span>Tools</span><span aria-hidden="true"></span></div>
<CardGroup cols={4}>
<Card title="Call Flow Builder" icon="regular diagram-project" href="/docs/call-flow-builder">
Drag-and-drop calling applications.
</Card>
<Card title="Platform & Dashboard" icon="fa-regular fa-planet-ringed" href="/docs/platform">
Manage your SignalWire space, phone numbers, and resources.
<Card title="Dashboard" icon="regular planet-ringed" href="/docs/platform/getting-started">
Manage your Space and resources.
</Card>
<Card title="Wirestarter" icon="fa-regular fa-gear-code" href="/docs/platform/wirestarter">
Scaffold a new SignalWire project in seconds.
<Card title="WireStarter" icon="regular gear-code" href="/docs/platform/wirestarter">
Scaffold a new project in seconds.
</Card>
<Card title="SWSH" icon="fa-regular fa-terminal" href="/docs/platform/swsh">
Interactive shell for testing SWML scripts and API calls.
<Card title="SWSH" icon="regular server" href="/docs/platform/swsh">
Interactive shell for SWML and API calls.
</Card>
</CardGroup>
</div>

{/* Twilio Migration */}
<div class="hp-callout">
<Icon icon="arrow-right-to-bracket" size="4" />
<span class="hp-callout-desc"><strong>Migrating from Twilio*?</strong> Drop-in compatible APIs and SDKs — switch with a few lines of code.</span>
<Button intent="primary" href="/docs/compatibility-api" rightIcon="arrow-right">Compatibility API</Button>
</div>
<p style={{fontSize: '0.65rem', color: 'var(--grayscale-a9)', fontStyle: 'italic', margin: '-1rem 0 0 2rem'}}>*Twilio and TwiML are trademarks of Twilio, Inc. SignalWire, Inc. and its products are not affiliated with or endorsed by Twilio, Inc.</p>
</section>

<section class="lp-migration-section" aria-label="Compatibility API migration">
<div class="lp-migration">
<span class="lp-migration-icon" aria-hidden="true"><Icon icon="regular arrow-right-to-bracket" size="4" /></span>
<p><strong>Migrating from Twilio*?</strong> Use drop-in compatible APIs and SDKs to switch with a few lines of code.</p>
<a class="lp-btn lp-btn--outline" href="/docs/compatibility-api">Compatibility API <Icon icon="regular arrow-right" size="3" /></a>
</div>
<p class="lp-footnote">*Twilio and TwiML are trademarks of Twilio, Inc. SignalWire, Inc. and its products are not affiliated with or endorsed by Twilio, Inc.</p>
</section>
</div>
</div>

</llms-ignore>

<llms-only>

SignalWire is a programmable communications platform for building voice, messaging, video, and AI applications.

## Start here

- [Platform getting started](/docs/platform/getting-started) — Set up a SignalWire Space, get API credentials, and choose an implementation path.
- [Build your first AI agent](/docs/platform/ai/quickstart) — Create and run a conversational voice agent with the SignalWire Server SDK.
- [Complete documentation index](/docs/llms.txt) — Browse the machine-readable index of all SignalWire documentation sections.

## Products and capabilities

- [AI](/docs/platform/ai) — Build conversational voice and text agents that can call tools and act on external systems.
- [Calling](/docs/platform/calling) — Find the primary documentation for programmable calling across PSTN, SIP, and WebRTC.
- [Messaging](/docs/platform/messaging) — Send and receive SMS and MMS messages and manage production messaging traffic.
- [Voice](/docs/platform/voice) — Build and control voice calls, call flows, recordings, and related telephony features.
- [Video](/docs/platform/video) — Add programmable video rooms, conferences, and video communications to applications.
- [Fax](/docs/platform/fax) — Send, receive, and manage faxes through SignalWire.
- [Phone numbers](/docs/platform/phone-numbers) — Search, purchase, configure, and manage SignalWire phone numbers.
- [WhatsApp](/docs/platform/messaging/whatsapp) — Configure and send WhatsApp messages through SignalWire.
- [Chat](/docs/platform/chat) — Add real-time in-app chat and messaging to client applications.

## Developer interfaces

- [Server SDKs](/docs/server-sdks) — Build agents and control communications from backend applications using supported language SDKs.
- [REST APIs](/docs/apis) — Provision resources and control SignalWire services through HTTP endpoints.
- [SWML](/docs/swml) — Describe and execute communication workflows using SignalWire Markup Language in JSON or YAML.
- [Browser SDK](/docs/browser-sdk/v4/guides/overview) — Add WebRTC voice, video, and chat capabilities to browser applications.

## Tools and migration

- [Call Flow Builder](/docs/call-flow-builder) — Create calling applications with a visual drag-and-drop workflow editor.
- [WireStarter](/docs/platform/wirestarter) — Scaffold a new SignalWire application from a ready-to-use project template.
- [SWSH](/docs/platform/swsh) — Use an interactive shell to develop and test SWML scripts and API requests.
- [Compatibility API](/docs/compatibility-api) — Migrate Twilio-compatible applications to SignalWire with minimal code changes.

</llms-only>
31 changes: 31 additions & 0 deletions fern/products/platform/pages/ai/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,37 @@ flowchart LR

</llms-only>

## AI capabilities

Explore the ways you can add AI to text conversations and live calls. Each capability links to its
canonical API, SDK, or SWML reference.

<CardGroup cols={2}>

<Card title="AI Chat" icon="regular comments" href="/docs/apis/rest/ai-chat/chat-methods">
Hold text conversations with the same SignalWire AI agent that handles voice calls. Use the REST
API directly, [`AIChatClient`](/docs/server-sdks/reference/python/agents/ai-chat-client) from a
trusted server, or [`ChatGateway`](/docs/server-sdks/reference/python/agents/chat-gateway) from a
browser-facing application.
</Card>

<Card title="AI Sidecar" icon="regular headset" href="/docs/swml/reference/calling/ai-sidecar">
Attach a real-time AI observer that listens to a live call and streams coaching, compliance
alerts, or other agent-facing insights without speaking on the call.
</Card>

<Card title="Live translation" icon="regular globe" href="/docs/swml/reference/calling/live-translate">
Translate both sides of a voice conversation in real time, inject translated speech, and request
summaries during or after the session.
</Card>

<Card title="Live transcription" icon="regular waveform-lines" href="/docs/swml/reference/calling/live-transcribe">
Stream real-time transcripts to your application and request an AI-generated summary while the
session is active or when it ends.
</Card>

</CardGroup>

## How system-directed AI works

A conversation moves between the model and your systems as the situation requires:
Expand Down
Loading