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.

In one sentence

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 botProviderEndpoint your frontend needs comes from here. In Odin Studio:

1. Create a Project and Workflow, and design the conversation logic (HTTP calls, SQL queries, knowledge-base retrieval…).

2. Publish it as a Bot Provider and obtain the endpoint and credentials:

   https://api.asgard-ai.com/ns/{namespace}/bot-provider/{botProviderId}

Hands-on tutorials:

• Your first workflow: Hello
• Build a simple chatbot

3. Wire it into your frontend with @asgard-js/react

Once 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.