Get started with Claude 4

Claude 4 is Anthropic's most advanced model family to date, offering exceptional capabilities across reasoning, instruction following, coding, and knowledge tasks. Available in two variants—Sonnet and Opus—Claude 4 delivers state-of-the-art performance with enhanced reliability and control. Claude 4 builds on the extended thinking capabilities introduced in Claude 3.7, allowing for even more sophisticated problem-solving through careful, step-by-step reasoning.

Claude 4 excels at complex reasoning, code generation and analysis, detailed content creation, and agentic capabilities, making it ideal for powering sophisticated AI workflows, customer-facing agents, and applications requiring nuanced understanding and responses. Claude Opus 4 is an excellent coding model, leading on SWE-bench (72.5%) and Terminal-bench (43.2%), with the ability to sustain performance on long-running tasks that require focused effort and thousands of steps. Claude Sonnet 4 significantly improves on Sonnet 3.7, excelling in coding with 72.7% on SWE-bench while balancing performance and efficiency.

### Prompt Engineering for Claude 4 Models

Claude 4 models respond well to clear, explicit instructions. The following best practices can help achieve optimal performance:

1. Provide explicit instructions: Clearly state what you want the model to do, including specific steps or formats for the response.

2. Include context and motivation: Explain why a task is being performed to help the model better understand the underlying goals.

3. Avoid negative examples: When providing examples, only demonstrate the behavior you want to see, not what you want to avoid.

The AI TOOLKIT is the TypeScript toolkit designed to help developers build AI-powered applications with React, Next.js, Vue, Svelte, Node.js, and more. Integrating LLMs into applications is complicated and heavily dependent on the specific model provider you use.

The AI TOOLKIT abstracts away the differences between model providers, eliminates boilerplate code for building chatbots, and allows you to go beyond text output to generate rich, interactive components.

At the center of the AI TOOLKIT is AI TOOLKIT Core, which provides a unified API to call any LLM. The code snippet below is all you need to call Claude 4 Sonnet with the AI TOOLKIT:

import { anthropic } from '@ai-toolkit/anthropic';

import { generateText } from 'ai-toolkit';

const { text, reasoningText, reasoning } = await generateText({

model: anthropic('claude-sonnet-4-20250514'),

prompt: 'How will quantum computing impact cryptography by 2050?',

});

console.log(text);

### Reasoning Ability

Claude 4 enhances the extended thinking capabilities first introduced in Claude 3.7 Sonnet—the ability to solve complex problems with careful, step-by-step reasoning. Additionally, both Opus 4 and Sonnet 4 can now use tools during extended thinking, allowing Claude to alternate between reasoning and tool use to improve responses. You can enable extended thinking using the thinking provider option and specifying a thinking budget in tokens. For interleaved thinking (where Claude can think in between tool calls) you'll need to enable a beta feature using the anthropic-beta header:

import { anthropic, AnthropicProviderOptions } from '@ai-toolkit/anthropic';

import { generateText } from 'ai-toolkit';

const { text, reasoningText, reasoning } = await generateText({

model: anthropic('claude-sonnet-4-20250514'),

prompt: 'How will quantum computing impact cryptography by 2050?',

providerOptions: {

anthropic: {

thinking: { type: 'enabled', budgetTokens: 15000 },

} satisfies AnthropicProviderOptions,

},

headers: {

'anthropic-beta': 'interleaved-thinking-2025-05-14',

},

});

console.log(text); // text response

console.log(reasoningText); // reasoning text

console.log(reasoning); // reasoning details including redacted reasoning

### Building Interactive Interfaces

AI TOOLKIT Core can be paired with AI TOOLKIT UI, another powerful component of the AI TOOLKIT, to streamline the process of building chat, completion, and assistant interfaces with popular frameworks like Next.js, Nuxt, SvelteKit, and SolidStart.

AI TOOLKIT UI provides robust abstractions that simplify the complex tasks of managing chat streams and UI updates on the frontend, enabling you to develop dynamic AI-driven interfaces more efficiently.

With four main hooks — `useChat`, `useCompletion`, `useObject`, and `useAssistant` — you can incorporate real-time chat capabilities, text completions, streamed JSON, and interactive assistant features into your app.

