Revenue UI

Preview React components, pre-wired

Drop in a contact card or a sequence builder, add your sandbox key, and point it at your approved workspace when access is granted.
<ContactCard /> <Pipeline /> <AgentChat />

1,819

Mapped features

6

Product surfaces

3

Ways to build each

1

Backend

Install lines below are illustrative package names. See the docs for the canonical published list.

Component gallery

Real Revenue UI, rendered as static preview examples. Each component is designed for the graph8 SDK and sandbox-first development.

graph8/contact-card
PN

Priya Nair

VP Marketing

Cartsy

Champion
Phone +1 (415) 555 0142
Location San Francisco, CA

contact-card

A person record with role, reachability, and quick actions.

$ npm install @graph8/contact-card
graph8/pipeline-kanban

Pipeline

$212k open

Qualified 2
Demo 1
Proposal 1

pipeline-kanban

Live deal stages, drag a card across to move the deal.

$ npm install @graph8/pipeline-kanban
graph8/reply-composer

New message

Draft
Subject Quick idea for Cartsy pipeline

reply-composer

Compose with snippets, variables, and an AI draft button.

$ npm install @graph8/reply-composer
graph8/sequence-builder

Outbound sequence

3 steps active

1
Day 1 Email

Intro: pipeline routing

2
Day 3 LinkedIn

Connect + comment

3
Day 6 Call

Live call attempt

sequence-builder

Multistep, multichannel cadence with per-step status.

$ npm install @graph8/sequence-builder
graph8/agent-chat
Pipeline agent Online
Find accounts hiring SDRs this week.
Found 14 in-market accounts. Top match is Cartsy.
ran search.hiring_signals

agent-chat

Streaming chat wired to the agent runtime, with tool calls.

$ npm install @graph8/agent-chat
graph8/step-analytics

Pipeline created

$2.4M

hover a bar

Reply rate

24%

Meetings

38

step-analytics

A headline metric with a gradient trend and supporting tiles.

$ npm install @graph8/step-analytics
graph8/scheduler

This week

2 booked

Mon

12

Tue

13

Wed

14

Thu

15

Fri

16

Demo: Apex Robotics

Marcus Lee

10:00

Discovery: Northwind

Dana Whitfield

14:30
Open

scheduler

A week strip with booked slots against live availability.

$ npm install @graph8/scheduler
graph8/command-palette
esc

Actions

command-palette

Keyboard-first action search across every surface.

$ npm install @graph8/command-palette

The gallery is a sample. The full surface map below spans 76 components across six surfaces.

Data

287 features

Render companies, contacts, lists, and pipelines straight from the graph.

Companies

graph8 / companies

Companies

1,284 accounts

AccountIndustrySize
NW Northwind
Logistics 1,200
AR Apex Robotics
Manufacturing 640
CT Cartsy
Ecommerce 210
LH Loop Health
Healthcare 880
BV Brightvale
Fintech 430

Company Table

Sortable, filterable grid of company records with firmographics.

$ npm install @graph8/company-table

Company Profile

Full account view with tech stack, headcount, and signals.

$ npm install @graph8/company-profile

Contacts

graph8 / contacts
PN

Priya Nair

VP Marketing

Cartsy

Champion
Phone +1 (415) 555 0142
Location San Francisco, CA

Contact Table

High-density grid across millions of enriched contacts.

$ npm install @graph8/contact-table

Contact Profile

A person record with role, history, and quick actions.

$ npm install @graph8/contact-profile

Contact Card

Compact contact tile with enrichment and reachability.

$ npm install @graph8/contact-card

Enrichment Status

Live waterfall of which providers filled which fields.

$ npm install @graph8/enrichment-status

Data Pipelines

graph8 / data-pipelines

Enrichment pipeline

running

Source

CRM import

4,210 rows

Transform

Enrich + dedupe

12 fields

Destination

Warm list

Destination

Webhook

4,198 enriched 12 skipped

Data Pipeline Canvas

Wire capture events to destinations on a visual canvas.

$ npm install @graph8/data-pipeline-canvas

Destination Picker

Choose and configure where synced data lands.

$ npm install @graph8/destination-picker

Lists

graph8 / lists

Lists

4 saved

Enterprise ICP

842 members

dynamic

Q3 demo no-shows

126 members

shared

Hiring signal accounts

318 members

dynamic

Closed lost 2024

204 members

shared

List Manager

Create, share, and sync curated lists of accounts and people.

$ npm install @graph8/list-manager

Search

graph8 / search

Search Bar

Typeahead across companies, contacts, and saved queries.

$ npm install @graph8/search-bar

Filter Builder

Composable facet filters for any prospecting query.

$ npm install @graph8/filter-builder

Results Grid

Paginated, selectable results with bulk actions.

