REFERENCE
SDK Demos
How to use @asgard-js/core and @asgard-js/react, with demos you can try on the page.
Integration Overview
This page is the roadmap for building your first feature with Asgard. This
site (the SDK Demo) focuses on the frontend @asgard-js/react usage; "how to
build a bot, design its conversation logic, and obtain credentials" lives on the
platform side, documented in the
Asgard developer docs. Below we connect the
whole path, pointing to the right page at each step.
First build and publish your bot as a Bot Provider in Odin (get the endpoint
and credentials) → then wire it into your frontend with @asgard-js/react from
this site.
The full development journey
1. Understand the concepts, pick an integration pattern
Decide how your app connects to Asgard first — it affects every later step:
Pattern Best for Docs Direct Connect Frontend talks to the Bot Provider directly; fastest to ship Direct Connect Backend Relay Relay through your own backend, hide keys, add business logic Backend Relay Hosted Embed Embed the official iframe directly, no frontend code Hosted Embed Further reading: Integration intro. The demos on this site default to Direct Connect.
2. Build a bot in Odin and publish it as a Bot Provider
This is where developers most often get stuck — the
botProviderEndpointyour frontend needs comes from here. In Odin Studio:-
Create a Project and Workflow, and design the conversation logic (HTTP calls, SQL queries, knowledge-base retrieval…).
-
Publish it as a Bot Provider and obtain the endpoint and credentials:
https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}
Further reading:
3. Wire it into your frontend with
@asgard-js/reactOnce you have the endpoint, come back to this site:
- Quick Start — install, import CSS, render your first
<Chatbot>, SSR/Next.js wrapping - Chatbot Props — every available prop
- Embedding & Integration — inline / floating widget / fullscreen
4. Design messages and how replies render
Bot replies are delivered as message templates, which the frontend renders:
- Templates Demo — interactive preview of all 11 built-in templates
- Message Template spec — full JSON schema for each template
- Want full control over rendering? See Custom Renderer
5. Authentication and private bots
If your bot requires authentication:
- Private Bot, Auth States — how the frontend handles API keys and auth states
- Authentication, Workflow Auth — auth design on the platform side
-
Next steps
- First time? Jump straight into Quick Start.
- Want to see all frontend features? Browse the demos in the left sidebar.
- Need a backend relay? See the Backend Relay pattern and the backend SDK.