Skip to main content

Conversational AI Apps.
Built in React.

AI.JSX is a framework for building AI applications using Javascript and JSX. You get great support for prompt engineering, Document Question + Answering, and using external Tools (APIs). You can provide a set of React components to the LLM and have your UI constructed dynamically at runtime (AKA GenUI). Bring all these to life in a Sidekick or use them as building blocks in other apps.

DocsQA

  • Ground the model in sources of truth
  • URLs, documents, PDFs
  • Video and audio files
  • Fully hosted or bring your own

Tools

  • Give your app new capabilities
  • Action-oriented through APIs
  • Enable end-users to close the loop

GenUI

  • Move beyond simple text chat
  • JSX components enable the LLM to build UI dynamically at runtime

Your App Needs a Sidekick.

AI.JSX enables you to easily create Sidekicks, embeddable conversational assistants that live alongside your application. Sidekicks harness the power of DocsQA, Tools, and GenUI and bring everything together in a seamless experience.

An icon showing a conversational sidekick

Start Building a Sidekick

Powerful JSX Components

Create JSX components for all your conversational AI app needs.

Arrow up icon
<SystemMessage>
  <Prompt persona="expert customer service agent for Fixie" />
  You have access to the Fixie customer support docs...
</SystemMessage>
-- LLM Prompting
<SystemMessage>
  <Prompt persona="expert customer service agent for Fixie" />
  You have access to the Fixie customer support docs...
</SystemMessage>
lookUpFixieKnowledgeBase: {
  description: 'Look up information about Fixie from its
  customer support and developer docs'
  ...
}
-- DocsQA
lookUpFixieKnowledgeBase: {
  description: 'Look up information about Fixie from its
  customer support and developer docs'
  ...
}
tools: Record<string, Tool> = {
  listIssues: {
    description: 'List issues from Github and Discord',
    func: async function () {
      return fetchAPI('issues')
    }
  }
}
-- Tools
tools: Record<string, Tool> = {
  listIssues: {
    description: 'List issues from Github and Discord',
    func: async function () {
      return fetchAPI('issues')
    }
  }
}
export const mdxUsageExamples = <>
When you list users, use the <ListUsers /> component.
-- GenUI
export const mdxUsageExamples = <>
When you list users, use the <ListUsers /> component.
Arrow up icon

Magnifying glass iconLLM Prompting

Create prompts via components.

Knife iconDocsQA

Give the LLM new knowledge from your docs and URLs.

Indication arrow iconTools

Give the LLM a tool for listing mailboxes.

Two overlapping squaresGenUI

Move from text-only to fully visual output.

An icon showing wave propagation

Join our community

AI.JSX is open source. Star us on GitHub. Join our developer community on Discord. Follow us on Twitter.

GitHub  >Discord  >Twitter  >