$ npm install @graph8/results-grid

Suppressions

graph8 / suppressions

Suppressions

2,140 records

TargetReasonChannelAdded
competitor.io Domain block All Jun 12
[email protected] Unsubscribed Email Jun 18
[email protected] Bounced Email Jun 21
loophealth.com Do not contact All Jun 24

Suppression Manager

See who is suppressed, why, and from which channel.

$ npm install @graph8/suppression-manager

Workbench

graph8 / workbench

Workbench

1 enriching

CompanyTitleEmailStatus
Northwind VP Sales [email protected]
Apex Robotics Head of RevOps [email protected]
Cartsy VP Marketing enriching...
Loop Health Director SDR [email protected]
Brightvale CRO [email protected]

Staging Workbench

Scrape, enrich, and process prospect data before it lands.

$ npm install @graph8/staging-workbench

Signals

70 features

Capture intent, visitors, hiring, and competitive moves as they happen.

Forms

graph8 / forms

Submit request

Scored on submit

Work email

[email protected]

Company

Northwind

Role

VP Revenue

3 of 3 fields complete

Submit

Form Builder

Drag-and-drop builder for embedded lead capture forms.

$ npm install @graph8/form-builder

Form Embed

Drop-in embeddable form wired to your data pipeline.

$ npm install @graph8/form-embed

Hiring

graph8 / hiring
AR

Apex Robotics

3 roles open

Hiring trigger
SDR Manager Sales
RevOps Lead Operations
Account Executive Sales

Matched to offer: Outbound build for new SDR teams

Hiring Signal Card

Surface accounts hiring for roles that map to your offer.

$ npm install @graph8/hiring-signal-card

Intent

graph8 / intent

In-market accounts

This week

NO
Northwind 94
AP
Apex Robotics 81
LO
Loop Health 73
CA
Cartsy 66

12 accounts above threshold

Intent Feed

Live feed of in-market accounts ranked by intent.

$ npm install @graph8/intent-feed

Keyword Tracker

Track surging keywords and topics across the market.

$ npm install @graph8/keyword-tracker

Radar

graph8 / radar

Signal radar

8 new today

Funding raised 2h ago

Northwind

Series B, $40M

Tech adopted 2h ago

Cartsy

Added Snowflake

In the news 2h ago

Loop Health

Named to Fast 50

Competitor Radar

Competitive intelligence and market monitoring board.

$ npm install @graph8/competitor-radar

Social

graph8 / social

Mentions

Live

DA

@dana_rev

Finally found a tool that scores leads the second they hit the form.

142 18
MA

@marcuslee

Outbound routing was our bottleneck. Fixed it this week.

64 9
PR

@priya_n

Hiring signals are underrated for timing the first touch.

51 6

Mention Feed

X mentions and engagement, triaged by relevance.

$ npm install @graph8/mention-feed

Visitors

graph8 / visitors

Live visitors

4 on site
CompanyPagesTime
Northwind
7 4m 12s
Apex Robotics
4 2m 38s
Loop Health
3 1m 51s
Cartsy
2 0m 47s

Identified by company

Updated just now

Visitor Stream

Real-time stream of identified website visitors.

$ npm install @graph8/visitor-stream

Company Reveal

Resolve anonymous traffic to the company behind it.

$ npm install @graph8/company-reveal

Visit Timeline

Page-by-page session history for any visiting account.

$ npm install @graph8/visit-timeline

Studio

212 features

Author campaigns, content, brand, and your thought-leadership team.

Campaign

graph8 / campaign

Q3 outbound campaign

Live
Email
58%
LinkedIn
27%
Call
15%

Sent

4,210

Reply rate

22%

Meetings

31

Campaign Builder

Create and manage multichannel campaigns end to end.

$ npm install @graph8/campaign-builder

Campaign Dashboard

Live send, open, reply, and meeting metrics.

$ npm install @graph8/campaign-dashboard

Content

graph8 / content

Sequence draft

Editor

Cutting SDR ramp time in half

Hi {{first_name}}, teams scaling outbound at {{company}} usually hit a routing wall before the third hire.

148 words Tone: direct
Save AI rewrite

Content Editor

AI content engine with variables, snippets, and preview.

$ npm install @graph8/content-editor

SEO Brief

Generate ranked SEO briefs from a target keyword.

$ npm install @graph8/seo-brief

Global

graph8 / global

Account targeting

Global
Ideal customer profile 1,840 accounts
Industry B2B SaaS, Fintech
Company size 200 to 2,000
Geo US, UK, DACH
Signal Hiring 3+ SDRs

Brand voice

Operator led and direct. Short sentences, research backed, no hype.

Brand Brief

Your brand voice, tone, and positioning in one document.

$ npm install @graph8/brand-brief

