ai_backend/urls.py [chapter] deterministic
from django.contrib import admin from django.urls import path, include urlpatterns = [ path("admin/", admin.site.urls), path("api/", include("ai_core.urls")), ] ``` With Django running (`python mana
from django.contrib import admin from django.urls import path, include urlpatterns = [ path("admin/", admin.site.urls), path("api/", include("ai_core.urls")), ]
`
With Django running (python manage.py runserver), the endpoint will be reachable at http://localhost:8000/api/classify/. The next step is to build a Next.js frontend that calls this endpoint, handles conversation history, and renders AI‑generated content.
Building the Next.js Frontend Next.js provides a modern, server‑rendered React framework with built‑in routing and API routes. We will create a Next.js app that communicates with the Django backend and maintains a **Conversation History** using React state.
```bash npx create-next-app@latest ai_frontend cd ai_frontend
`
Install any additional UI libraries you prefer (e.g., Tailwind CSS). For simplicity we will use the default Tailwind setup.
```bash npm install tailwindcss postcss autoprefixer npx tailwindcss init -p
`
Configure Tailwind to scan the project files.
```js // tailwind.config.js module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }
`
Now we will create a simple chat interface. The component will keep a list of messages, call the Django classify endpoint, and then render the response. We will also implement a basic authentication flow using a session token stored in localStorage.
jsx
// app/components/ChatBox.jsx
"use client";
import { useState } from "react";
export default function ChatBox() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState("");
const [loading, setLoading] = useState(false);
const sendMessage = async () => {
if (!input.trim()) return;
const userMsg = { role: "", content: input };
setMessages((prev) => [...prev, userMsg]);
setLoading(true);
try {
const response = await fetch("http://localhost:8000/api/classify/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: input }),
});
const data = await response.json();
// For demo, assume we get a category and we echo it back
const assistantMsg = { role: "", content: Category: ${data.category}` };
setMessages((prev) => [...prev, assistantMsg]);
} catch (err) {
console.error(err);
const errMsg = { role: "", content: "Error contacting backend." };
setMessages((prev) => [...prev, errMsg]);
} finally {
setLoading(false);
setInput("");
}
};
return (
{messages.map((msg, idx) => (
{msg.content}
))}
{ e.preventDefault(); sendMessage(); }} className="flex gap-2"> setInput(e.target.value)} className="flex-1 border rounded p-2" placeholder="Type a message..." />
{loading ? "..." : "Send"}
); }
`
We will embed this component in the main page.
```jsx // app/page.jsx import ChatBox from "./components/ChatBox"; export default function Home() { return (
); }
`
When the types a message, the frontend sends a POST request to the Django classify endpoint. The response contains a category, which we display as a simple acknowledgment. In a real , the backend would route the message to a downstream model (e.g., a local LLM) and return the generated text. We will show how to extend the backend to perform that routing in the next section.
Implementing End‑to‑End AI Features Now that the basic communication path is established, we need to add the AI layer. The goal is to take the message, pass it through a classifier that decides which model to use, and then invoke a local language model to generate a response. We will use the **CLASSIFIER_SYSTEM_PROMPT** to guide the classifier. First, we define the prompt template.
```python
Sources
Related (0)
No recorded relationships.