Let's explore building a chatbot with Next.js, the AI TOOLKIT, and Claude Sonnet 4:

In a new Next.js application, first install the AI TOOLKIT and the Anthropic provider:

<Snippet text="pnpm install ai @ai-toolkit/anthropic" />

Then, create a route handler for the chat endpoint:

import { anthropic, AnthropicProviderOptions } from '@ai-toolkit/anthropic';

import { streamText, convertToModelMessages, type UIMessage } from 'ai-toolkit';

export async function POST(req: Request) {

const { messages }: { messages: UIMessage[] } = await req.json();

const result = streamText({

model: anthropic('claude-sonnet-4-20250514'),

messages: await convertToModelMessages(messages),

headers: {

'anthropic-beta': 'interleaved-thinking-2025-05-14',

},

providerOptions: {

anthropic: {

thinking: { type: 'enabled', budgetTokens: 15000 },

} satisfies AnthropicProviderOptions,

},

});

return result.toUIMessageStreamResponse({

sendReasoning: true,

});

}

<Note>

You can forward the model's reasoning tokens to the client with

sendReasoning: true in the toUIMessageStreamResponse method.

</Note>

Finally, update the root page (app/page.tsx) to use the useChat hook:

'use client';

import { useChat } from '@ai-toolkit/react';

import { DefaultChatTransport } from 'ai-toolkit';

import { useState } from 'react';

export default function Page() {

const [input, setInput] = useState('');

const { messages, sendMessage } = useChat({

transport: new DefaultChatTransport({ api: '/api/chat' }),

});

const handleSubmit = (e: React.FormEvent) => {

e.preventDefault();

if (input.trim()) {

sendMessage({ text: input });

setInput('');

}

};

return (

<div className="flex flex-col h-screen max-w-2xl mx-auto p-4">

<div className="flex-1 overflow-y-auto space-y-4 mb-4">

{messages.map(message => (

<div

key={message.id}

className={`p-3 rounded-lg ${

message.role === 'user' ? 'bg-blue-50 ml-auto' : 'bg-gray-50'

}`}

>

<p className="font-semibold">

{message.role === 'user' ? 'You' : 'Claude 4'}

</p>

{message.parts.map((part, index) => {

if (part.type === 'text') {

return (

<div key={index} className="mt-1">

{part.text}

</div>

);

}

if (part.type === 'reasoning') {

return (

<pre

key={index}

className="bg-gray-100 p-2 rounded mt-2 text-xs overflow-x-auto"

>

<details>

<summary className="cursor-pointer">

View reasoning

</summary>

{part.text}

</details>

</pre>

);

}

})}

</div>

))}

</div>

<form onSubmit={handleSubmit} className="flex gap-2">

<input

name="prompt"

value={input}

onChange={e => setInput(e.target.value)}

className="flex-1 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"

placeholder="Ask Claude 4 something..."

/>

<button

type="submit"

className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"

>

Send

</button>

</form>

</div>

);

}

<Note>

You can access the model's reasoning tokens with the reasoning part on the

message parts. The reasoning text is available in the text property of the

reasoning part.

</Note>

The useChat hook on your root page (app/page.tsx) will make a request to your LLM provider endpoint (app/api/chat/route.ts) whenever the user submits a message. The messages are then displayed in the chat UI.

### Claude 4 Model Variants

Claude 4 is available in two variants, each optimized for different use cases:

- Claude Sonnet 4: Balanced performance suitable for most enterprise applications, with significant improvements over Sonnet 3.7.

- Claude Opus 4: Anthropic's most powerful model and the best coding model available. Excels at sustained performance on long-running tasks that require focused effort and thousands of steps, with the ability to work continuously for several hours.

Ready to dive in? Here's how you can begin:

1. Explore the documentation at studio.khulnasoft.com/docs to understand the capabilities of the AI TOOLKIT.

2. Check out practical examples at studio.khulnasoft.com/examples to see the SDK in action.

3. Dive deeper with advanced guides on topics like Retrieval-Augmented Generation (RAG) at studio.khulnasoft.com/docs/guides.

4. Use ready-to-deploy AI templates at vercel.com/templates?type=ai.