> ## Documentation Index
> Fetch the complete documentation index at: https://docs.solute.so/llms.txt
> Use this file to discover all available pages before exploring further.
# Quick Start
> Get up and running with Solute SDK in minutes
## Quick Start
Get started with Solute SDK in just a few steps. Choose your framework below.
## Vanilla JavaScript / TypeScript
### 1. Import and Initialize
```typescript theme={null}
import { SoluteClient } from '@solute-ai/sdk';
const solute = new SoluteClient({
apiKey: 'your_api_key',
host: 'https://api.solute.dev',
});
```
### 2. Track Events
```typescript theme={null}
// Track custom events
solute.track('Button Clicked', {
button_id: 'signup-cta',
page: '/homepage',
});
// Identify users
solute.identify('user_123', {
email: 'user@example.com',
plan: 'premium',
});
// Track page views
solute.page('/pricing');
```
### 3. Use Feature Flags
```typescript theme={null}
// Check if feature is enabled
if (solute.isFeatureEnabled('new-checkout')) {
// Show new checkout flow
}
// Get A/B test variant
const variant = solute.getExperimentVariant('pricing-test');
if (variant === 'variant-a') {
// Show variant A
}
```
## Next.js App Router
### 1. Wrap Your App with SoluteProvider
Create a client component wrapper:
```tsx theme={null}
// components/providers/SoluteProviderWrapper.tsx
'use client';
import { SoluteProvider } from '@solute-ai/sdk/nextjs';
export function SoluteProviderWrapper({ children }) {
return (
{children}
);
}
```
Then use it in your root layout:
```tsx theme={null}
// app/layout.tsx
import { SoluteProviderWrapper } from '@/components/providers/SoluteProviderWrapper';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### 2. Use Hooks in Client Components
```tsx theme={null}
// app/components/SignupButton.tsx
'use client';
import { useTrack, useFeatureEnabled } from '@solute-ai/sdk/nextjs';
export function SignupButton() {
const track = useTrack();
const showNewDesign = useFeatureEnabled('new-signup-button');
const handleClick = () => {
track('Signup Button Clicked', {
design: showNewDesign ? 'new' : 'old',
});
};
return (
);
}
```
### 3. Server-Side Tracking
```tsx theme={null}
// app/page.tsx
import { trackServerEvent, getServerFeatureFlag } from '@solute-ai/sdk/nextjs';
export default async function HomePage() {
// Track server-side event
await trackServerEvent(
{
apiKey: process.env.SOLUTE_API_KEY!,
host: 'https://api.solute.dev',
},
'Page Viewed',
{ page: '/homepage' }
);
// Get feature flag on server
const showHero = await getServerFeatureFlag(
{
apiKey: process.env.SOLUTE_API_KEY!,
host: 'https://api.solute.dev',
},
'new-hero-section',
false
);
return (
{showHero ? : }
);
}
```
## Environment Variables
Set up your environment variables:
```env .env.local theme={null}
# Client-side (public)
NEXT_PUBLIC_SOLUTE_API_KEY=your_api_key_here
NEXT_PUBLIC_SOLUTE_HOST=https://api.solute.dev
# Server-side (private)
SOLUTE_API_KEY=your_api_key_here
SOLUTE_HOST=https://api.solute.dev
```
Use `NEXT_PUBLIC_` prefix for client-side environment variables in Next.js. Server-side variables don't need the prefix.
## Next Steps
Learn about tracking events, page views, and user actions
Set up feature flags and A/B testing
Deep dive into Next.js integration
Explore all configuration options