Getting Started

The quickest way to get started with OUAS is to add it to an existing React or Next.js application. Our core SDK is built to be a zero-dependency, lightweight drop-in that leverages your existing component architecture.

Install Dependencies

Install the core SDK and the renderer. You can also optionally install the CLI globally if you prefer.

terminal

npm install @ouas/react @ouas/renderer

Annotate Components

Wrap your existing components with the withOUAS HOC to expose them safely to the agent. This defines the exact schema the agent is allowed to manipulate.

AdaptiveCard.tsx

import { withOUAS } from '@ouas/react';
import { Card } from './components/Card';

export const AdaptiveCard = withOUAS(Card, {
id: 'adaptive-card',
schema: {
  title: { type: 'string', required: true }
}
});

Generate Manifest

Run the CLI to statically analyze your codebase, generate your Component Manifest, and validate your schemas.

terminal

npx ouas generate

Mount the Renderer

Use the OUASProvider at the root of your adaptive section. It parses incoming layout configurations and deterministically renders the annotated components.

App.tsx

import { OUASProvider } from '@ouas/react';
import manifest from './ouas-manifest.json';
import { AdaptiveCard } from './components/AdaptiveCard';

export default function App() {
return (
  <OUASProvider manifest={manifest}>
    <AdaptiveCard title="Hello Agent!" />
  </OUASProvider>
);
}

Introduction

Learn about the architecture

Manifest Spec

Learn how component schemas are defined