Next.js

Use Anti-AI UI Framework with Next.js App Router and Pages Router.

Installation

Install via npm:

Installation
1.npm install anti-ai-ui react react-dom

App Router (Next.js 13+)

Use the 'use client' directive for Client Components:

App Router
1.'use client';
2.

3.import { RunawayButton } from 'anti-ai-ui';
4.

5.export function FormComponent() {
6.  return (
7.    <div style={{ position: 'relative', height: '200px' }}>
8.      <RunawayButton
9.        buttonText="Submit"
10.        onCatch={() => console.log('Caught!')}
11.      />
12.    </div>
13.  );
14.}
15.

16.// Use in Server Component:
17.import { FormComponent } from './FormComponent';
18.

19.export default function Page() {
20.  return (
21.    <div>
22.      <h1>My Page</h1>
23.      <FormComponent />
24.    </div>
25.  );
26.}

Pages Router

Works directly without any special configuration:

Pages Router
1.import { RunawayButton } from 'anti-ai-ui';
2.

3.export default function Home() {
4.  return (
5.    <div style={{ position: 'relative', height: '200px' }}>
6.      <RunawayButton
7.        buttonText="Submit"
8.        onCatch={() => console.log('Caught!')}
9.      />
10.    </div>
11.  );
12.}

Best Practices

  • Use client directive: Add 'use client' for App Router components
  • Server vs Client: Anti-AI components must run on the client
  • TypeScript: Full TypeScript support included

Next Steps