ICP Builder

Define and save your ideal customer profile visually.

$ npm install @graph8/icp-builder

Offer Panel

Structure offers, value props, and pricing matrices.

$ npm install @graph8/offer-panel

Proof Catalog

A searchable library of case studies and proof points.

$ npm install @graph8/proof-catalog

Team

graph8 / team

Workspace seats

4 of 6 used
DW

Dana Whitfield

AMER

Owner
ML

Marcus Lee

AMER

Admin
PN

Priya Nair

EMEA

Rep
TA

Tom Alvarez

APAC

Rep
2 seats open Invite member

Author Profile

Author profiles and thought-leadership voices.

$ npm install @graph8/author-profile

Revenue

71 features

Pipeline, deals, quotes, products, and a live revenue leaderboard.

Deals

graph8 / deals

Pipeline

$212k open

Qualified 2
Demo 1
Proposal 1

Pipeline Kanban

Drag deals across stages on a live pipeline board.

$ npm install @graph8/pipeline-kanban

Deal Card

Stage, value, owner, and next step for an open deal.

$ npm install @graph8/deal-card

Deal Drawer

Slide-over with full deal context and activity.

$ npm install @graph8/deal-drawer

AE Cockpit

A focused workspace for one rep across their book.

$ npm install @graph8/ae-cockpit

Quotes

graph8 / quotes

Quote

Q-2049 · Cartsy

Draft
ItemQtyPriceAmount
Pipeline Platform, Growth 1 $1,800/mo $21,600
Implementation, one time 1 $4,500 $4,500
Seats, additional 6 $45/mo $3,240
Subtotal $29,340
Discount -$1,467
Total $27,873
Net 30 · USD Send for e-sign

Quote Builder

Compose line items, terms, and pricing into a quote.

$ npm install @graph8/quote-builder

Quote Preview

Branded, signable preview of an outgoing quote.

$ npm install @graph8/quote-preview

Products

graph8 / products

Catalog

4 plans

Starter

$0 /mo

2 seats

Growth

Featured

$1,800 /mo

10 seats

Scale

$4,200 /mo

30 seats

Enterprise

Custom

SSO + SLA

Billed monthly USD

Product Catalog

Stripe products, plans, and pricing in one grid.

$ npm install @graph8/product-catalog

Subscription Panel

Subscription state, MRR, and lifecycle for an account.

$ npm install @graph8/subscription-panel

Leaderboard

graph8 / leaderboard

Leaderboard

Quarter to date
1 Dana Whitfield $412k
2 Marcus Lee $388k
3 Priya Nair $351k
4 Tom Alvarez $297k
5 Sara Okafor $264k
Live Marcus Lee closed Apex Robotics, $72.5k

Leaderboard

Live streaming standings across the revenue team.

$ npm install @graph8/leaderboard

Live Ticker

Real-time ticker of wins, calls, and meetings booked.

$ npm install @graph8/live-ticker

Engage

486 features

Reach buyers across calls, inbox, chat, sequences, and scheduling.

Appointments

graph8 / appointments

This week

2 booked

Mon

12

Tue

13

Wed

14

Thu

15

Fri

16

Demo: Apex Robotics

Marcus Lee

10:00

Discovery: Northwind

Dana Whitfield

14:30
Open

Scheduler

Schedule and manage appointments against live availability.

$ npm install @graph8/scheduler

Availability Grid

Visual grid of open slots across the team.

$ npm install @graph8/availability-grid

Booking Widget

Embeddable booking flow for prospects to self-serve.

$ npm install @graph8/booking-widget

Dialer

graph8 / dialer

Power dialer

queue 38

RV

Renata Vance

VP Sales . Northwind

02:14
1 2 ABC 3 DEF 4 GHI 5 JKL 6 MNO 7 PQRS 8 TUV 9 WXYZ * 0 + #

Call Console

Power-dialer console for high-volume outbound calling.

$ npm install @graph8/call-console

Dialpad

Click-to-dial pad with live call controls.

$ npm install @graph8/dialpad

Call Log

Searchable history of every call and its recording.

$ npm install @graph8/call-log

Disposition Panel

Capture outcomes and next steps after each call.

$ npm install @graph8/disposition-panel

Inbox

graph8 / inbox

Unified inbox

2 new
Em
Dana Whitfield Email
Re: pipeline benchmark, can we...
Li
Marcus Lee LinkedIn
Thanks for connecting. Open to a...
Ch
Priya Nair Chat
Sounds good, Thursday works.
Em
Tom Alvarez Email
Looping in our RevOps lead.
Li
Sofia Brandt LinkedIn
Appreciate the note, will review.

Conversation List

Unified list of conversations across every channel.

$ npm install @graph8/conversation-list

Thread View

Full message thread with context and history.

