Supernova Ask AI — SDK Example

A fully functional ChatGPT-style chat interface built on top of the Supernova SDK, demonstrating how to integrate Supernova's AI capabilities into a web application.

The app connects to a Supernova workspace, lets you pick a design system, and chat with the AI about your tokens, assets, components, documentation, and more — all streamed in real time.

What this demonstrates

• AI Chat with streaming — Uses sdk.relay.invokeAmy() to send prompts and stream responses via SSE, rendering output progressively as it arrives.
• Thread management — Full CRUD on conversation threads using sdk.messaging.* (create, list, load messages, delete).
• Rich markdown rendering — AI responses are rendered as full markdown with syntax highlighting, tables, and custom entity blocks for assets, design components, documentation pages, tokens, and more.
• Entity blocks with live data — When the AI references design system entities (assets, Figma components, doc pages, etc.), the app fetches real data from the SDK and renders interactive tiles with thumbnails and links.
• Workspace & design system selection — Dynamically loads workspaces, design systems, versions, and brands from the SDK. Selections are persisted in localStorage.
• API key authentication — Simple login flow that initializes the SDK at runtime with a user-provided API key.

Tech stack

React 19, Vite, TypeScript, Tailwind CSS v4, shadcn/ui, @supernovaio/sdk.

Setup

1. Install dependencies

   npm install

2. Configure environment

   Create a .env file with the following:

   VITE_AI_API_URL=https://ai-api.alpha.supernova.io/api

   This is the only required env variable and points to the AI API endpoint. The API key is entered in the UI at login time.

3. Run the dev server

   npm run dev

   Opens on http://localhost:3000.

4. Enter your Supernova API key in the login screen. You can generate one from your Supernova account settings.

Project structure

src/
├── App.tsx                          # Main app shell, sidebar, chat UI
├── context/
│   ├── auth.tsx                     # API key auth, SDK initialization
│   └── session.tsx                  # Workspace/DS/version/brand selection
├── hooks/
│   ├── use-chat.ts                  # Thread + message management, send/stream
│   ├── use-stream-processor.ts      # SSE stream parsing for AI responses
│   └── use-sdk-cache.ts             # In-memory cache for assets, components
├── components/
│   ├── LoginPage.tsx                # API key login screen
│   └── markdown/
│       ├── MarkdownRenderer.tsx     # react-markdown with custom renderers
│       ├── CodeBlock.tsx            # Routes code fences to entity blocks
│       ├── EntityBlock.tsx          # Generic entity list (tokens, etc.)
│       ├── AssetsBlock.tsx          # Asset tiles with thumbnails
│       ├── DesignComponentsBlock.tsx # Figma component tiles with thumbnails
│       └── DocPagesBlock.tsx        # Documentation page rows with links
└── lib/
    └── supernova.ts                 # SDK singleton init/access

Example questions to try

These prompts will produce rich responses with entity blocks that render correctly in the app:

• "Show me all assets in my design system" — renders asset tiles with thumbnails
• "What Figma components do I have?" — renders design component tiles with thumbnails
• "List my documentation pages" — renders clickable documentation page rows that link to the Supernova editor
• "What assets do I have that contain the word icon?" — filtered asset search with thumbnail tiles
• "Describe my design system" — general markdown response with headings, lists, and inline formatting
• "Show me my Figma components related to buttons" — filtered design component results

Notes

• Workspace settings — The AI capabilities respect all configurations and security settings of the workspace the API key belongs to. If responses are blocked or not working, make sure Ask AI is enabled in your workspace settings.
• This is an example project — not all AI response block types are fully supported. Blocks like tokens, code components, and storybook playgrounds render as simple lists. Assets, design components, and documentation pages have richer rendering with thumbnails and links.
• The app shims some Node.js globals (process.env, process.versions, process.platform) in vite.config.ts. These are not required for the SDK to function correctly, but suppress console warnings in certain bundler setups.