$ npm install @graph8/thread-view

Reply Composer

Compose replies with snippets, variables, and AI drafts.

$ npm install @graph8/reply-composer

Assignment Menu

Route and assign conversations across the team.

$ npm install @graph8/assignment-menu

Newsletter

graph8 / newsletter

Newsletter

8,420 subscribers
Subject This week in pipeline architecture
Tue 9:00 AM PT
Preview Schedule send

Newsletter Editor

Compose and preview newsletters before they send.

$ npm install @graph8/newsletter-editor

Subscriber List

Manage subscribers, segments, and consent state.

$ npm install @graph8/subscriber-list

Send Panel

Schedule, throttle, and track a newsletter send.

$ npm install @graph8/send-panel

Nurture

graph8 / nurture

Nurture drip

341 in flow

New 214
Day 0 Email

Welcome + research drop

Day 2 Email

Pipeline benchmark

Engaged 96
Day 5 LinkedIn

Connect + comment

Day 8 Email

Case study: Northwind

Qualified 31
Day 12 Call

Route to live call

Audience Builder

Engage consented audiences at scale by segment.

$ npm install @graph8/audience-builder

Consent Manager

Track who consented, to what, and when.

$ npm install @graph8/consent-manager

Drip Timeline

Visualize the drip cadence for a nurture track.

$ npm install @graph8/drip-timeline

Sequencer

graph8 / sequencer

Outbound sequence

3 steps active

1
Day 1 Email

Intro: pipeline routing

2
Day 3 LinkedIn

Connect + comment

3
Day 6 Call

Live call attempt

Sequence Builder

Drag-and-drop multistep, multichannel sequences.

$ npm install @graph8/sequence-builder

Enrollment Panel

Enroll, pause, and exit contacts from a sequence.

$ npm install @graph8/enrollment-panel

Step Analytics

Per-step open, reply, and conversion metrics.

$ npm install @graph8/step-analytics

Web Chat

graph8 / web-chat
Web chat Preview
Visitor on /pricing . 3rd visit
Hi there. Looking at a specific plan, or want a quick tour?
Trying to figure out how usage billing works.
Usage is credit based during preview. Calls and actions consume credits, not seat count. Want me to pull up the details?
Type a reply...

Chat Widget

Embeddable live-chat widget for your website.

$ npm install @graph8/chat-widget

Live Console

Agent console for answering visitors in real time.

$ npm install @graph8/live-console

Visitor Panel

See who you are chatting with and their account context.

$ npm install @graph8/visitor-panel

Agents

124 features

AI agents, sales coaching, skills, and durable multistep workflows.

Agents

graph8 / agents
Pipeline agent Online
Find accounts hiring SDRs this week.
Found 14 in-market accounts. Top match is Cartsy.
ran search.hiring_signals

Agent Chat

Streaming chat UI wired to the graph8 agent runtime.

$ npm install @graph8/agent-chat

Agent Config

Configure tools, memory, and guardrails for an agent.

$ npm install @graph8/agent-config

Agent Timeline

Step-by-step trace of an agent run with status.

$ npm install @graph8/agent-timeline

Sales Coach

graph8 / sales-coach

Call scorecard

Northwind . 32 min

Overall 74
Discovery
84
Objection handling
71
Next step
62

Coaching . You moved to pricing before confirming the buying timeline. Anchor the next step first.

Coach Panel

AI sales guidance surfaced in the flow of a call.

$ npm install @graph8/coach-panel

Call Scorecard

Scored call breakdown with coaching moments.

$ npm install @graph8/call-scorecard

Skills

graph8 / skills

Skills

3 enabled

enrich Tool
score_account Skill
draft_email Skill
book_meeting Tool

Activity

tool ran: enrich +4 fields . 0.8s

Skill Builder

Build and manage reusable AI skills.

$ npm install @graph8/skill-builder

Tool Execution Log

Every tool call, its inputs, and its result.

$ npm install @graph8/tool-execution-log

Workflows

graph8 / workflows

Workflow

run: success
Trigger

New inbound lead

Step 1
1

Enrich account

Step 2
2

Score fit

Action

Route to SDR queue

Workflow Canvas

Author durable, multistep workflows visually.

$ npm install @graph8/workflow-canvas

Run History

Inspect past runs, inputs, and outcomes.

$ npm install @graph8/run-history

Approval Panel

Human-in-the-loop approve, edit, or reject prompts.

$ npm install @graph8/approval-panel
Rebuild any surface

Rebuild any surface in an afternoon.

The cards above are a sample. All 1,819 graph8 features are reachable through REST API, MCP, and React components, each speaking the same SDK and sharing one theme. Compose a single surface, or mix Data, Engage, and Agents primitives into a workspace that feels native, then test it.

Build with graph8